feat: sort environments alphabetically (#4280)

* feat: sort environments alphabetically in sidebar and selector

* fix: correct typo in i18n string key

* fix: rename and export team environments bug

* chore: added sortEnvironments util function

* chore: ads doc

* chore: cleanup

---------

Co-authored-by: jamesgeorge007 <25279263+jamesgeorge007@users.noreply.github.com>

packages/hoppscotch-common/src/components/environments/teams/Details.vue

@@ -480,6 +480,8 @@ const getErrorMessage = (err: GQLError<string>) => {
   switch (err.error) {
     case "team_environment/not_found":
       return t("team_environment.not_found")
+    case "team_environment/short_name":
+      return t("environment.short_name")
     default:
       return t("error.something_went_wrong")
   }

packages/hoppscotch-common/src/components/environments/teams/Environment.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     class="group flex items-stretch"
-    @contextmenu.prevent="options!.tippy.show()"
+    @contextmenu.prevent="options!.tippy?.show()"
   >
     <span
       class="flex cursor-pointer items-center justify-center px-4"
@@ -212,6 +212,8 @@ const getErrorMessage = (err: GQLError<string>) => {
   switch (err.error) {
     case "team_environment/not_found":
       return t("team_environment.not_found")
+    case "team_environment/short_name":
+      return t("environment.short_name")
     default:
       return t("error.something_went_wrong")
   }

packages/hoppscotch-common/src/components/environments/teams/index.vue

@@ -44,7 +44,11 @@
       </div>
     </div>
     <HoppSmartPlaceholder
-      v-if="!loading && !teamEnvironments.length && !adapterError"
+      v-if="
+        !loading &&
+        !alphabeticallySortedTeamEnvironments.length &&
+        !adapterError
+      "
       :src="`/images/states/${colorMode.value}/blockchain.svg`"
       :alt="`${t('empty.environments')}`"
       :text="t('empty.environments')"
@@ -79,15 +83,15 @@
     </HoppSmartPlaceholder>
     <div v-else-if="!loading">
       <EnvironmentsTeamsEnvironment
-        v-for="(environment, index) in JSON.parse(
-          JSON.stringify(teamEnvironments)
+        v-for="{ env, index } in JSON.parse(
+          JSON.stringify(alphabeticallySortedTeamEnvironments)
         )"
         :key="`environment-${index}`"
-        :environment="environment"
+        :environment="env"
         :is-viewer="team?.role === 'VIEWER'"
-        @edit-environment="editEnvironment(environment)"
+        @edit-environment="editEnvironment(env)"
         @show-environment-properties="
-          showEnvironmentProperties(environment.environment.id)
+          showEnvironmentProperties(env.environment.id)
         "
       />
     </div>
@@ -114,7 +118,9 @@
     />
     <EnvironmentsImportExport
       v-if="showModalImportExport"
-      :team-environments="teamEnvironments"
+      :team-environments="
+        alphabeticallySortedTeamEnvironments.map(({ env }) => env)
+      "
       :team-id="team?.teamID"
       environment-type="TEAM_ENV"
       @hide-modal="displayModalImportExport(false)"
@@ -139,6 +145,7 @@ import IconHelpCircle from "~icons/lucide/help-circle"
 import IconImport from "~icons/lucide/folder-down"
 import { defineActionHandler } from "~/helpers/actions"
 import { TeamWorkspace } from "~/services/workspace.service"
+import { sortTeamEnvironmentsAlphabetically } from "~/helpers/utils/sortEnvironmentsAlphabetically"
 
 const t = useI18n()
 
@@ -151,6 +158,12 @@ const props = defineProps<{
   loading: boolean
 }>()
 
+// Sort environments alphabetically by default
+
+const alphabeticallySortedTeamEnvironments = computed(() =>
+  sortTeamEnvironmentsAlphabetically(props.teamEnvironments, "asc")
+)
+
 const showModalImportExport = ref(false)
 const showModalDetails = ref(false)
 const action = ref<"new" | "edit">("edit")
@@ -209,11 +222,12 @@ defineActionHandler(
   "modals.team.environment.edit",
   ({ envName, variableName, isSecret }) => {
     if (variableName) editingVariableName.value = variableName
-    const teamEnvToEdit = props.teamEnvironments.find(
-      (environment) => environment.environment.name === envName
+    const teamEnvToEdit = alphabeticallySortedTeamEnvironments.value.find(
+      ({ env }) => env.environment.name === envName
     )
     if (teamEnvToEdit) {
-      editEnvironment(teamEnvToEdit)
+      const { env } = teamEnvToEdit
+      editEnvironment(env)
       secretOptionSelected.value = isSecret ?? false
     }
   }