@rancher/shell 3.0.5-rc.3 → 3.0.5-rc.5

package/dialog/RedeployWorkloadDialog.vue

@@ -0,0 +1,164 @@
+<script lang="ts">
+import { TIMESTAMP } from '@shell/config/labels-annotations';
+import AsyncButton from '@shell/components/AsyncButton';
+import { Card } from '@components/Card';
+import { Banner } from '@components/Banner';
+import { exceptionToErrorsArray } from '@shell/utils/error';
+import { resourceNames } from '@shell/utils/string';
+import { mapGetters } from 'vuex';
+
+interface Workload {
+  nameDisplay: string;
+  type: string;
+  schema?: any;
+  spec: {
+    template: {
+      metadata?: {
+        annotations?: Record<string, string>;
+      };
+    };
+  };
+  save: () => Promise<void>;
+}
+
+export default {
+  name: 'RedeployWorkloadDialog',
+
+  emits: ['close'],
+
+  components: {
+    Card,
+    AsyncButton,
+    Banner,
+  },
+
+  props: {
+    workloads: {
+      type:     Array as () => Workload[],
+      required: true,
+    },
+  },
+
+  data() {
+    return { errors: [] };
+  },
+
+  computed: {
+    ...mapGetters({ t: 'i18n/t', labelFor: 'type-map/labelFor' }),
+
+    names(): string[] {
+      return this.workloads.map(({ nameDisplay }) => nameDisplay);
+    },
+
+    type(): string {
+      const types = new Set(this.workloads.map(({ type }) => type));
+
+      if (types.size > 1) {
+        return this.t('generic.resource', { count: this.workloads.length });
+      }
+
+      const [{ schema } = {}] = this.workloads;
+
+      if (!schema) {
+        return `resource${ this.workloads.length === 1 ? '' : 's' }`;
+      }
+
+      return this.labelFor(schema, this.workloads.length);
+    },
+  },
+
+  methods: {
+    resourceNames,
+
+    close(): void {
+      this.$emit('close');
+    },
+
+    async apply(buttonDone?: (success: boolean) => void): Promise<void> {
+      try {
+        const now = new Date().toISOString().replace(/\.\d+Z$/, 'Z');
+
+        for (const workload of this.workloads) {
+          const metadata = workload.spec.template.metadata ??= {};
+          const annotations = metadata.annotations ??= {};
+
+          annotations[TIMESTAMP] = now;
+
+          await workload.save();
+        }
+
+        buttonDone?.(true);
+        this.close();
+      } catch (err) {
+        this.errors = exceptionToErrorsArray(err);
+        buttonDone?.(false);
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <Card
+    role="alertdialog"
+    aria-modal="true"
+    class="prompt-redeploy"
+    :show-highlight-border="false"
+  >
+    <template #title>
+      <h4 class="text-default-text">
+        {{ t('promptRedeploy.title', { type }) }}
+      </h4>
+    </template>
+
+    <template #body>
+      <div class="mb-10">
+        <span
+          v-clean-html="t('promptRedeploy.attemptingToRedeploy', {
+            type,
+            names: resourceNames(names, null, t),
+          })"
+        />
+        <Banner
+          v-for="(error, i) in errors"
+          :key="i"
+          role="alert"
+          color="error"
+          :label="error"
+        />
+      </div>
+    </template>
+
+    <template #actions>
+      <button
+        role="button"
+        class="btn role-secondary"
+        :aria-label="t('generic.cancel')"
+        @click="close"
+      >
+        {{ t('generic.cancel') }}
+      </button>
+      <div class="spacer" />
+      <AsyncButton
+        role="button"
+        class="btn bg-error ml-10"
+        :action-label="t('asyncButton.redeploy.action')"
+        @click="apply"
+      />
+    </template>
+  </Card>
+</template>
+
+<style lang="scss">
+.prompt-redeploy {
+  &.card-container {
+    box-shadow: none;
+  }
+
+  .card-actions {
+    .spacer {
+      flex: 1;
+    }
+  }
+}
+</style>

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

@@ -1,9 +1,11 @@
 import { mount } from '@vue/test-utils';
 import { _CREATE, _EDIT, _VIEW } from '@shell/config/query-params';
-import GitRepo from '@shell/edit/fleet.cattle.io.gitrepo.vue';
+import GitRepo from '@shell/models/fleet.cattle.io.gitrepo';
+import GitRepoComponent from '@shell/edit/fleet.cattle.io.gitrepo.vue';
 
 const mockStore = {
   dispatch: jest.fn(),
+  commit:   jest.fn(),
   getters:  {
     'i18n/t':                  (text: string) => text,
     'i18n/exists':             jest.fn(),
@@ -12,8 +14,10 @@ const mockStore = {
     'current_store/schemaFor': jest.fn(),
     'current_store/all':       jest.fn(),
     workspace:                 jest.fn(),
-  }
+  },
+  rootGetters: { 'i18n/t': jest.fn() },
 };
+
 const mocks = {
   $store:      mockStore,
   $fetchState: { pending: false },
@@ -26,8 +30,9 @@ const mocks = {
     }
   },
 };
+
 const mockComputed = {
-  ...GitRepo.computed,
+  ...GitRepoComponent.computed,
   steps: () => [{
     name:           'stepAdvanced',
     title:          'title',
@@ -39,22 +44,46 @@ const mockComputed = {
   }],
 };
 
-const values = {
-  metadata: { namespace: 'test' },
-  spec:     {
-    template:     {},
-    correctDrift: { enabled: false },
+const mockRepo = {
+  type:       'fleet.cattle.io.gitrepo',
+  apiVersion: 'fleet.cattle.io/v1alpha1',
+  kind:       'GitRepo',
+  metadata:   {
+    name:      `test`,
+    namespace: 'test',
+  },
+  spec: {
+    targetNamespace: 'custom-namespace-name',
+    targets:         [
+      { clusterName: `fleet-local` }
+    ],
   },
-  targetInfo: { mode: 'all' },
+  status: {}
+};
+
+const initGitRepo = (props: any, value?: any) => {
+  const initValue = new GitRepo({
+    ...mockRepo,
+    ...(value || {})
+  }, {
+    getters:     { schemaFor: () => ({ linkFor: jest.fn() }) },
+    dispatch:    jest.fn(),
+    rootGetters: { 'i18n/t': jest.fn() },
+  });
+
+  return {
+    props: {
+      value: initValue,
+      ...props
+    },
+    computed: mockComputed,
+    global:   { mocks },
+  };
 };
 
 describe('view: fleet.cattle.io.gitrepo, mode: view - should', () => {
   it('hide advanced options banner', () => {
-    const wrapper = mount(GitRepo, {
-      props:    { value: values, mode: _VIEW },
-      computed: mockComputed,
-      global:   { mocks }
-    });
+    const wrapper = mount(GitRepoComponent, initGitRepo({ mode: _VIEW }));
 
     const advancedInfoBanner = wrapper.find('[data-testid="gitrepo-advanced-info"]');
 
@@ -66,11 +95,7 @@ describe.each([
   _CREATE,
   _EDIT,
 ])('view: fleet.cattle.io.gitrepo, mode: %p - should', (mode) => {
-  const wrapper = mount(GitRepo, {
-    props:    { value: values, mode },
-    computed: mockComputed,
-    global:   { mocks }
-  });
+  const wrapper = mount(GitRepoComponent, initGitRepo({ mode }));
 
   it('show advanced options banner', () => {
     const advancedInfoBanner = wrapper.find('[data-testid="gitrepo-advanced-info"]');
@@ -119,21 +144,13 @@ describe.each([
     disablePolling,
     enabled
   ) => {
-    const wrapper = mount(GitRepo, {
-      props: {
-        value: {
-          ...values,
-          spec: {
-            disablePolling,
-            pollingInterval: 10
-          },
-          status: { webhookCommit: 'sha' },
-        },
-        realMode: mode
+    const wrapper = mount(GitRepoComponent, initGitRepo({ realMode: mode }, {
+      spec: {
+        disablePolling,
+        pollingInterval: 10
       },
-      computed: mockComputed,
-      global:   { mocks },
-    });
+      status: { webhookCommit: 'sha' },
+    }));
 
     const pollingCheckbox = wrapper.findComponent('[data-testid="gitRepo-enablePolling-checkbox"]') as any;
     const pollingIntervalInput = wrapper.find('[data-testid="gitRepo-pollingInterval-input"]');
@@ -167,17 +184,7 @@ describe.each([
     pollingInterval,
     unitValue,
   ) => {
-    const wrapper = mount(GitRepo, {
-      props: {
-        value: {
-          ...values,
-          spec: { pollingInterval }
-        },
-        realMode: mode
-      },
-      computed: mockComputed,
-      global:   { mocks },
-    });
+    const wrapper = mount(GitRepoComponent, initGitRepo({ realMode: mode }, { spec: { pollingInterval } }));
 
     const pollingIntervalInput = wrapper.find('[data-testid="gitRepo-pollingInterval-input"]').element as any;
 
@@ -198,17 +205,7 @@ describe.each([
     pollingInterval,
     visible,
   ) => {
-    const wrapper = mount(GitRepo, {
-      props: {
-        value: {
-          ...values,
-          spec: { pollingInterval }
-        },
-        realMode: mode
-      },
-      computed: mockComputed,
-      global:   { mocks },
-    });
+    const wrapper = mount(GitRepoComponent, initGitRepo({ realMode: mode }, { spec: { pollingInterval } }));
 
     const pollingIntervalMinimumValueWarning = wrapper.find('[data-testid="gitRepo-pollingInterval-minimumValueWarning"]');
 
@@ -226,18 +223,10 @@ describe.each([
     webhookCommit,
     visible
   ) => {
-    const wrapper = mount(GitRepo, {
-      props: {
-        value: {
-          ...values,
-          spec:   { pollingInterval: 60 },
-          status: { webhookCommit },
-        },
-        realMode: mode
-      },
-      computed: mockComputed,
-      global:   { mocks },
-    });
+    const wrapper = mount(GitRepoComponent, initGitRepo({ realMode: mode }, {
+      spec:   { pollingInterval: 60 },
+      status: { webhookCommit },
+    }));
 
     const pollingIntervalWebhookWarning = wrapper.find('[data-testid="gitRepo-pollingInterval-webhookWarning"]');