@rancher/shell 3.0.6 → 3.0.7

package/components/nav/TopLevelMenu.helper.ts

@@ -139,12 +139,6 @@ export abstract class BaseTopLevelMenuHelper {
     this.$store = $store;
 
     this.hasProvCluster = this.$store.getters[`management/schemaFor`](CAPI.RANCHER_CLUSTER);
-
-    // Reduce flicker when component is recreated on a different layout
-    const { clustersPinned = [], clustersOthers = [] } = this.$store.getters['sideNavCache'] || {};
-
-    this.clustersPinned.push(...clustersPinned);
-    this.clustersOthers.push(...clustersOthers);
   }
 
   protected convertToCluster(mgmtCluster: MgmtCluster, provCluster: ProvCluster): TopLevelMenuCluster {
@@ -163,10 +157,6 @@ export abstract class BaseTopLevelMenuHelper {
       clusterRoute:    { name: 'c-cluster-explorer', params: { cluster: mgmtCluster.id } }
     };
   }
-
-  protected cacheClusters() {
-    this.$store.dispatch('setSideNavCache', { clustersPinned: this.clustersPinned, clustersOthers: this.clustersOthers });
-  }
 }
 
 /**
@@ -202,9 +192,9 @@ export class TopLevelMenuHelperPagination extends BaseTopLevelMenuHelper impleme
     this.clustersOthersWrapper = new PaginationWrapper({
       $store,
       id:       'tlm-unpinned-clusters',
-      onChange: () => {
+      onChange: async() => {
         if (this.args) {
-          this.update(this.args);
+          await this.update(this.args);
         }
       },
       enabledFor: {
@@ -220,9 +210,9 @@ export class TopLevelMenuHelperPagination extends BaseTopLevelMenuHelper impleme
     this.provClusterWrapper = new PaginationWrapper({
       $store,
       id:       'tlm-prov-clusters',
-      onChange: () => {
+      onChange: async() => {
         if (this.args) {
-          this.update(this.args);
+          await this.update(this.args);
         }
       },
       enabledFor: {
@@ -276,8 +266,6 @@ export class TopLevelMenuHelperPagination extends BaseTopLevelMenuHelper impleme
 
     this.clustersPinned.push(..._clustersPinned);
     this.clustersOthers.push(..._clustersNotPinned);
-
-    this.cacheClusters();
   }
 
   async destroy() {
@@ -390,7 +378,6 @@ export class TopLevelMenuHelperPagination extends BaseTopLevelMenuHelper impleme
   private async updateProvCluster(notPinned: MgmtCluster[], pinned: MgmtCluster[]): Promise<ProvCluster[]> {
     return this.provClusterWrapper.request({
       pagination: {
-
         filters: [
           PaginationParamFilter.createMultipleFields(
             [...notPinned, ...pinned]
@@ -399,7 +386,6 @@ export class TopLevelMenuHelperPagination extends BaseTopLevelMenuHelper impleme
               }))
           )
         ],
-
         page:                 1,
         sort:                 [],
         projectsOrNamespaces: []
@@ -432,8 +418,6 @@ export class TopLevelMenuHelperLegacy extends BaseTopLevelMenuHelper implements
 
     this.clustersPinned.push(..._clustersPinned);
     this.clustersOthers.push(..._clustersNotPinned);
-
-    this.cacheClusters();
   }
 
   async destroy() {
@@ -581,3 +565,46 @@ export class TopLevelMenuHelperLegacy extends BaseTopLevelMenuHelper implements
     return sorted;
   }
 }
+
+/**
+ * Retain state of the side nav, no matter when the TopLevelMenu component is created/deleted (on layout change)
+ *
+ * This means there's no flickering when the user changes pages and the side nav component re-renders
+ *
+ * Also it means we're not unwatching then watching the clusters
+ */
+class TopLevelMenuHelperService {
+  private _helper?: TopLevelMenuHelper;
+  public init($store: VuexStore) {
+    if (this._helper) {
+      return;
+    }
+
+    const canPagination = $store.getters[`management/paginationEnabled`]({
+      id:      MANAGEMENT.CLUSTER,
+      context: 'side-bar',
+    }) && $store.getters[`management/paginationEnabled`]({
+      id:      CAPI.RANCHER_CLUSTER,
+      context: 'side-bar',
+    });
+
+    this._helper = canPagination ? new TopLevelMenuHelperPagination({ $store }) : new TopLevelMenuHelperLegacy({ $store });
+  }
+
+  public async reset() {
+    await this._helper?.destroy();
+    delete this._helper;
+  }
+
+  get helper(): TopLevelMenuHelper {
+    if (!this._helper) {
+      throw new Error('Unable to use the side nav cluster helper (not initialised)');
+    }
+
+    return this._helper;
+  }
+}
+
+const instance = new TopLevelMenuHelperService();
+
+export default instance;

