App bar pin cluster (rancher#9674)

* feat: app-bar init implementation * fix: users e2e test * chore: removes extra code * fix: adds the correct width for the app-bar * fix: addressing feedback * fix: cleans up max-items preference, layout improvements * chore: removes extra file * feedback * fixes issue with extra padding in standalone * fix: loading overlay * fix: spaces * fix: missing content * Added pin clusetr list * Removed commented code * Fixed sorted list order * fix: fedback * removes the 2px top * fix: brings back the local cluster icon * fix: adds cluster filter badge & cluster count * Fix pin cluster test * Rename pinned-clusters in pref * Added pin methoded in cluster model * Added test for unpinning cluster * Fixed test * Fixed lint * Clean up css * Resolved feedback * Fixed lint * Removed local cluster badge test * Removed model --------- Co-authored-by: scures <[email protected]>
momesgin · Sep 13, 2023 · 2ffe8d3 · 2ffe8d3
1 parent 9b1c610
commit 2ffe8d3
Show file tree

Hide file tree

Showing 9 changed files with 324 additions and 101 deletions.
diff --git a/cypress/e2e/po/side-bars/burger-side-menu.po.ts b/cypress/e2e/po/side-bars/burger-side-menu.po.ts
@@ -90,7 +90,21 @@ export default class BurgerMenuPo extends ComponentPo {
    * @returns {Cypress.Chainable}
    */
   clusters(): Cypress.Chainable {
-    return this.self().find('.body .clusters .cluster.selector.option');
+    return this.self().find('.body .clustersList .cluster.selector.option');
+  }
+
+  pinFirstCluster(): Cypress.Chainable {
+    return this.clusters().first().trigger('mouseover').find('.pin')
+      .invoke('show')
+      .click();
+  }
+
+  clusterPinnedList(): Cypress.Chainable {
+    return this.self().find('.body .clustersPinned .cluster.selector.option');
+  }
+
+  unpinFirstCluster(): Cypress.Chainable {
+    return this.clusterPinnedList().first().find('.pin').click();
   }
 
   /**

diff --git a/cypress/e2e/tests/navigation/side-nav/main-side-menu.spec.ts b/cypress/e2e/tests/navigation/side-nav/main-side-menu.spec.ts
@@ -1,13 +1,9 @@
-import ModalWithCardPo from '@/cypress/e2e/po/components/modal-with-card.po';
 import HomePagePo from '@/cypress/e2e/po/pages/home.po';
 import BurgerMenuPo from '@/cypress/e2e/po/side-bars/burger-side-menu.po';
 
 Cypress.config();
 describe('Side Menu: main', () => {
-  let modal;
-
   beforeEach(() => {
-    modal = new ModalWithCardPo();
     cy.login();
     HomePagePo.goTo();
     BurgerMenuPo.toggle();
@@ -24,6 +20,15 @@ describe('Side Menu: main', () => {
     burgerMenuPo.clusters().should('exist');
   });
 
+  it('Pinned and unpinned cluster', { tags: ['@adminUser', '@standardUser'] }, () => {
+    const burgerMenuPo = new BurgerMenuPo();
+
+    burgerMenuPo.pinFirstCluster();
+    burgerMenuPo.clusterPinnedList().should('exist');
+    burgerMenuPo.unpinFirstCluster();
+    burgerMenuPo.clusterPinnedList().should('not.exist');
+  });
+
   it('Can display at least one menu category label', { tags: ['@adminUser', '@standardUser'] }, () => {
     const burgerMenuPo = new BurgerMenuPo();
 
@@ -39,22 +44,6 @@ describe('Side Menu: main', () => {
     BurgerMenuPo.checkTooltipOn();
   });
 
-  it('Check that the local cluster badge matches LCL, custom badge should match EX', { tags: ['@adminUser'] }, () => {
-    const burgerMenuPo = new BurgerMenuPo();
-
-    burgerMenuPo.clusters().should('contain', 'lcl');
-    burgerMenuPo.clusters().first().click();
-    cy.getId('add-custom-cluster-badge').click();
-    modal.getCardBody().get('.checkbox-label').first().click();
-    modal.getCardBody().get('.checkbox-label').last().click();
-    modal.getCardActions().get('.role-primary').click();
-    burgerMenuPo.clusters().should('contain', 'EX');
-    cy.getId('add-custom-cluster-badge').click();
-    modal.getCardBody().get('.checkbox-label').first().click();
-    modal.getCardActions().get('.role-primary').click();
-    burgerMenuPo.clusters().should('contain', 'lcl');
-  });
-
   // TODO: #5966: Verify cause of race condition issue making navigation link not trigger
   it.skip('Contains valid links', { tags: ['@adminUser', '@standardUser'] }, () => {
     const burgerMenuPo = new BurgerMenuPo();

diff --git a/shell/components/ClusterProviderIconMenu.vue → shell/components/ClusterIconMenu.vue b/shell/components/ClusterProviderIconMenu.vue → shell/components/ClusterIconMenu.vue
@@ -24,6 +24,10 @@ export default {
         return this.cluster.badge?.iconText;
       }
 
+      if (this.cluster.isLocal && !this.cluster.badge?.iconText) {
+        return undefined;
+      }
+
       if (!input) {
         return '';
       }
@@ -74,50 +78,49 @@ export default {
       >
         {{ smallIdentifier(cluster.label) }}
       </span>
-      <!-- {{ cluster.badge.iconText }} -->
-    </div>
-    <!-- eslint-enable -->
-    <svg
-      v-if="cluster.isLocal && !cluster.isHarvester"
-      id="local-cluster-icon-menu"
-      class="cluster-os-logo"
-      version="1.1"
-      xmlns="http://www.w3.org/2000/svg"
-      xmlns:xlink="http://www.w3.org/1999/xlink"
-      viewBox="0 0 100 100"
-      style="enable-background:new 0 0 100 100;"
-    >
-      <g>
+      <svg
+        v-if="cluster.isLocal && !cluster.isHarvester && !cluster.badge?.iconText"
+        class="cluster-local-logo"
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        x="0px"
+        y="0px"
+        viewBox="0 0 100 100"
+        style="enable-background:new 0 0 100 100;"
+        xml:space="preserve"
+      >
         <g>
-          <path
-            class="rancher-icon-fill"
-            d="M26.0862026,44.4953918H8.6165142c-5.5818157,0-9.3979139-4.6252708-8.4802637-10.1311035l2.858391-17.210701
+          <g>
+            <path
+              class="rancher-icon-fill"
+              d="M26.0862026,44.4953918H8.6165142c-5.5818157,0-9.3979139-4.6252708-8.4802637-10.1311035l2.858391-17.210701
             C3.912292,11.6477556,6.1382647,7.1128125,7.8419709,7.1128125s3.1788611,4.5368752,3.1788611,10.1186218v4.4837742
             c0,5.5817471,4.4044495,9.5409164,9.9862652,9.5409164h5.0791054V44.4953918z"
-          />
-        </g>
-        <path
-          class="rancher-icon-fill"
-          d="M63.0214729,92.8871841H37.0862045c-6.0751343,0-11.0000019-4.9248657-11.0000019-11V30.3864384
-          c0-6.0751324,4.9248676-11,11.0000019-11h25.9352684c6.0751305,0,11.0000038,4.9248676,11.0000038,11v51.5007477
-          C74.0214767,87.9623184,69.0966034,92.8871841,63.0214729,92.8871841z"
-        />
-        <g>
+            />
+          </g>
           <path
             class="rancher-icon-fill"
-            d="M73.9137955,44.4953918h17.4696884c5.5818176,0,9.3979187-4.6252708,8.4802628-10.1311035
+            d="M63.0214729,92.8871841H37.0862045c-6.0751343,0-11.0000019-4.9248657-11.0000019-11V30.3864384
+          c0-6.0751324,4.9248676-11,11.0000019-11h25.9352684c6.0751305,0,11.0000038,4.9248676,11.0000038,11v51.5007477
+          C74.0214767,87.9623184,69.0966034,92.8871841,63.0214729,92.8871841z"
+          />
+          <g>
+            <path
+              class="rancher-icon-fill"
+              d="M73.9137955,44.4953918h17.4696884c5.5818176,0,9.3979187-4.6252708,8.4802628-10.1311035
             l-2.8583908-17.210701c-0.9176483-5.5058317-3.1436234-10.0407753-4.8473282-10.0407753
             s-3.1788635,4.5368752-3.1788635,10.1186218v4.4837742c0,5.5817471-4.4044418,9.5409164-9.9862595,9.5409164h-5.0791092
             V44.4953918z"
-          />
+            />
+          </g>
         </g>
-      </g>
-    </svg>
-    <img
-      v-else
-      class="cluster-os-logo"
-      :src="cluster.providerNavLogo"
-    >
+      </svg>
+    </div>
+    <i
+      v-if="cluster.pinned"
+      class="icon icon-pin cluster-pin-icon"
+    />
   </div>
 </template>
 
@@ -131,11 +134,17 @@ export default {
     justify-content: center;
     width: 42px;
   }
-  .cluster-os-logo {
+  .cluster-pin-icon {
     position: absolute;
     top: -6px;
     right: -4px;
-    width: 14px;
+    font-size: 12px;
+    transform: scaleX(-1);
+    color: var(--body-text);
+  }
+
+  .cluster-local-logo {
+    width: 20px;
   }
 
   .cluster-badge-logo {
@@ -149,7 +158,6 @@ export default {
     background: var(--nav-icon-badge-bg);
     border: 1px solid var(--default-border);
     border-radius: 5px;
-    padding-top: 2px;
     font-size: 12px;
     text-transform: uppercase;
 

diff --git a/shell/components/nav/Group.vue b/shell/components/nav/Group.vue
@@ -427,5 +427,4 @@ export default {
       }
     }
   }
-
 </style>
diff --git a/shell/components/nav/Pinned.vue b/shell/components/nav/Pinned.vue
@@ -0,0 +1,47 @@
+<script>
+// Allow the user to pin a cluster by clicking it.
+export default {
+  props: {
+    cluster: {
+      type:     Object,
+      required: true,
+    }
+  },
+
+  computed: {
+    pinned() {
+      return this.cluster.pinned;
+    }
+  },
+
+  methods: {
+    toggle() {
+      if ( this.pinned ) {
+        this.cluster.unpin();
+      } else {
+        this.cluster.pin();
+      }
+    }
+  }
+};
+</script>
+
+<template>
+  <i
+    :tabindex="0"
+    :aria-checked="!!pinned"
+    class="pin icon"
+    :class="{'icon-pin-outlined': !pinned, 'icon-pin': pinned}"
+    aria-role="button"
+    @click.stop.prevent="toggle"
+    @keydown.enter.prevent="toggle"
+    @keydown.space.prevent="toggle"
+  />
+</template>
+
+<style lang="scss" scoped>
+  .icon {
+    font-size: 14px;
+    transform: scaleX(-1);
+  }
+</style>