feat: secret variables in environments (#3779)

Co-authored-by: jamesgeorge007 <jamesgeorge998001@gmail.com>

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

@@ -67,6 +67,7 @@
       :action="action"
       :editing-environment-index="editingEnvironmentIndex"
       :editing-variable-name="editingVariableName"
+      :is-secret-option-selected="secretOptionSelected"
       @hide-modal="displayModalEdit(false)"
     />
     <EnvironmentsImportExport
@@ -99,6 +100,7 @@ const showModalDetails = ref(false)
 const action = ref<"new" | "edit">("edit")
 const editingEnvironmentIndex = ref<number | null>(null)
 const editingVariableName = ref("")
+const secretOptionSelected = ref(false)
 
 const displayModalAdd = (shouldDisplay: boolean) => {
   action.value = "new"
@@ -120,18 +122,23 @@ const editEnvironment = (environmentIndex: number) => {
 }
 const resetSelectedData = () => {
   editingEnvironmentIndex.value = null
+  editingVariableName.value = ""
+  secretOptionSelected.value = false
 }
 
 defineActionHandler(
   "modals.my.environment.edit",
-  ({ envName, variableName }) => {
+  ({ envName, variableName, isSecret }) => {
     if (variableName) editingVariableName.value = variableName
     const envIndex: number = environments.value.findIndex(
       (environment: Environment) => {
         return environment.name === envName
       }
     )
-    if (envName !== "Global") editEnvironment(envIndex)
+    if (envName !== "Global") {
+      editEnvironment(envIndex)
+      secretOptionSelected.value = isSecret ?? false
+    }
   }
 )
 </script>