package/components/nav/TopLevelMenu.vue

@@ -14,7 +14,7 @@ import { SETTING } from '@shell/config/settings';
 import { getProductFromRoute } from '@shell/utils/router';
 import { isRancherPrime } from '@shell/config/version';
 import Pinned from '@shell/components/nav/Pinned';
-import { TopLevelMenuHelperPagination, TopLevelMenuHelperLegacy } from '@shell/components/nav/TopLevelMenu.helper';
+import sideNavService from '@shell/components/nav/TopLevelMenu.helper';
 import { debounce } from 'lodash';
 import { sameContents } from '@shell/utils/array';
 
@@ -27,6 +27,8 @@ export default {
   },
 
   data() {
+    sideNavService.init(this.$store);
+
     const { displayVersion, fullVersion } = getVersionInfo(this.$store);
     const hasProvCluster = this.$store.getters[`management/schemaFor`](CAPI.RANCHER_CLUSTER);
 
@@ -37,7 +39,7 @@ export default {
       id:      CAPI.RANCHER_CLUSTER,
       context: 'side-bar',
     });
-    const helper = canPagination ? new TopLevelMenuHelperPagination({ $store: this.$store }) : new TopLevelMenuHelperLegacy({ $store: this.$store });
+    const helper = sideNavService.helper;
     const provClusters = !canPagination && hasProvCluster ? this.$store.getters[`management/all`](CAPI.RANCHER_CLUSTER) : [];
     const mgmtClusters = !canPagination ? this.$store.getters[`management/all`](MANAGEMENT.CLUSTER) : [];
 
