chore(refactor): removed absolute codes

components/environments/index.vue

@@ -1,10 +1,8 @@
 <template>
   <pw-section class="green" icon="history" :label="$t('environments')" ref="environments" no-legend>
     <div class="show-on-large-screen">
-      <!-- <label for="currentEnvironment">{{ $t("select_environment") }}</label> -->
       <span class="select-wrapper">
         <select
-          id="currentEnvironment"
           v-model="selectedEnvironmentIndex"
           :disabled="environments.length == 0"
           class="rounded-t-lg"

components/http/codegen-modal.vue

@@ -39,7 +39,6 @@
           <button
             class="icon"
             @click="copyRequestCode"
-            id="copyRequestCode"
             ref="copyRequestCode"
             v-tooltip="$t('copy_code')"
           >

components/http/import-curl.vue

@@ -11,7 +11,7 @@
       </div>
     </div>
     <div slot="body" class="flex flex-col">
-      <textarea id="import-curl" autofocus rows="8" :placeholder="$t('enter_curl')"></textarea>
+      <textarea autofocus rows="8" :placeholder="$t('enter_curl')"></textarea>
     </div>
     <div slot="footer">
       <div class="row-wrapper">

components/http/token-list.vue

@@ -12,7 +12,7 @@
     </div>
     <div slot="body" class="flex flex-col">
       <div class="row-wrapper">
-        <label for="token-list">{{ $t("token_list") }}</label>
+        <label>{{ $t("token_list") }}</label>
         <div v-if="tokens.length != 0">
           <button
             class="icon"
@@ -23,7 +23,7 @@
           </button>
         </div>
       </div>
-      <ul id="token-list" v-for="(token, index) in tokens" :key="index">
+      <ul v-for="(token, index) in tokens" :key="index">
         <li>
           <input
             :placeholder="`name ${index + 1}`"

components/layout/history.vue

@@ -66,7 +66,6 @@
               <div>
                 <button
                   class="icon"
-                  :id="'use-button#' + index"
                   @click="useHistory(entry)"
                   :aria-label="$t('edit')"
                   v-close-popover
@@ -78,7 +77,6 @@
               <div>
                 <button
                   class="icon"
-                  :id="'delete-button#' + index"
                   @click="deleteHistory(entry)"
                   :aria-label="$t('delete')"
                   v-close-popover
@@ -146,12 +144,7 @@
     </p>
     <div v-if="history.length !== 0" class="rounded-b-lg bg-bgDarkColor">
       <div class="row-wrapper" v-if="!isClearingHistory">
-        <button
+        <button class="icon" :disabled="history.length === 0" @click="enableHistoryClearing">
-          class="icon"
-          id="clear-history-button"
-          :disabled="history.length === 0"
-          @click="enableHistoryClearing"
-        >
           <i class="material-icons">clear_all</i>
           <span>{{ $t("clear_all") }}</span>
         </button>
@@ -208,24 +201,12 @@
         </v-popover>
       </div>
       <div class="row-wrapper" v-else>
-        <p for="clear-history-button" class="info">
+        <p class="info"><i class="material-icons">help_outline</i> {{ $t("are_you_sure") }}</p>
-          <i class="material-icons">help_outline</i> {{ $t("are_you_sure") }}
-        </p>
         <div>
-          <button
+          <button class="icon" @click="clearHistory" v-tooltip="$t('yes')">
-            class="icon"
-            id="confirm-clear-history-button"
-            @click="clearHistory"
-            v-tooltip="$t('yes')"
-          >
             <i class="material-icons">done</i>
           </button>
-          <button
+          <button class="icon" @click="disableHistoryClearing" v-tooltip="$t('no')">
-            class="icon"
-            id="reject-clear-history-button"
-            @click="disableHistoryClearing"
-            v-tooltip="$t('no')"
-          >
             <i class="material-icons">close</i>
           </button>
         </div>

components/realtime/socketio.vue

@@ -89,7 +89,6 @@
               class="icon"
               @click="removeCommunicationInput({ index })"
               v-tooltip.bottom="$t('delete')"
-              :id="`delete-socketio-message-${index}`"
             >
               <i class="material-icons">delete</i>
             </button>

pages/graphql.vue

@@ -93,7 +93,6 @@
                     class="icon"
                     @click="removeRequestHeader(index)"
                     v-tooltip.bottom="$t('delete')"
-                    id="header"
                   >
                     <i class="material-icons">delete</i>
                   </button>
@@ -165,7 +164,6 @@
             class="rounded-b-lg missing-data-response"
             :value="$t('waiting_receive_schema')"
             ref="status"
-            id="status"
             name="status"
             readonly
             type="text"
@@ -281,7 +279,6 @@
               class="rounded-b-lg missing-data-response"
               :value="$t('waiting_receive_response')"
               ref="status"
-              id="status"
               name="status"
               readonly
               type="text"
@@ -334,11 +331,7 @@
                   :label="$t('types')"
                   ref="typesTab"
                 >
-                  <div
+                  <div v-for="type in filteredGraphqlTypes" :key="type.name">
-                    v-for="type in filteredGraphqlTypes"
-                    :key="type.name"
-                    :id="`type_${type.name}`"
-                  >
                     <type
                       :gqlType="type"
                       :isHighlighted="isGqlTypeHighlighted({ gqlType: type })"