feat: promote environment aware input to stable

packages/hoppscotch-app/components/http/Authorization.vue

@@ -109,48 +109,19 @@
     </div>
     <div v-if="authType === 'basic'" class="border-b border-dividerLight flex">
       <div class="border-r border-dividerLight w-2/3">
-        <div
-          class="divide-x divide-dividerLight border-b border-dividerLight flex"
-        >
+        <div class="border-b border-dividerLight flex">
           <SmartEnvInput
-            v-if="EXPERIMENTAL_URL_BAR_ENABLED"
             v-model="basicUsername"
-            class="bg-transparent flex flex-1 py-1 px-4"
             :placeholder="$t('authorization.username')"
-          />
-          <input
-            v-else
-            id="http_basic_user"
-            v-model="basicUsername"
-            class="bg-transparent flex flex-1 py-2 px-4"
-            :placeholder="$t('authorization.username')"
-            name="http_basic_user"
+            styles="bg-transparent flex flex-1 py-1 px-4"
           />
         </div>
-        <div
-          class="divide-x divide-dividerLight border-b border-dividerLight flex"
-        >
+        <div class="border-b border-dividerLight flex">
           <SmartEnvInput
-            v-if="EXPERIMENTAL_URL_BAR_ENABLED"
             v-model="basicPassword"
-            class="bg-transparent flex flex-1 py-1 px-4"
             :placeholder="$t('authorization.password')"
+            styles="bg-transparent flex flex-1 py-1 px-4"
           />
-          <input
-            v-else
-            id="http_basic_passwd"
-            v-model="basicPassword"
-            class="bg-transparent flex flex-1 py-2 px-4"
-            :placeholder="$t('authorization.password')"
-            name="http_basic_passwd"
-            :type="passwordFieldType"
-          />
-          <span>
-            <ButtonSecondary
-              :svg="passwordFieldType === 'text' ? 'eye' : 'eye-off'"
-              @click.native="switchVisibility"
-            />
-          </span>
         </div>
       </div>
       <div
@@ -181,22 +152,11 @@
     </div>
     <div v-if="authType === 'bearer'" class="border-b border-dividerLight flex">
       <div class="border-r border-dividerLight w-2/3">
-        <div
-          class="divide-x divide-dividerLight border-b border-dividerLight flex"
-        >
+        <div class="border-b border-dividerLight flex">
           <SmartEnvInput
-            v-if="EXPERIMENTAL_URL_BAR_ENABLED"
             v-model="bearerToken"
-            class="bg-transparent flex flex-1 py-1 px-4"
             placeholder="Token"
-          />
-          <input
-            v-else
-            id="bearer_token"
-            v-model="bearerToken"
-            class="bg-transparent flex flex-1 py-2 px-4"
-            placeholder="Token"
-            name="bearer_token"
+            styles="bg-transparent flex flex-1 py-1 px-4"
           />
         </div>
       </div>
@@ -231,22 +191,11 @@
       class="border-b border-dividerLight flex"
     >
       <div class="border-r border-dividerLight w-2/3">
-        <div
-          class="divide-x divide-dividerLight border-b border-dividerLight flex"
-        >
+        <div class="border-b border-dividerLight flex">
           <SmartEnvInput
-            v-if="EXPERIMENTAL_URL_BAR_ENABLED"
             v-model="oauth2Token"
-            class="bg-transparent flex flex-1 py-1 px-4"
             placeholder="Token"
-          />
-          <input
-            v-else
-            id="oauth2_token"
-            v-model="oauth2Token"
-            class="bg-transparent flex flex-1 py-2 px-4"
-            placeholder="Token"
-            name="oauth2_token"
+            styles="bg-transparent flex flex-1 py-1 px-4"
           />
         </div>
         <HttpOAuth2Authorization />
