feat: promote environment aware input to stable

2021-10-14 13:00:32 +05:30
parent 3f513f2f4d
commit c1ec5dc60d
9 changed files with 18 additions and 208 deletions
--- a/packages/hoppscotch-app/components/http/Authorization.vue
+++ b/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"),
    }
  },
 })
--- a/packages/hoppscotch-app/components/http/BodyParameters.vue
+++ b/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"),
    }
  },
 })
--- a/packages/hoppscotch-app/components/http/Headers.vue
+++ b/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>
--- a/packages/hoppscotch-app/components/http/OAuth2Authorization.vue
+++ b/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"
--- a/packages/hoppscotch-app/components/http/Parameters.vue
+++ b/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>
--- a/packages/hoppscotch-app/components/http/Request.vue
+++ b/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>
--- a/packages/hoppscotch-app/components/smart/EnvInput.vue
+++ b/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;
--- a/packages/hoppscotch-app/newstore/settings.ts
+++ b/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,
--- a/packages/hoppscotch-app/pages/settings.vue
+++ b/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"),