@@ -327,7 +329,6 @@ export default {
 
   beforeUnmount() {
     document.removeEventListener('keyup', this.handler);
-    this.helper?.destroy();
   },
 
   methods: {
@@ -1073,6 +1074,14 @@ export default {
       width: 300px;
       overflow: auto;
 
+      & .category {
+        & a.router-link-active {
+          &:hover {
+            color: var(--on-active, var(--default));
+          }
+        }
+      }
+
       .option {
         align-items: center;
         cursor: pointer;
@@ -1119,6 +1128,15 @@ export default {
           }
         }
 
+        &:not(.active-menu-link) {
+          &:hover {
+            .pin {
+              display: block;
+              color: var(--body-text-hover);
+            }
+          }
+        }
+
         &:hover {
           text-decoration: none;
 
@@ -1178,19 +1196,31 @@ export default {
             outline-offset: -4px;
           }
 
-          background: var(--primary-hover-bg);
-          color: var(--primary-hover-text);
+          background: var(--active-nav, var(--primary-hover-bg));
+          color: var(--on-active, var(--primary-hover-text));
 
           svg {
-            fill: var(--primary-hover-text);
+            fill: var(--on-active, var(--primary-hover-text));
           }
 
           i {
-            color: var(--primary-hover-text);
+            color: var(--on-active, var(--primary-hover-text));
           }
 
           div .description {
-            color: var(--default);
+            color: var(--on-active, var(--default));
+          }
+
+          &:hover {
+            background: var(--active-hover, var(--primary-hover-bg));
+
+            div {
+              color: var(--on-active, var(--default));
+            }
+
+            svg {
+              fill: var(--on-active, var(--primary-hover-text));
+            }
           }
         }
 
@@ -1201,8 +1231,8 @@ export default {
         }
 
         &:hover {
-          color: var(--primary-hover-text);
-          background: var(--primary-hover-bg);
+          color: var(--tertiary-hover-app-bar, var(--primary-hover-text));
+          background: var(--nav-hover-top-level, var(--primary-hover-bg));
           > div {
             color: var(--primary-hover-text);
 
@@ -1211,10 +1241,10 @@ export default {
             }
           }
           svg {
-            fill: var(--primary-hover-text);
+            fill: var(--tertiary-hover-app-bar, var(--primary-hover-text));
           }
           div {
-            color: var(--primary-hover-text);
+            color: var(--tertiary-hover-app-bar, var(--primary-hover-text));
           }
           &.disabled {
             background: transparent;
@@ -1549,8 +1579,8 @@ export default {
     overflow: hidden;
     & IMG {
       object-fit: contain;
-      height: 21px;
       max-width: 200px;
+      height: 36px;
     }
   }
 
@@ -1592,7 +1622,7 @@ export default {
       padding: 8px 20px;
 
       &:hover {
-        background-color: var(--primary-hover-bg);
+        background-color: var(--active-hover, var(--primary-hover-bg));
         color: var(--primary-hover-text);
         text-decoration: none;
       }

package/components/nav/Type.vue

@@ -249,12 +249,7 @@ export default {
       height: 33px;
 
       &:hover {
-        background: var(--nav-hover);
         text-decoration: none;
-
-        :deep() .icon {
-          color: var(--body-text);
-        }
       }
     }
 

package/components/nav/__tests__/TopLevelMenu.test.ts

@@ -3,6 +3,7 @@ import { mount, Wrapper } from '@vue/test-utils';
 import { CAPI, COUNT, MANAGEMENT } from '@shell/config/types';
 import { PINNED_CLUSTERS } from '@shell/store/prefs';
 import { nextTick } from 'vue';
+import sideNavService from '@shell/components/nav/TopLevelMenu.helper';
 
 /**
  * `clusters` doubles up as both mgmt and prov clusters (don't shoot the messenger)
@@ -53,6 +54,7 @@ const waitForIt = async() => {
 describe('topLevelMenu', () => {
   beforeEach(() => {
     jest.useFakeTimers();
+    sideNavService.reset();
   });
 
   afterEach(() => {

package/config/pagination-table-headers.js

@@ -3,7 +3,8 @@ import {
   STATE, NAME as NAME_COL, NAMESPACE as NAMESPACE_COL, AGE, OBJECT,
   EVENT_LAST_SEEN_TIME,
   EVENT_TYPE,
-  SECRET_CLONE
+  SECRET_CLONE,
+  EVENT_FIRST_SEEN_TIME
 } from '@shell/config/table-headers';
 
 // This file contains table headers
@@ -56,10 +57,17 @@ export const STEVE_EVENT_OBJECT = {
   search: 'involvedObject.kind',
 };
 
+export const STEVE_EVENT_FIRST_SEEN = {
+  ...EVENT_FIRST_SEEN_TIME,
+
+  value: 'metadata.fields.7',
+  sort:  'metadata.fields.7:desc',
+};
+
 export const STEVE_EVENT_LAST_SEEN = {
   ...EVENT_LAST_SEEN_TIME,
   value: 'metadata.fields.0',
-  sort:  'metadata.fields.0',
+  sort:  'metadata.fields.0:desc',
 };
 
 export const STEVE_EVENT_TYPE = {

package/config/product/explorer.js

@@ -22,11 +22,12 @@ import {
   ACCESS_KEY, DESCRIPTION, EXPIRES, EXPIRY_STATE, LAST_USED, SUB_TYPE, AGE_NORMAN, SCOPE_NORMAN, PERSISTENT_VOLUME_CLAIM, RECLAIM_POLICY, PV_REASON, WORKLOAD_HEALTH_SCALE, POD_RESTARTS,
   DURATION, MESSAGE, REASON, EVENT_TYPE, OBJECT, ROLE, ROLES, VERSION, INTERNAL_EXTERNAL_IP, KUBE_NODE_OS, CPU, RAM, SECRET_DATA,
   EVENT_LAST_SEEN_TIME,
+  EVENT_FIRST_SEEN_TIME,
 } from '@shell/config/table-headers';
 
 import { DSL } from '@shell/store/type-map';
 import {
-  STEVE_AGE_COL, STEVE_EVENT_LAST_SEEN, STEVE_EVENT_OBJECT, STEVE_EVENT_TYPE, STEVE_LIST_GROUPS, STEVE_NAMESPACE_COL, STEVE_NAME_COL, STEVE_STATE_COL
+  STEVE_AGE_COL, STEVE_EVENT_FIRST_SEEN, STEVE_EVENT_LAST_SEEN, STEVE_EVENT_OBJECT, STEVE_EVENT_TYPE, STEVE_LIST_GROUPS, STEVE_NAMESPACE_COL, STEVE_NAME_COL, STEVE_STATE_COL
 } from '@shell/config/pagination-table-headers';
 
 import { COLUMN_BREAKPOINTS } from '@shell/types/store/type-map';
@@ -337,7 +338,7 @@ export function init(store) {
   );
 
   headers(EVENT,
-    [STATE, EVENT_LAST_SEEN_TIME, EVENT_TYPE, REASON, OBJECT, 'Subobject', 'Source', MESSAGE, 'First Seen', 'Count', NAME_COL, NAMESPACE_COL],
+    [STATE, EVENT_LAST_SEEN_TIME, EVENT_TYPE, REASON, OBJECT, 'Subobject', 'Source', MESSAGE, EVENT_FIRST_SEEN_TIME, 'Count', NAME_COL, NAMESPACE_COL],
     [
       STEVE_STATE_COL,
       STEVE_EVENT_LAST_SEEN,
@@ -347,7 +348,7 @@ export function init(store) {
       'Subobject',
       'Source',
       MESSAGE,
-      'First Seen',
+      STEVE_EVENT_FIRST_SEEN,
       'Count',
       STEVE_NAME_COL,
       STEVE_NAMESPACE_COL,

package/config/table-headers.js

@@ -541,6 +541,15 @@ export const LAST_SEEN_TIME = {
   tooltip:  'tableHeaders.lastSeenTooltip'
 };
 
+export const EVENT_FIRST_SEEN_TIME = {
+  name:     'firstSeen',
+  labelKey: 'tableHeaders.firstSeen',
+  tooltip:  'tableHeaders.firstSeenTooltip',
+
+  value: 'firstSeen',
+  sort:  'firstSeen:desc',
+};
+
 export const EVENT_LAST_SEEN_TIME = {
   ...LAST_SEEN_TIME,
   defaultSort: true,

package/core/plugin.ts

@@ -17,24 +17,31 @@ import {
   PluginRouteRecordRaw, RegisterStore, UnregisterStore, CoreStoreSpecifics, CoreStoreConfig,
   NavHooks, OnNavToPackage, OnNavAwayFromPackage, OnLogIn, OnLogOut,
   PaginationTableColumn,
-  ExtensionEnvironment
+  ExtensionEnvironment,
+  ServerSidePaginationExtensionConfig
 } from './types';
 import coreStore, { coreStoreModule, coreStoreState } from '@shell/plugins/dashboard-store';
 import { defineAsyncComponent, markRaw, Component } from 'vue';
 import { getVersionData, CURRENT_RANCHER_VERSION } from '@shell/config/version';
+import { ExtensionManagerTypes } from '@shell/types/extension-manager';
 
-// Registration IDs used for different extension points in the extensions catalog
+/** Registration IDs used for different extension points in the extensions catalog */
 export const EXT_IDS = {
-  MODELS:          'models',
-  MODEL_EXTENSION: 'model-extension',
-};
+  MODELS:                           'models',
+  MODEL_EXTENSION:                  'model-extension',
+  /**
+   * Extension can provide resources that use server-side-pagination
+   */
+  SERVER_SIDE_PAGINATION_RESOURCES: 'server-side-pagination',
+} as const;
+export type EXT_IDS_VALUES = (typeof EXT_IDS)[keyof typeof EXT_IDS];
 
 export type ProductFunction = (plugin: IPlugin, store: any) => void;
 
 export class Plugin implements IPlugin {
   public id: string;
   public name: string;
-  public types: any = {};
+  public types: ExtensionManagerTypes = {};
   public l10n: { [key: string]: Function[] } = {};
   public modelExtensions: { [key: string]: Function[] } = {};
   public locales: { locale: string, label: string}[] = [];
@@ -360,6 +367,11 @@ export class Plugin implements IPlugin {
     }
   }
 
+  public enableServerSidePagination(config: ServerSidePaginationExtensionConfig) {
+    console.info(`Extension "${ this.name || this.id }" is enabling server-side pagination for some resources`, config); // eslint-disable-line no-console
+    this.register(EXT_IDS.SERVER_SIDE_PAGINATION_RESOURCES, this.id, () => config);
+  }
+
   public async onLogOut(store: any) {
     await Promise.all(this.stores.map((s: any) => store.dispatch(`${ s.storeName }/onLogout`)));
 

package/core/types.ts

@@ -1,6 +1,7 @@
 import { ProductFunction } from './plugin';
 import { RouteRecordRaw } from 'vue-router';
 import type { ExtensionManager } from '@shell/types/extension-manager';
+import { PaginationSettingsStores } from '@shell/types/resources/settings';
 
 // Cluster Provisioning types
 export * from './types-provisioning';
@@ -351,6 +352,11 @@ export type TableColumn = HeaderOptions;
  */
 export type PaginationTableColumn = PaginationHeaderOptions;
 
+/**
+ * External extension configuration for @PaginationSettingsStores
+ */
+export type ServerSidePaginationExtensionConfig = PaginationSettingsStores;
+
 export interface ConfigureTypeOptions {
   /**
    * Override for the create button string on a list view
@@ -693,6 +699,8 @@ export interface IPlugin {
   ): void;
   addNavHooks(hooks: NavHooks): void;
 
+  enableServerSidePagination(config: ServerSidePaginationExtensionConfig): void;
+
   /**
    * Adds a model extension
    * @experimental May change or be removed in the future

package/detail/provisioning.cattle.io.cluster.vue

@@ -89,6 +89,7 @@ export default {
   },
 
   async fetch() {
+    await this.$store.dispatch(`management/find`, { type: MANAGEMENT.CLUSTER, id: this.value.mgmtClusterId });
     await this.value.waitForProvisioner();
 
     // Support for the 'provisioner' extension

package/dialog/InstallExtensionDialog.vue

@@ -3,12 +3,12 @@ import AsyncButton from '@shell/components/AsyncButton';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import { CATALOG, MANAGEMENT } from '@shell/config/types';
 import { CATALOG as CATALOG_ANNOTATIONS } from '@shell/config/labels-annotations';
-import { UI_PLUGIN_NAMESPACE } from '@shell/config/uiplugins';
+import { UI_PLUGIN_NAMESPACE, isChartVersionHigher } from '@shell/config/uiplugins';
 import Banner from '@components/Banner/Banner.vue';
 import { SETTING } from '@shell/config/settings';
-import { getPluginChartVersion, getPluginChartVersionLabel } from '@shell/utils/uiplugins';
+import { getPluginChartVersionLabel } from '@shell/utils/uiplugins';
 
-// Note: This dialog handles installation and update of a plugin
+// Note: This dialog handles installation, upgrade and downgrade of a plugin
 
 export default {
   emits: ['close'],
@@ -29,7 +29,14 @@ export default {
       required: true
     },
     /**
-     * The action to perform (install, update, rollback)
+     * The pre-selected version in the dropdown
+     */
+    initialVersion: {
+      type:    String,
+      default: null
+    },
+    /**
+     * The action to perform (install, upgrade, downgrade)
      */
     action: {
       type:     String,
@@ -63,33 +70,32 @@ export default {
   },
 
   async fetch() {
-    const chartVersion = getPluginChartVersion(this.plugin);
-
-    // Default to latest version on install (this is default on the plugin)
-    this.version = chartVersion;
-
-    if (this.action === 'update') {
-      this.currentVersion = chartVersion;
-
-      // Update to latest version, so take the first version
-      if (this.plugin?.installableVersions?.length > 0) {
-        this.version = this.plugin?.installableVersions?.[0]?.version;
-      }
-    } else if (this.action === 'rollback') {
-      // Find the newest version once we remove the current version
-      const versionNames = this.plugin.installableVersions.filter((v) => v.version !== chartVersion);
+    // Determine the currently installed version, if any
+    if (this.plugin.installed) {
+      this.currentVersion = this.plugin.installedVersion;
+    }
 
-      this.currentVersion = chartVersion;
+    // Determine the initial version to select in the dropdown
+    if (this.initialVersion) {
+      this.version = this.initialVersion;
+    } else if (this.action === 'upgrade') {
+      // Upgrade to the latest version, so take the first version
+      this.version = this.plugin?.installableVersions?.[0]?.version;
+    } else if (this.action === 'downgrade') {
+      const versions = this.plugin.installableVersions;
+      const currentIndex = versions.findIndex((v) => v.version === this.currentVersion);
 
-      if (versionNames.length > 0) {
-        this.version = versionNames[0].version;
+      if (currentIndex !== -1 && currentIndex < versions.length - 1) {
+        // Select the version just below the current version
+        this.version = versions[currentIndex + 1].version;
       }
+    } else {
+      // Default to the latest installable version for new installs
+      this.version = this.plugin?.installableVersions?.[0]?.version;
     }
 
-    // Make sure we have the version available
-    const versionChart = this.plugin?.installableVersions?.find((v) => v.version === this.version);
-
-    if (!versionChart) {
+    // Fallback if no version could be determined
+    if (!this.version) {
       this.version = this.plugin?.installableVersions?.[0]?.version;
     }
 
@@ -119,37 +125,39 @@ export default {
     },
 
     versionOptions() {
-      if (!this.plugin) {
+      if (!this.plugin?.installableVersions) {
         return [];
       }
 
-      // Don't allow update/rollback to current version
-      const versions = this.plugin?.installableVersions?.filter((v) => {
-        if (this.currentVersion) {
-          return v.version !== this.currentVersion;
-        }
-
-        return true;
-      });
+      // Don't allow upgrade/downgrade to current version by disabling the option
+      return this.plugin.installableVersions.map((v) => {
+        const isCurrent = v.version === this.currentVersion;
 
-      return versions.map((version) => {
         return {
-          label: getPluginChartVersionLabel(version),
-          value: version.version,
+          label:    getPluginChartVersionLabel(v) + (isCurrent ? ` (${ this.t('plugins.labels.current') })` : ''),
+          value:    v.version,
+          disabled: isCurrent,
         };
       });
     },
 
     buttonMode() {
-      if (this.action === 'rollback') {
-        return 'rollback';
+      if (this.action === 'install') {
+        return 'install';
       }
 
-      if (this.action === 'update') {
-        return 'update';
+      if (this.currentVersion && this.version) {
+        if (isChartVersionHigher(this.version, this.currentVersion)) {
+          return 'upgrade';
+        }
+
+        if (isChartVersionHigher(this.currentVersion, this.version)) {
+          return 'downgrade';
+        }
       }
 
-      return 'install';
+      // Fallback for safety, though should not be reached if version is selected
+      return this.action;
     },
 
     chartVersionLoadsWithoutAuth() {
@@ -158,6 +166,23 @@ export default {
 
     returnFocusSelector() {
       return `[data-testid="extension-card-${ this.action }-btn-${ this.plugin?.name }"]`;
+    },
+
+    buttonIcon() {
+      if (this.busy) {
+        return '';
+      }
+
+      switch (this.buttonMode) {
+      case 'install':
+        return 'icon-plus';
+      case 'upgrade':
+        return 'icon-upgrade-alt';
+      case 'downgrade':
+        return 'icon-downgrade-alt';
+      default:
+        return '';
+      }
     }
   },
 
@@ -295,12 +320,12 @@ export default {
 <template>
   <div class="plugin-install-dialog">
     <h4 class="mt-10">
-      {{ t(`plugins.${ action }.title`, { name: plugin?.label }) }}
+      {{ t(`plugins.${ buttonMode }.title`, { name: `"${plugin?.label}"` }, true) }}
     </h4>
     <div class="custom mt-10">
       <div class="dialog-panel">
         <p>
-          {{ t(`plugins.${ action }.prompt`) }}
+          {{ t(`plugins.${ buttonMode }.prompt`) }}
         </p>
         <Banner
           v-if="chartVersionLoadsWithoutAuth"
@@ -335,6 +360,7 @@ export default {
         </button>
         <AsyncButton
           :mode="buttonMode"
+          :icon="buttonIcon"
           data-testid="install-ext-modal-install-btn"
           @click="install"
         />

package/dialog/UninstallExtensionDialog.vue

@@ -103,7 +103,7 @@ export default {
 <template>
   <div class="plugin-install-dialog">
     <h4 class="mt-10">
-      {{ t('plugins.uninstall.title', { name: plugin?.label }) }}
+      {{ t('plugins.uninstall.title', { name: `"${plugin?.label}"` }, true) }}
     </h4>
     <div class="mt-10 dialog-panel">
       <div class="dialog-info">
@@ -122,6 +122,7 @@ export default {
         </button>
         <AsyncButton
           mode="uninstall"
+          :icon="busy ? '' : 'icon-delete'"
           data-testid="uninstall-ext-modal-uninstall-btn"
           @click="uninstall()"
         />