@@ -281,7 +230,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, Ref, ref } from "@nuxtjs/composition-api"
+import { computed, defineComponent, Ref } from "@nuxtjs/composition-api"
 import {
   HoppRESTAuthBasic,
   HoppRESTAuthBearer,
@@ -317,8 +266,6 @@ export default defineComponent({
 
     const URLExcludes = useSetting("URL_EXCLUDES")
 
-    const passwordFieldType = ref("password")
-
     const clearContent = () => {
       auth.value = {
         authType: "none",
@@ -326,12 +273,6 @@ export default defineComponent({
       }
     }
 
-    const switchVisibility = () => {
-      if (passwordFieldType.value === "text")
-        passwordFieldType.value = "password"
-      else passwordFieldType.value = "text"
-    }
-
     return {
       auth,
       authType,
@@ -342,10 +283,7 @@ export default defineComponent({
       bearerToken,
       oauth2Token,
       URLExcludes,
-      passwordFieldType,
       clearContent,
-      switchVisibility,
-      EXPERIMENTAL_URL_BAR_ENABLED: useSetting("EXPERIMENTAL_URL_BAR_ENABLED"),
     }
   },
 })

packages/hoppscotch-app/components/http/BodyParameters.vue

@@ -44,7 +44,6 @@
       class="divide-x divide-dividerLight border-b border-dividerLight flex"
     >
       <SmartEnvInput
-        v-if="EXPERIMENTAL_URL_BAR_ENABLED"
         v-model="param.key"
         :placeholder="`${$t('count.parameter', { count: index + 1 })}`"
         styles="
@@ -63,22 +62,6 @@
           })
         "
       />
-      <input
-        v-else
-        class="bg-transparent flex flex-1 py-2 px-4"
-        :placeholder="`${$t('count.parameter', { count: index + 1 })}`"
-        :name="'param' + index"
-        :value="param.key"
-        autofocus
-        @change="
-          updateBodyParam(index, {
-            key: $event.target.value,
-            value: param.value,
-            active: param.active,
-            isFile: param.isFile,
-          })
-        "
-      />
       <div v-if="param.isFile" class="file-chips-container hide-scrollbar">
         <div class="space-x-2 file-chips-wrapper">
           <SmartDeletableChip
@@ -92,7 +75,6 @@
       </div>
       <span v-else class="flex flex-1">
         <SmartEnvInput
-          v-if="EXPERIMENTAL_URL_BAR_ENABLED"
           v-model="param.value"
           :placeholder="`${$t('count.value', { count: index + 1 })}`"
           styles="
@@ -111,21 +93,6 @@
             })
           "
         />
-        <input
-          v-else
-          class="bg-transparent flex flex-1 py-2 px-4"
-          :placeholder="`${$t('count.value', { count: index + 1 })}`"
-          :name="'value' + index"
-          :value="param.value"
-          @change="
-            updateBodyParam(index, {
-              key: param.key,
-              value: $event.target.value,
-              active: param.active,
-              isFile: param.isFile,
-            })
-          "
-        />
       </span>
       <span>
         <label for="attachment" class="p-0">
@@ -210,7 +177,6 @@ import {
   updateFormDataEntry,
   useRESTRequestBody,
 } from "~/newstore/RESTSession"
