Merge pull request #2992 from threefoldtech/development_2.6_chip_group

Fix IPs chip style
threefoldtech · Jun 23, 2024 · 7ef8313 · 7ef8313
2 parents 3f6d5c5 + d304f93
commit 7ef8313
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 70 deletions.
diff --git a/packages/playground/src/components/ssh_keys/ManageSshDeployemnt.vue b/packages/playground/src/components/ssh_keys/ManageSshDeployemnt.vue
@@ -13,38 +13,16 @@
           <router-link :to="DashboardRoutes.Deploy.SSHKey">SSH keys management page</router-link>
           and add more as needed.
         </v-alert>
-        <VDivider class="mt-3" />
-      </v-card-text>
-
-      <v-card-actions class="justify-end mb-1 mr-2">
-        <v-btn
-          color="secondary"
-          @click="openManageDialog = true"
-          :disabled="sshKeysManagement.list() && sshKeysManagement.list().length === 0"
-        >
-          Manage SSH keys
-        </v-btn>
-      </v-card-actions>
-    </v-card>
-  </div>
-
-  <v-dialog v-model="openManageDialog" max-width="800">
-    <v-card>
-      <v-card-title class="bg-primary">
-        <v-icon>mdi-cog-sync</v-icon>
-        Manage SSH keys
-      </v-card-title>
-
-      <v-card-text>
-        <v-alert type="info" class="mb-5">
+        <v-alert type="info" class="mt-3">
           <!--
             TODO: Return the message back when return the multiple keys feature.
             The keys selected here will be forwarded to your deployment. To change keys, simply toggle on the keys you
             wish to select/deselect.
           -->
           To change the key that you want to use over the deployment, simply click on it.
         </v-alert>
-
+      </v-card-text>
+      <v-chip-group class="ml-3" v-model="selectedKey" mandatory>
         <v-tooltip
           v-for="_key of sshKeysManagement.list()"
           :key="_key.id"
@@ -53,7 +31,7 @@
         >
           <template #activator="{ props }">
             <v-chip
-              class="pa-5 ml-5 mt-5"
+              class="pa-5 mb-3"
               :variant="isKeySelected(_key) ? 'flat' : 'outlined'"
               :color="
                 isKeySelected(_key) ? 'primary' : theme.name.value === AppThemeSelection.light ? 'primary' : 'white'
@@ -72,22 +50,9 @@
             </v-chip>
           </template>
         </v-tooltip>
-        <v-divider class="mt-3" />
-      </v-card-text>
-
-      <v-card-actions class="justify-end mb-1 mr-2">
-        <v-btn color="anchor" text="Close" @click="openManageDialog = false" />
-      </v-card-actions>
+      </v-chip-group>
     </v-card>
-  </v-dialog>
-
-  <!-- View SSH Key -->
-  <ssh-data-dialog
-    :open="isViewSSHKey"
-    :selected-key="selectedKey"
-    :all-keys="selectedKeys"
-    @close="onCloseSelectKey"
-  />
+  </div>
 </template>
 
 <script lang="ts">
@@ -96,7 +61,6 @@ import { capitalize, defineComponent, getCurrentInstance, nextTick, onMounted, r
 import { onUnmounted } from "vue";
 import { useTheme } from "vuetify";
 
-import SshDataDialog from "@/components/ssh_keys/SshDataDialog.vue";
 import { useForm, ValidatorStatus } from "@/hooks/form_validator";
 import type { InputValidatorService } from "@/hooks/input_validator";
 import { DashboardRoutes } from "@/router/routes";
@@ -107,22 +71,12 @@ import SSHKeysManagement from "@/utils/ssh";
 export default defineComponent({
   name: "ManageSshDeployemnt",
   emits: ["selectedKeys"],
-  components: {
-    SshDataDialog,
-  },
 
   setup(_, { emit }) {
     const inputElement = ref<HTMLElement>();
-    const defaultKeyData = {
-      createdAt: "",
-      id: 0,
-      publicKey: "",
-      name: "",
-      isActive: false,
-    };
     const openManageDialog = ref<boolean>(false);
-    const selectedKey = ref<SSHKeyData>(defaultKeyData);
     const selectedKeys = ref<SSHKeyData[]>([]);
+    const selectedKey = ref<number>();
     const isViewSSHKey = ref<boolean>(false);
     const sshKeysManagement = new SSHKeysManagement();
     const theme = useTheme();
@@ -132,6 +86,7 @@ export default defineComponent({
 
     onMounted(() => {
       selectedKeys.value = sshKeysManagement.list().filter(_key => _key.isActive === true);
+      selectedKey.value = selectedKeys.value.findIndex(k => k.id === selectedKeys.value[0].id);
       // TODO: Remove the below `selectedKeys.value = [selectedKeys.value[0]];` to make the user select more than one key
       // after fixing this issue: https://github.com/threefoldtech/tf-images/issues/231
       selectedKeys.value = [selectedKeys.value[0]];
@@ -160,18 +115,6 @@ export default defineComponent({
       emit("selectedKeys", selectedKeysString.value);
     }
 
-    function onSelectKey(key: SSHKeyData) {
-      selectedKey.value = key;
-      isViewSSHKey.value = true;
-    }
-
-    function onCloseSelectKey() {
-      isViewSSHKey.value = false;
-      nextTick(() => {
-        selectedKey.value = defaultKeyData;
-      });
-    }
-
     function handleKeys() {
       selectedKeysString.value = selectedKeys.value.map(_key => _key.publicKey).join("\n\n");
     }
@@ -209,16 +152,12 @@ export default defineComponent({
       selectedKeys,
       selectedKey,
       isViewSSHKey,
-      defaultKeyData,
       selectedKeysString,
       DashboardRoutes,
       sshKeysManagement,
       theme,
       AppThemeSelection,
-
       capitalize,
-      onSelectKey,
-      onCloseSelectKey,
       selectKey,
       isKeySelected,
     };

diff --git a/packages/playground/src/dashboard/components/public_ips_table.vue b/packages/playground/src/dashboard/components/public_ips_table.vue
@@ -39,7 +39,7 @@
           <strong>Delete the following IPs?</strong>
         </v-card-title>
         <v-card-text>
-          <v-chip class="mb-5" v-for="item in selectedItems" :key="item">
+          <v-chip class="mb-5 mr-2" v-for="item in selectedItems" :key="item">
             {{ item.ip }}
           </v-chip>
           <v-divider />