@rancher/shell 3.0.5-rc.8 → 3.0.5

package/detail/fleet.cattle.io.gitrepo.vue

@@ -1,15 +1,22 @@
 <script>
 import { mapState } from 'vuex';
-import Loading from '@shell/components/Loading';
 import ResourceTabs from '@shell/components/form/ResourceTabs';
 import FleetSummary from '@shell/components/fleet/FleetSummary';
 import { Banner } from '@components/Banner';
 import FleetResources from '@shell/components/fleet/FleetResources';
 import Tab from '@shell/components/Tabbed/Tab';
-import { FLEET, MANAGEMENT } from '@shell/config/types';
+import { FLEET } from '@shell/config/types';
 import { isHarvesterCluster } from '@shell/utils/cluster';
 import FleetBundles from '@shell/components/fleet/FleetBundles.vue';
 import { checkSchemasForFindAllHash } from '@shell/utils/auth';
+import DetailPage from '@shell/components/Resource/Detail/Page.vue';
+import Masthead from '@shell/components/Resource/Detail/Masthead/index.vue';
+import { useDefaultMastheadProps } from '@shell/components/Resource/Detail/Masthead/composable';
+import ViewOptions from '@shell/components/Resource/Detail/ViewOptions/index.vue';
+import { useCurrentView } from '@shell/components/Resource/Detail/ViewOptions/composable';
+import { _GRAPH } from '@shell/config/query-params';
+import ForceDirectedTreeChart from '@shell/components/ForceDirectedTreeChart';
+import { useDefaultForceDirectTreeChartProps } from '@shell/components/ForceDirectedTreeChart/composable';
 
 export default {
   name: 'DetailGitRepo',
@@ -17,13 +24,16 @@ export default {
   emits: ['input'],
 
   components: {
-    Loading,
     FleetResources,
     FleetSummary,
     Banner,
     ResourceTabs,
     Tab,
     FleetBundles,
+    DetailPage,
+    Masthead,
+    ViewOptions,
+    ForceDirectedTreeChart
   },
 
   props: {
@@ -33,6 +43,16 @@ export default {
     },
   },
 
+  setup(props) {
+    const defaultMastheadProps = useDefaultMastheadProps(props.value);
+    const currentView = useCurrentView();
+    const forceDirectedTreeChartProps = useDefaultForceDirectTreeChartProps(props.value);
+
+    return {
+      defaultMastheadProps, currentView, forceDirectedTreeChartProps, _GRAPH
+    };
+  },
+
   data() {
     return {
       allFleetClusters: [],
@@ -100,10 +120,6 @@ export default {
       }
     }, this.$store);
 
-    if (this.value.authorId && this.$store.getters['management/schemaFor'](MANAGEMENT.USER)) {
-      await this.$store.dispatch(`management/findAll`, { type: MANAGEMENT.USER }, { root: true });
-    }
-
     this.allBundles = allDispatches.allBundles || [];
     this.allFleetClusters = allDispatches.allFleetClusters || [];
   },
@@ -112,46 +128,57 @@ export default {
 </script>
 
 <template>
-  <Loading v-if="$fetchState.pending" />
-  <div
-    v-else
-    class="mt-20"
-  >
-    <FleetSummary
-      v-if="gitRepoHasClusters"
-      :value="value"
-      :bundles="bundles"
-      class="mb-20"
-    />
-    <Banner
-      v-else
-      color="info"
-      class="mb-20"
-    >
-      {{ t('fleet.fleetSummary.noClusters.gitRepo') }}
-    </Banner>
-    <ResourceTabs
-      :value="value"
-      mode="view"
-      class="mt-20"
-      :need-related="false"
-      @update:value="$emit('input', $event)"
-    >
-      <Tab
-        v-if="!!allBundles.length"
-        label="Bundles"
-        name="bundles"
-        :weight="30"
-      >
-        <FleetBundles :value="value" />
-      </Tab>
-      <Tab
-        label="Resources"
-        name="resources"
-        :weight="20"
-      >
-        <FleetResources :rows="value.resourcesStatuses" />
-      </Tab>
-    </ResourceTabs>
-  </div>
+  <DetailPage :loading="$fetchState.pending">
+    <template #top-area>
+      <Masthead v-bind="defaultMastheadProps">
+        <template #additional-actions>
+          <ViewOptions />
+        </template>
+      </Masthead>
+    </template>
+    <template #bottom-area>
+      <template v-if="currentView === _GRAPH">
+        <ForceDirectedTreeChart v-bind="forceDirectedTreeChartProps" />
+      </template>
+
+      <template v-else>
+        <FleetSummary
+          v-if="gitRepoHasClusters"
+          :value="value"
+          :bundles="bundles"
+          class="mb-20"
+        />
+        <Banner
+          v-else
+          color="info"
+          class="mb-20"
+        >
+          {{ t('fleet.fleetSummary.noClusters.gitRepo') }}
+        </Banner>
+        <ResourceTabs
+          :value="value"
+          mode="view"
+          class="mt-20"
+          :need-related="false"
+          @update:value="$emit('input', $event)"
+        >
+          <Tab
+            v-if="!!allBundles.length"
+            label="Bundles"
+            name="bundles"
+            :weight="30"
+          >
+            <FleetBundles :value="value" />
+          </Tab>
+          <Tab
+            label="Resources"
+            name="resources"
+            :weight="20"
+          >
+            <FleetResources :rows="value.resourcesStatuses" />
+          </Tab>
+        </ResourceTabs>
+      </template>
+    </template>
+  </DetailPage>
 </template>

package/detail/fleet.cattle.io.helmop.vue

@@ -1,15 +1,22 @@
 <script>
 import { mapState } from 'vuex';
-import Loading from '@shell/components/Loading';
 import ResourceTabs from '@shell/components/form/ResourceTabs';
 import FleetSummary from '@shell/components/fleet/FleetSummary';
 import { Banner } from '@components/Banner';
 import FleetResources from '@shell/components/fleet/FleetResources';
 import Tab from '@shell/components/Tabbed/Tab';
-import { FLEET, MANAGEMENT } from '@shell/config/types';
+import { FLEET } from '@shell/config/types';
 import { isHarvesterCluster } from '@shell/utils/cluster';
 import FleetBundles from '@shell/components/fleet/FleetBundles.vue';
 import { checkSchemasForFindAllHash } from '@shell/utils/auth';
+import DetailPage from '@shell/components/Resource/Detail/Page.vue';
+import Masthead from '@shell/components/Resource/Detail/Masthead/index.vue';
+import { useDefaultMastheadProps } from '@shell/components/Resource/Detail/Masthead/composable';
+import ViewOptions from '@shell/components/Resource/Detail/ViewOptions/index.vue';
+import { useCurrentView } from '@shell/components/Resource/Detail/ViewOptions/composable';
+import { _GRAPH } from '@shell/config/query-params';
+import ForceDirectedTreeChart from '@shell/components/ForceDirectedTreeChart';
+import { useDefaultForceDirectTreeChartProps } from '@shell/components/ForceDirectedTreeChart/composable';
 
 export default {
   name: 'DetailsHelmOp',
@@ -17,13 +24,16 @@ export default {
   emits: ['input'],
 
   components: {
-    Loading,
     FleetResources,
     FleetSummary,
     Banner,
     ResourceTabs,
     Tab,
     FleetBundles,
+    DetailPage,
+    Masthead,
+    ViewOptions,
+    ForceDirectedTreeChart
   },
 
   props: {
@@ -33,6 +43,16 @@ export default {
     },
   },
 
+  setup(props) {
+    const defaultMastheadProps = useDefaultMastheadProps(props.value);
+    const currentView = useCurrentView();
+    const forceDirectedTreeChartProps = useDefaultForceDirectTreeChartProps(props.value);
+
+    return {
+      defaultMastheadProps, currentView, forceDirectedTreeChartProps, _GRAPH
+    };
+  },
+
   data() {
     return {
       allFleetClusters: [],
@@ -100,10 +120,6 @@ export default {
       }
     }, this.$store);
 
-    if (this.value.authorId && this.$store.getters['management/schemaFor'](MANAGEMENT.USER)) {
-      await this.$store.dispatch(`management/findAll`, { type: MANAGEMENT.USER }, { root: true });
-    }
-
     this.allBundles = allDispatches.allBundles || [];
     this.allFleetClusters = allDispatches.allFleetClusters || [];
   },
@@ -112,46 +128,59 @@ export default {
 </script>
 
 <template>
-  <Loading v-if="$fetchState.pending" />
-  <div
-    v-else
-    class="mt-20"
-  >
-    <FleetSummary
-      v-if="helmOpHasClusters"
-      :value="value"
-      :bundles="bundles"
-      class="mb-20"
-    />
-    <Banner
-      v-else
-      color="info"
-      class="mb-20"
-    >
-      {{ t('fleet.fleetSummary.noClusters.helmOp') }}
-    </Banner>
-    <ResourceTabs
-      :value="value"
-      mode="view"
-      class="mt-20"
-      :need-related="false"
-      @update:value="$emit('input', $event)"
-    >
-      <Tab
-        v-if="!!allBundles.length"
-        label="Bundles"
-        name="bundles"
-        :weight="30"
-      >
-        <FleetBundles :value="value" />
-      </Tab>
-      <Tab
-        label="Resources"
-        name="resources"
-        :weight="20"
-      >
-        <FleetResources :rows="value.resourcesStatuses" />
-      </Tab>
-    </ResourceTabs>
-  </div>
+  <DetailPage :loading="$fetchState.pending">
+    <template #top-area>
+      <Masthead v-bind="defaultMastheadProps">
+        <template #additional-actions>
+          <ViewOptions />
+        </template>
+      </Masthead>
+    </template>
+    <template #bottom-area>
+      <template v-if="currentView === _GRAPH">
+        <ForceDirectedTreeChart v-bind="forceDirectedTreeChartProps" />
+      </template>
+
+      <template v-else>
+        <div class="mt-20">
+          <FleetSummary
+            v-if="helmOpHasClusters"
+            :value="value"
+            :bundles="bundles"
+            class="mb-20"
+          />
+          <Banner
+            v-else
+            color="info"
+            class="mb-20"
+          >
+            {{ t('fleet.fleetSummary.noClusters.helmOp') }}
+          </Banner>
+          <ResourceTabs
+            :value="value"
+            mode="view"
+            class="mt-20"
+            :need-related="false"
+            @update:value="$emit('input', $event)"
+          >
+            <Tab
+              v-if="!!allBundles.length"
+              label="Bundles"
+              name="bundles"
+              :weight="30"
+            >
+              <FleetBundles :value="value" />
+            </Tab>
+            <Tab
+              label="Resources"
+              name="resources"
+              :weight="20"
+            >
+              <FleetResources :rows="value.resourcesStatuses" />
+            </Tab>
+          </ResourceTabs>
+        </div>
+      </template>
+    </template>
+  </DetailPage>
 </template>

package/dialog/AddonConfigConfirmationDialog.vue

@@ -27,7 +27,7 @@ export default {
       if (this.resources[0]) {
         this.resources[0](value);
         delete this.resources[0];
-        this.$emit('close', value);
+        this.$emit('close');
       }
     },
 

package/dialog/GenericPrompt.vue

@@ -47,7 +47,7 @@ export default {
     decodeHtml,
     close() {
       this.confirm(false);
-      this.$emit('close', false);
+      this.$emit('close');
     },
 
     async apply(buttonDone) {

package/dialog/ImportDialog.vue

@@ -28,12 +28,19 @@ export default {
   props: {
     defaultNamespace: {
       type:    String,
-      default: 'default'
+      default: undefined
     },
   },
 
   async fetch() {
-    this.allNamespaces = await this.$store.dispatch('cluster/findAll', { type: NAMESPACE, opt: { url: 'namespaces' } });
+    this.allNamespaces = (await this.$store.dispatch('cluster/findAll', { type: NAMESPACE, opt: { url: 'namespaces' } })) || [];
+
+    if (this.selectedNamespace === undefined) {
+      const defaultNamespace = 'default';
+      const hasAccessToDefaultNamespace = this.allNamespaces.some((ns) => ns.name === defaultNamespace);
+
+      this.selectedNamespace = hasAccessToDefaultNamespace ? defaultNamespace : this.allNamespaces[0]?.name;
+    }
   },
 
   data() {

package/dialog/InstallExtensionDialog.vue

@@ -29,9 +29,9 @@ export default {
       required: true
     },
     /**
-     * Modal mode
+     * The action to perform (install, update, rollback)
      */
-    mode: {
+    action: {
       type:     String,
       default:  '',
       required: true
@@ -68,14 +68,14 @@ export default {
     // Default to latest version on install (this is default on the plugin)
     this.version = chartVersion;
 
-    if (this.mode === 'update') {
+    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.mode === 'rollback') {
+    } 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);
 
@@ -94,7 +94,7 @@ export default {
     }
 
     this.busy = false;
-    this.update = this.mode !== 'install';
+    this.update = this.action !== 'install';
 
     this.defaultRegistrySetting = await this.$store.dispatch('management/find', {
       type: MANAGEMENT.SETTING,
@@ -141,7 +141,15 @@ export default {
     },
 
     buttonMode() {
-      return this.update ? 'update' : 'install';
+      if (this.action === 'rollback') {
+        return 'rollback';
+      }
+
+      if (this.action === 'update') {
+        return 'update';
+      }
+
+      return 'install';
     },
 
     chartVersionLoadsWithoutAuth() {
@@ -149,7 +157,7 @@ export default {
     },
 
     returnFocusSelector() {
-      return `[data-testid="extension-card-${ this.mode }-btn-${ this.plugin?.name }"]`;
+      return `[data-testid="extension-card-${ this.action }-btn-${ this.plugin?.name }"]`;
     }
   },
 
@@ -190,7 +198,7 @@ export default {
 
       const plugin = this.plugin;
 
-      this.updateStatus(plugin.name, 'install');
+      this.updateStatus(plugin.name, this.action);
 
       // Find the version that the user wants to install
       const version = plugin.versions?.find((v) => v.version === this.version);
@@ -287,12 +295,12 @@ export default {
 <template>
   <div class="plugin-install-dialog">
     <h4 class="mt-10">
-      {{ t(`plugins.${ mode }.title`, { name: plugin?.label }) }}
+      {{ t(`plugins.${ action }.title`, { name: plugin?.label }) }}
     </h4>
     <div class="custom mt-10">
       <div class="dialog-panel">
         <p>
-          {{ t(`plugins.${ mode }.prompt`) }}
+          {{ t(`plugins.${ action }.prompt`) }}
         </p>
         <Banner
           v-if="chartVersionLoadsWithoutAuth"

package/dialog/SloDialog.vue

@@ -17,7 +17,7 @@ export default {
 
   computed: {
     name() {
-      return this.authProvider?.nameDisplay;
+      return this.t(`model.authConfig.provider."${ this.authProvider?.id }"`);
     }
   },
 

package/edit/__tests__/fleet.cattle.io.gitrepo.test.ts

@@ -74,7 +74,8 @@ const initGitRepo = (props: any, value?: any) => {
 
   return {
     props: {
-      value: initValue,
+      value:     initValue,
+      liveValue: initValue,
       ...props
     },
     computed: mockComputed,

package/edit/__tests__/resources.cattle.io.restore.test.ts

@@ -0,0 +1,106 @@
+import { nextTick } from 'vue';
+import { mount } from '@vue/test-utils';
+import RestoreComponent from '@shell/edit/resources.cattle.io.restore.vue';
+import { _CREATE } from '@shell/config/query-params';
+
+describe('view: restore storage source switching', () => {
+  let wrapper: any;
+
+  const mockStore = {
+    getters: {
+      currentStore:                () => 'cluster',
+      'cluster/schemaFor':         jest.fn(),
+      'cluster/all':               jest.fn(),
+      'cluster/paginationEnabled': jest.fn().mockReturnValue(false),
+      'cluster/urlFor':            jest.fn(),
+      'i18n/t':                    (val: string) => val,
+      'i18n/exists':               jest.fn(),
+    },
+    dispatch: jest.fn().mockResolvedValue([])
+  };
+
+  const createWrapper = (propsOverride = {}) => {
+    const defaultProps = {
+      value: {
+        metadata: { name: '', generateName: 'restore-' },
+        spec:     { prune: true, deleteTimeoutSeconds: 10 }
+      },
+      mode: _CREATE,
+      ...propsOverride
+    };
+
+    return mount(RestoreComponent, {
+      global: {
+        mocks: {
+          $store:      mockStore,
+          $route:      { query: {}, name: 'restore_route' },
+          $router:     { applyQuery: jest.fn() },
+          $fetchState: { pending: false }
+        }
+      },
+      propsData: defaultProps
+    });
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockStore.dispatch.mockResolvedValue([]);
+  });
+
+  afterEach(() => {
+    if (wrapper) {
+      wrapper.unmount();
+    }
+  });
+
+  it('should not include S3 storageLocation when creating with useDefault', async() => {
+    wrapper = createWrapper();
+    await wrapper.vm.$nextTick();
+
+    wrapper.vm.storageSource = 'useDefault';
+    await nextTick();
+
+    expect(wrapper.vm.value.spec).toStrictEqual({
+      prune:                true,
+      deleteTimeoutSeconds: 10
+    });
+    expect(wrapper.vm.value.spec.storageLocation).toBeUndefined();
+    expect(wrapper.vm.s3).toStrictEqual({});
+  });
+
+  it('should include S3 storageLocation when creating with An S3-compatible object store', async() => {
+    wrapper = createWrapper();
+    await wrapper.vm.$nextTick();
+
+    wrapper.vm.storageSource = 'configureS3';
+    await nextTick();
+
+    expect(wrapper.vm.value.spec.storageLocation).toBeDefined();
+    expect(wrapper.vm.value.spec.storageLocation.s3).toBeDefined();
+    expect(wrapper.vm.value.spec.prune).toBe(true);
+    expect(wrapper.vm.value.spec.deleteTimeoutSeconds).toBe(10);
+  });
+
+  it('should not include S3 storageLocation when switching from S3-compatible object store back to useDefault', async() => {
+    wrapper = createWrapper();
+    await wrapper.vm.$nextTick();
+
+    wrapper.vm.storageSource = 'configureS3';
+    wrapper.vm.s3 = {
+      bucketName: 'test-bucket',
+      endpoint:   'test-endpoint'
+    };
+    wrapper.vm.value.spec.storageLocation = { s3: wrapper.vm.s3 };
+    await nextTick();
+
+    expect(wrapper.vm.value.spec.storageLocation).toBeDefined();
+
+    wrapper.vm.storageSource = 'useDefault';
+    await nextTick();
+
+    expect(wrapper.vm.value.spec.storageLocation).toBeUndefined();
+    expect(wrapper.vm.s3).toStrictEqual({});
+    expect(wrapper.vm.value.spec.prune).toBe(true);
+    expect(wrapper.vm.value.spec.deleteTimeoutSeconds).toBe(10);
+  });
+});