-import { useSetting } from "~/newstore/settings"
 
 export default defineComponent({
   setup() {
@@ -291,7 +257,6 @@ export default defineComponent({
       clearContent,
       setRequestAttachment,
       chipDelete,
-      EXPERIMENTAL_URL_BAR_ENABLED: useSetting("EXPERIMENTAL_URL_BAR_ENABLED"),
     }
   },
 })

packages/hoppscotch-app/components/http/Headers.vue

@@ -68,7 +68,7 @@
             px-4
             truncate
           "
-          :class="{ '!flex flex-1': EXPERIMENTAL_URL_BAR_ENABLED }"
+          class="!flex flex-1"
           @input="
             updateHeader(index, {
               key: $event,
@@ -78,7 +78,6 @@
           "
         />
         <SmartEnvInput
-          v-if="EXPERIMENTAL_URL_BAR_ENABLED"
           v-model="header.value"
           :placeholder="`${$t('count.value', { count: index + 1 })}`"
           styles="
@@ -96,20 +95,6 @@
             })
           "
         />
-        <input
-          v-else
-          class="bg-transparent flex flex-1 py-2 px-4"
-          :placeholder="`${$t('count.value', { count: index + 1 })}`"
-          :name="'value' + index"
-          :value="header.value"
-          @change="
-            updateHeader(index, {
-              key: header.key,
-              value: $event.target.value,
-              active: header.active,
-            })
-          "
-        />
         <span>
           <ButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
@@ -185,7 +170,6 @@ import {
   updateRESTHeader,
 } from "~/newstore/RESTSession"
 import { commonHeaders } from "~/helpers/headers"
-import { useSetting } from "~/newstore/settings"
 import { useReadonlyStream } from "~/helpers/utils/composables"
 import { HoppRESTHeader } from "~/helpers/types/HoppRESTRequest"
 
@@ -254,5 +238,4 @@ const deleteHeader = (index: number) => {
 const clearContent = () => {
   deleteAllRESTHeaders()
 }
-const EXPERIMENTAL_URL_BAR_ENABLED = useSetting("EXPERIMENTAL_URL_BAR_ENABLED")
 </script>

packages/hoppscotch-app/components/http/OAuth2Authorization.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="flex flex-col">
-    <div class="divide-x divide-dividerLight border-b border-dividerLight flex">
+    <div class="border-b border-dividerLight flex">
       <input
         id="oidcDiscoveryURL"
         v-model="oidcDiscoveryURL"
@@ -9,7 +9,7 @@
         name="oidcDiscoveryURL"
       />
     </div>
-    <div class="divide-x divide-dividerLight border-b border-dividerLight flex">
+    <div class="border-b border-dividerLight flex">
       <input
         id="authURL"
         v-model="authURL"
@@ -18,7 +18,7 @@
         name="authURL"
       />
     </div>
-    <div class="divide-x divide-dividerLight border-b border-dividerLight flex">
+    <div class="border-b border-dividerLight flex">
       <input
         id="accessTokenURL"
         v-model="accessTokenURL"
@@ -27,7 +27,7 @@
         name="accessTokenURL"
       />
     </div>
-    <div class="divide-x divide-dividerLight border-b border-dividerLight flex">
+    <div class="border-b border-dividerLight flex">
       <input
         id="clientID"
         v-model="clientID"
@@ -36,7 +36,7 @@
         name="clientID"
       />
     </div>
-    <div class="divide-x divide-dividerLight border-b border-dividerLight flex">
+    <div class="border-b border-dividerLight flex">
       <input
         id="scope"
         v-model="scope"

packages/hoppscotch-app/components/http/Parameters.vue

@@ -55,7 +55,6 @@
         class="divide-x divide-dividerLight border-b border-dividerLight flex"
       >
         <SmartEnvInput
-          v-if="EXPERIMENTAL_URL_BAR_ENABLED"
           v-model="param.key"
           :placeholder="`${$t('count.parameter', { count: index + 1 })}`"
           styles="
@@ -73,25 +72,7 @@
             })
           "
         />
