Merge pull request #9 from krumIO/feat/APPLAUNCHER-23__take2_first_ui…

…_pass feat: First Pass of UI changes
krumIO · Mar 8, 2024 · cde6b5b · cde6b5b
2 parents 95f7423 + e2d4acc
commit cde6b5b
Show file tree

Hide file tree

Showing 6 changed files with 343 additions and 75 deletions.
diff --git a/.gitignore b/.gitignore
@@ -30,7 +30,6 @@ coverage
 
 # IDE - VSCode
 .vscode/*
-!.vscode/settings.json
 !.vscode/tasks.json
 !.vscode/launch.json
 !.vscode/extensions.json

diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,14 +1,5 @@
 {
   "[typescript]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
+    "editor.defaultFormatter": "vscode.typescript-language-features"
   },
-  "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "eslint.enable": true,
-  "eslint.rules.customizations": [
-    {
-      "rule": "*",
-      "severity": "warn"
-    }
-  ],
-  "eslint.useESLintClass": true
 }
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "krum-rancher-extensions-demo",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "private": true,
   "engines": {
     "node": "16.19.1"

diff --git a/pkg/app-launcher/components/AppLauncherCard.vue b/pkg/app-launcher/components/AppLauncherCard.vue
@@ -8,45 +8,15 @@ export default {
     Card,
     ButtonDropDown,
   },
-  computed: {
-    endpoints() {
-      return (
-        this.service?.spec.ports?.map((port) => {
-          const endpoint = `${
-            isMaybeSecure(port.port, port.protocol) ? 'https' : 'http'
-          }:${this.service.metadata.name}:${port.port}`;
-
-          return {
-            label: `${endpoint}${port.protocol === 'UDP' ? ' (UDP)' : ''}`,
-            value: `/k8s/clusters/${this.clusterId}/api/v1/namespaces/${this.service.metadata.namespace}/services/${endpoint}/proxy`,
-          };
-        }) ?? []
-      );
-    },
-    computedServiceName() {
-      return (
-        this.service?.metadata.labels?.['app.kubernetes.io/component'] ??
-        this.service?.metadata.name
-      );
-    },
-    helmChart() {
-      return this.service?.metadata.labels?.['helm.sh/chart'];
-    },
-    kubernetesVersion() {
-      return this.service?.metadata.labels?.['app.kubernetes.io/version'];
-    },
-    name() {
-      return this.service?.metadata.name;
-    },
-    namespace() {
-      return this.service?.metadata.namespace;
-    },
-  },
   props: {
     clusterId: {
       type: String,
       required: true,
     },
+    favoritedServices: {
+      type: Array,
+      required: true,
+    },
     service: {
       type: Object,
       required: true,
@@ -95,6 +65,50 @@ export default {
     openLink(link) {
       window.open(link);
     },
+    toggleFavorite() {
+      this.$emit('toggle-favorite', this.service);
+    },
+  },
+  computed: {
+    endpoints() {
+      return (
+        this.service?.spec.ports?.map((port) => {
+          const endpoint = `${
+            isMaybeSecure(port.port, port.protocol) ? 'https' : 'http'
+          }:${this.service.metadata.name}:${port.port}`;
+
+          return {
+            label: `${endpoint}${port.protocol === 'UDP' ? ' (UDP)' : ''}`,
+            value: `/k8s/clusters/${this.clusterId}/api/v1/namespaces/${this.service.metadata.namespace}/services/${endpoint}/proxy`,
+          };
+        }) ?? []
+      );
+    },
+    computedServiceName() {
+      return (
+        this.service?.metadata.labels?.['app.kubernetes.io/component'] ??
+        this.service?.metadata.name
+      );
+    },
+    helmChart() {
+      return this.service?.metadata.labels?.['helm.sh/chart'];
+    },
+    kubernetesVersion() {
+      return this.service?.metadata.labels?.['app.kubernetes.io/version'];
+    },
+    name() {
+      return this.service?.metadata.name;
+    },
+    namespace() {
+      return this.service?.metadata.namespace;
+    },
+    isFavorited() {
+      return this.favoritedServices.some(
+        (favoritedService) =>
+          favoritedService.clusterId === this.clusterId &&
+          favoritedService.service.id === this.service.id
+      );
+    },
   },
   name: 'AppLauncherCard',
   layout: 'plain',
@@ -129,6 +143,9 @@ export default {
       <p>{{ namespace }}/{{ name }}</p>
     </template>
     <template #actions>
+      <button class="icon-button" @click="toggleFavorite">
+        <i :class="['icon', isFavorited ? 'icon-star' : 'icon-star-open']" />
+      </button>
       <a
         v-if="(endpoints?.length ?? 0) <= 1"
         :disabled="!endpoints?.length"
@@ -156,3 +173,17 @@ export default {
     </template>
   </Card>
 </template>
+
+<style lang="scss" scoped>
+@import "@shell/assets/styles/fonts/_icons.scss";
+
+.icon-button {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  color: var(--primary);
+  font-size: 1.8rem;
+  margin-right: 1rem;
+}
+</style>
diff --git a/pkg/app-launcher/l10n/en-us.yaml b/pkg/app-launcher/l10n/en-us.yaml
@@ -6,3 +6,8 @@ appLauncher:
   launchEndpoint: Launch {endpoint}
   launchAnEndpointFromSelection: Select an endpoint to launch
   noEndpointFoundForApp: No endpoint found for app
+  noServicesFound: No services found
+  loading: Loading...
+  loadingServices: Loading services...
+  selectCluster: Select a cluster
+  globalApps: Global Apps