-        <input
-          v-else
-          class="bg-transparent flex flex-1 py-2 px-4"
-          :placeholder="`${$t('count.parameter', {
-            count: index + 1,
-          })}`"
-          :name="'param' + index"
-          :value="param.key"
-          autofocus
-          @change="
-            updateParam(index, {
-              key: $event.target.value,
-              value: param.value,
-              active: param.active,
-            })
-          "
-        />
         <SmartEnvInput
-          v-if="EXPERIMENTAL_URL_BAR_ENABLED"
           v-model="param.value"
           :placeholder="`${$t('count.value', { count: index + 1 })}`"
           styles="
@@ -109,20 +90,6 @@
             })
           "
         />
-        <input
-          v-else
-          class="bg-transparent flex flex-1 py-2 px-4"
-          :placeholder="`${$t('count.value', { count: index + 1 })}`"
-          :name="'value' + index"
-          :value="param.value"
-          @change="
-            updateParam(index, {
-              key: param.key,
-              value: $event.target.value,
-              active: param.active,
-            })
-          "
-        />
         <span>
           <ButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
@@ -197,7 +164,6 @@ import {
   deleteAllRESTParams,
   setRESTParams,
 } from "~/newstore/RESTSession"
-import { useSetting } from "~/newstore/settings"
 import "codemirror/mode/yaml/yaml"
 
 const {
@@ -266,6 +232,4 @@ const deleteParam = (index: number) => {
 const clearContent = () => {
   deleteAllRESTParams()
 }
-
-const EXPERIMENTAL_URL_BAR_ENABLED = useSetting("EXPERIMENTAL_URL_BAR_ENABLED")
 </script>

packages/hoppscotch-app/components/http/Request.vue

@@ -59,7 +59,6 @@
       </div>
       <div class="flex flex-1">
         <SmartEnvInput
-          v-if="EXPERIMENTAL_URL_BAR_ENABLED"
           v-model="newEndpoint"
           :placeholder="`${$t('request.url')}`"
           styles="
@@ -78,32 +77,6 @@
           "
           @enter="newSendRequest()"
         />
-        <input
-          v-else
-          id="url"
-          v-model="newEndpoint"
-          v-focus
-          class="
-            bg-primaryLight
-            border border-divider
-            rounded-r
-            flex
-            text-secondaryDark
-            w-full
-            min-w-32
-            py-2
-            px-4
-            hover:border-dividerDark
-            focus-visible:bg-transparent focus-visible:border-dividerDark
-          "
-          name="url"
-          type="text"
-          autocomplete="off"
-          spellcheck="false"
-          :placeholder="`${$t('request.url')}`"
-          autofocus
-          @keyup.enter="newSendRequest()"
-        />
       </div>
     </div>
     <div class="flex">
@@ -451,8 +424,6 @@ const isCustomMethod = computed(() => {
 
 const requestName = useRESTRequestName()
 
-const EXPERIMENTAL_URL_BAR_ENABLED = useSetting("EXPERIMENTAL_URL_BAR_ENABLED")
-
 const windowInnerWidth = useWindowSize()
 const COLUMN_LAYOUT = useSetting("COLUMN_LAYOUT")
 </script>

packages/hoppscotch-app/components/smart/EnvInput.vue

@@ -480,7 +480,7 @@ export default defineComponent({
   @apply font-medium;
 
   &:empty {
-    line-height: 1.9;
+    @apply leading-loose;
 
     &::before {
       @apply text-secondary;

packages/hoppscotch-app/newstore/settings.ts

@@ -37,7 +37,6 @@ export type SettingsType = {
   PROXY_URL: string
   PROXY_KEY: string
   EXTENSIONS_ENABLED: boolean
-  EXPERIMENTAL_URL_BAR_ENABLED: boolean
   URL_EXCLUDES: {
     auth: boolean
     httpUser: boolean
@@ -64,7 +63,6 @@ export const defaultSettings: SettingsType = {
   PROXY_URL: "https://proxy.hoppscotch.io/",
   PROXY_KEY: "",
   EXTENSIONS_ENABLED: true,
-  EXPERIMENTAL_URL_BAR_ENABLED: true,
   URL_EXCLUDES: {
     auth: true,
     httpUser: true,

packages/hoppscotch-app/pages/settings.vue

@@ -167,14 +167,6 @@
               >.
             </div>
             <div class="space-y-4 py-4">
-              <div class="flex items-center">
-                <SmartToggle
-                  :on="EXPERIMENTAL_URL_BAR_ENABLED"
-                  @change="toggleSetting('EXPERIMENTAL_URL_BAR_ENABLED')"
-                >
-                  {{ $t("settings.use_experimental_url_bar") }}
-                </SmartToggle>
-              </div>
               <div class="flex items-center">
                 <SmartToggle :on="TELEMETRY_ENABLED" @change="showConfirmModal">
                   {{ $t("settings.telemetry") }}
@@ -185,7 +177,7 @@
                   }}
                 </SmartToggle>
               </div>
-              <!-- <div class="flex items-center">
+              <div class="flex items-center">
                 <SmartToggle
                   :on="LEFT_SIDEBAR"
                   @change="toggleSetting('LEFT_SIDEBAR')"
@@ -195,7 +187,7 @@
                     LEFT_SIDEBAR ? $t("state.enabled") : $t("state.disabled")
                   }}
                 </SmartToggle>
-              </div> -->
+              </div>
               <div class="flex items-center">
                 <SmartToggle :on="ZEN_MODE" @change="toggleSetting('ZEN_MODE')">
                   {{ $t("layout.zen_mode") }}
@@ -370,7 +362,6 @@ export default defineComponent({
       PROXY_URL: useSetting("PROXY_URL"),
       PROXY_KEY: useSetting("PROXY_KEY"),
       EXTENSIONS_ENABLED: useSetting("EXTENSIONS_ENABLED"),
-      EXPERIMENTAL_URL_BAR_ENABLED: useSetting("EXPERIMENTAL_URL_BAR_ENABLED"),
       SYNC_COLLECTIONS: useSetting("syncCollections"),
       SYNC_ENVIRONMENTS: useSetting("syncEnvironments"),
       SYNC_HISTORY: useSetting("syncHistory"),