@rancher/shell 0.5.0 → 0.5.1

package/components/AsyncButton.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { defineComponent, PropType, inject } from 'vue';
+import Vue from 'vue';
 import typeHelper from '@shell/utils/type-helpers';
 
 export const ASYNC_BUTTON_STATES = {
@@ -14,13 +14,7 @@ const TOOLTIP = 'tooltip';
 
 export type AsyncButtonCallback = (success: boolean) => void;
 
-interface NonReactiveProps {
-  timer: NodeJS.Timeout | undefined;
-}
-
-const provideProps: NonReactiveProps = { timer: undefined };
-
-export default defineComponent({
+export default Vue.extend<{ phase: string}, any, any, any>({
   props: {
     /**
      * Mode maps to keys in asyncButton.* translations
@@ -43,7 +37,7 @@ export default defineComponent({
       default: false,
     },
     type: {
-      type:    String as PropType<'button' | 'submit' | 'reset' | undefined>,
+      type:    String,
       default: 'button'
     },
     tabIndex: {
@@ -119,13 +113,7 @@ export default defineComponent({
 
   },
 
-  setup() {
-    const timer = inject('timer', provideProps.timer);
-
-    return { timer };
-  },
-
-  data() {
+  data(): { phase: string, timer?: NodeJS.Timeout} {
     return { phase: this.currentPhase };
   },
 
@@ -257,7 +245,7 @@ export default defineComponent({
         this.phase = (success ? ASYNC_BUTTON_STATES.SUCCESS : ASYNC_BUTTON_STATES.ERROR );
         this.timer = setTimeout(() => {
           this.timerDone();
-        }, this.delay);
+        }, this.delay );
       }
     },
 

package/components/Certificates.vue

@@ -1,7 +1,7 @@
 <script lang="ts">
-import { defineComponent } from 'vue';
+import Vue from 'vue';
 import { mapGetters } from 'vuex';
-import ResourceTable from '@shell/components/ResourceTable.vue';
+import ResourceTable from '@shell/components/ResourceTable';
 import { SECRET } from '@shell/config/types';
 import { NAME as NAME_COL, NAMESPACE as NAMESPACE_COL, AGE, STATE } from '@shell/config/table-headers';
 import Secret, { TYPES } from '@shell/models/secret';
@@ -19,7 +19,7 @@ interface Data {
   }
 }
 
-export default defineComponent({
+export default Vue.extend<Data, any, any, any>({
   components: {
     ResourceTable, Banner, BadgeState
   },
@@ -99,7 +99,7 @@ export default defineComponent({
   computed: {
     ...mapGetters(['isAllNamespaces']),
 
-    expiredData(): any {
+    expiredData() {
       let expiring = 0;
       let expired = 0;
 

package/components/DraggableZone.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { defineComponent } from 'vue';
+import Vue from 'vue';
 import { mapState } from 'vuex';
 import { BOTTOM, CENTER, LEFT, RIGHT } from '@shell/utils/position';
 
@@ -14,7 +14,7 @@ interface Data {
   drag: Drag;
 }
 
-export default defineComponent({
+export default Vue.extend({
   data(): Data {
     return {
       drag: {

package/components/PodSecurityAdmission.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { defineComponent } from 'vue';
+import Vue from 'vue';
 import { _VIEW, _CREATE } from '@shell/config/query-params';
 import LabeledSelect from '@shell/components/form/LabeledSelect.vue';
 import Checkbox from '@components/Form/Checkbox/Checkbox.vue';
@@ -25,7 +25,7 @@ const getExemptionControl = (): PSAExemptionControl => ({
   value:  ''
 });
 
-export default defineComponent({
+export default Vue.extend({
   components: {
     Checkbox, LabeledSelect, LabeledInput
   },

package/components/form/Error.vue

@@ -1,10 +1,10 @@
 <script lang="ts">
-import { PropType, defineComponent } from 'vue';
+import Vue, { PropType } from 'vue';
 import Banner from '@components/Banner/Banner.vue';
 
-type Rule = (v?: string | number | Record<string, any> | unknown[]) => undefined | string;
+type Rule = (v?: string) => undefined | string;
 
-export default defineComponent({
+export default Vue.extend<any, any, any, any>({
   components: { Banner },
   props:      {
     value: {

package/components/form/Footer.vue

@@ -1,10 +1,10 @@
 <script lang="ts">
-import { defineComponent } from 'vue';
+import Vue from 'vue';
 import { _VIEW } from '@shell/config/query-params';
 import AsyncButton, { AsyncButtonCallback } from '@shell/components/AsyncButton.vue';
 import Banner from '@components/Banner/Banner.vue';
 
-export default defineComponent({
+export default Vue.extend({
   components: { AsyncButton, Banner },
 
   props: {

package/components/form/GitPicker.vue

@@ -1,13 +1,12 @@
 <script lang="ts">
-import { defineComponent, inject } from 'vue';
+import Vue from 'vue';
 import SortableTable from '@shell/components/SortableTable/index.vue';
 import RadioButton from '@components/Form/Radio/RadioButton.vue';
 import debounce from 'lodash/debounce';
 import { isArray } from '@shell/utils/array';
 import LabeledSelect from '@shell/components/form/LabeledSelect.vue';
 import LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';
-import { GitUtils, Commit } from '@shell/utils/git';
-import type { DebouncedFunc } from 'lodash';
+import { GitUtils } from '../../utils/git';
 
 interface commit {
   [key: string]: any,
@@ -18,45 +17,21 @@ interface Data {
     repo: boolean,
     branch: boolean,
     commits: boolean,
-    branches?: unknown,
   },
 
   repos: object[],
   branches: object[],
   commits: commit[],
 
-  selectedAccOrOrg: string | undefined,
-  selectedRepo: object | undefined,
-  selectedBranch: object | undefined,
-  selectedCommit: Commit | null,
+  selectedAccOrOrg: string| null,
+  selectedRepo: object| null,
+  selectedBranch: object| null,
+  selectedCommit: object | null,
 }
 
-interface CommitHeader {
-  name: string;
-  label: string;
-  width?: number;
-  formatter?: string;
-  formatterOpts?: { [key: string]: any };
-  value?: string | string[];
-  sort?: string | string[];
-  defaultSort?: boolean;
-}
-
-interface NonReactiveProps {
-  onSearchRepo: DebouncedFunc<(param: any) => Promise<any>> | undefined;
-  onSearchBranch: DebouncedFunc<(param: any) => Promise<any>> | undefined;
-  debounceTime: number;
-}
-
-const debounceTime = 1_000;
+const debounceTime = 1000;
 
-const provideProps: NonReactiveProps = {
-  onSearchRepo:   undefined,
-  onSearchBranch: undefined,
-  debounceTime,
-};
-
-export default defineComponent({
+export default Vue.extend<Data, any, any, any>({
 
   components: {
     LabeledSelect,
@@ -77,20 +52,10 @@ export default defineComponent({
     }
   },
 
-  setup() {
-    const onSearchRepo = inject('onSearchRepo', provideProps.onSearchRepo);
-    const onSearchBranch = inject('onSearchBranch', provideProps.onSearchBranch);
-    const debounceTime = inject('debounceTime', provideProps.debounceTime);
-
+  data() {
     return {
-      onSearchRepo,
-      onSearchBranch,
       debounceTime,
-    };
-  },
 
-  data(): Data {
-    return {
       hasError: {
         repo:    false,
         branch:  false,
@@ -101,10 +66,10 @@ export default defineComponent({
       branches: [],
       commits:  [] as commit[],
 
-      selectedAccOrOrg: undefined,
-      selectedRepo:     undefined,
-      selectedBranch:   undefined,
-      selectedCommit:   null,
+      selectedAccOrOrg: null,
+      selectedRepo:     null,
+      selectedBranch:   null,
+      selectedCommit:   {},
     };
   },
 
@@ -130,14 +95,13 @@ export default defineComponent({
   },
 
   computed: {
-    commitHeaders(): CommitHeader[] {
+    commitHeaders() {
       return [
         {
           name:  'index',
           label: this.t(`gitPicker.${ this.type }.tableHeaders.choose.label`),
           width: 60,
-        },
-        {
+        }, {
           name:          'sha',
           label:         this.t(`gitPicker.${ this.type }.tableHeaders.sha.label`),
           width:         90,
@@ -170,20 +134,17 @@ export default defineComponent({
       ];
     },
 
-    preparedRepos(): unknown {
+    preparedRepos() {
       return this.normalizeArray(this.repos, (item: any) => ({ id: item.id, name: item.name }));
     },
 
-    preparedBranches(): unknown {
+    preparedBranches() {
       return this.normalizeArray(this.branches, (item: any) => ({ id: item.id, name: item.name }));
     },
 
-    preparedCommits(): Commit[] {
-      return this.normalizeArray(this.commits, (c) => GitUtils[this.type].normalize.commit(c));
+    preparedCommits() {
+      return this.normalizeArray(this.commits, (c: any) => GitUtils[this.type].normalize.commit(c));
     },
-    selectedCommitId(): string | undefined {
-      return this.selectedCommit?.commitId;
-    }
   },
 
   methods: {
@@ -203,10 +164,10 @@ export default defineComponent({
 
     reset() {
       this.repos = [];
-      this.selectedAccOrOrg = undefined;
-      this.selectedRepo = undefined;
-      this.selectedBranch = undefined;
-      this.selectedCommit = null;
+      this.selectedAccOrOrg = null;
+      this.selectedRepo = null;
+      this.selectedBranch = null;
+      this.selectedCommit = {};
 
       this.communicateReset();
     },
@@ -256,13 +217,13 @@ export default defineComponent({
 
     async fetchRepos() {
       this.repos = [];
-      this.selectedRepo = undefined;
-      this.selectedBranch = undefined;
-      this.selectedCommit = null;
+      this.selectedRepo = null;
+      this.selectedBranch = null;
+      this.selectedCommit = {};
 
       this.communicateReset();
 
-      if (this.selectedAccOrOrg?.length) {
+      if (this.selectedAccOrOrg.length) {
         try {
           const res = await this.$store.dispatch(`${ this.type }/fetchRecentRepos`, { username: this.selectedAccOrOrg });
 
@@ -276,8 +237,8 @@ export default defineComponent({
     },
 
     async fetchBranches() {
-      this.selectedBranch = undefined;
-      this.selectedCommit = null;
+      this.selectedBranch = null;
+      this.selectedCommit = {};
 
       this.communicateReset();
 
@@ -292,7 +253,7 @@ export default defineComponent({
     },
 
     async fetchCommits() {
-      this.selectedCommit = null;
+      this.selectedCommit = {};
 
       this.communicateReset();
 
@@ -318,7 +279,7 @@ export default defineComponent({
     },
 
     final(commitId: string) {
-      this.selectedCommit = this.preparedCommits.find((c: { commitId?: string }) => c.commitId === commitId) || null;
+      this.selectedCommit = this.preparedCommits.find((c: { commitId?: string }) => c.commitId === commitId);
 
       if (this.selectedAccOrOrg && this.selectedRepo && this.selectedCommit?.commitId) {
         this.$emit('change', {
@@ -376,7 +337,7 @@ export default defineComponent({
     },
 
     status(value: boolean) {
-      return value ? 'error' : undefined;
+      return value ? 'error' : null;
     },
 
     reposRules() {
@@ -394,17 +355,11 @@ export default defineComponent({
       const commitId = this.$route.query?.commit;
 
       if (commitId) {
-        const table = this.$refs.commitsTable as unknown as {
-          getPageByRow: (id: string | (string | null)[], callback: (commit: any) => any) => any;
-          setPage: (page: any) => void;
-        };
-        const page = table?.getPageByRow(commitId, ({ commitId }: commit) => commitId);
+        const table = this.$refs.commitsTable;
+        const page = table.getPageByRow(commitId, ({ commitId }: commit) => commitId);
 
-        table?.setPage(page);
+        table.setPage(page);
       }
-    },
-    selectReduction(e: unknown) {
-      return e;
     }
   },
 });
@@ -438,7 +393,7 @@ export default defineComponent({
           :options="preparedRepos"
           :clearable="true"
           :searchable="true"
-          :reduce="selectReduction"
+          :reduce="(e) => e"
           :rules="[reposRules]"
           :status="status(hasError.repo)"
           :option-label="'name'"
@@ -457,7 +412,7 @@ export default defineComponent({
           :label="t(`gitPicker.${ type }.branch.inputLabel`)"
           :options="preparedBranches"
           :clearable="false"
-          :reduce="selectReduction"
+          :reduce="(e) => e"
           :searchable="true"
           :rules="[branchesRules]"
           :status="status(hasError.branch)"
@@ -486,7 +441,7 @@ export default defineComponent({
         >
           <template #cell:index="{row}">
             <RadioButton
-              :value="selectedCommitId"
+              :value="selectedCommit.commitId"
               :val="row.commitId"
               @input="final($event)"
             />

package/composables/useCompactInput.ts

@@ -1,7 +1,7 @@
 import { computed, ComputedRef } from 'vue';
 
 interface CompactInputProps {
-  compact?: boolean | null;
+  compact?: boolean;
   label?: string;
   labelKey?: string;
 }
@@ -13,7 +13,7 @@ interface UseCompactInput {
 export const useCompactInput = (props: CompactInputProps): UseCompactInput => {
   const isCompact = computed(() => {
     // Compact if explicitly set - otherwise compact if there is no label
-    return (props.compact !== null && props.compact !== undefined) ? !!props.compact : !(props.label || props.labelKey);
+    return props.compact !== null ? !!props.compact : !(props.label || props.labelKey);
   });
 
   return { isCompact };

package/edit/catalog.cattle.io.clusterrepo.vue

@@ -1,4 +1,5 @@
 <script>
+import Vue from 'vue';
 import CreateEditView from '@shell/mixins/create-edit-view';
 import Footer from '@shell/components/form/Footer';
 import { LabeledInput } from '@components/Form/LabeledInput';
@@ -39,6 +40,21 @@ export default {
       return this.$store.getters['cluster/all'](NAMESPACE)[0]?.id;
     }
   },
+
+  methods: {
+    onTargetChange(isGit) {
+      // reset entered value when switching options
+      if (isGit) {
+        Vue.set(this.value.spec, 'url', '');
+      } else {
+        Vue.set(this.value.spec, 'gitRepo', '');
+
+        if (!!this.value.spec.gitBranch) {
+          Vue.set(this.value.spec, 'gitBranch', '');
+        }
+      }
+    }
+  },
 };
 </script>
 
@@ -60,6 +76,7 @@ export default {
           :labels="[t('catalog.repo.target.http'), t('catalog.repo.target.git')]"
           :mode="mode"
           data-testid="clusterrepo-radio-input"
+          @input="onTargetChange"
         />
       </div>
     </div>
@@ -97,6 +114,7 @@ export default {
       :label="t('catalog.repo.url.label')"
       :placeholder="t('catalog.repo.url.placeholder', null, true)"
       :mode="mode"
+      data-testid="clusterrepo-helm-url-input"
     />
 
     <SelectOrCreateAuthSecret

package/edit/management.cattle.io.podsecurityadmissionconfigurationtemplate.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { PropType, defineComponent } from 'vue';
+import Vue, { PropType, VueConstructor } from 'vue';
 import CreateEditView from '@shell/mixins/create-edit-view';
 import CruResource from '@shell/components/CruResource.vue';
 import PodSecurityAdmission from '@shell/components/PodSecurityAdmission.vue';
@@ -9,7 +9,7 @@ import { PSA, PSAConfig, PSADefaults, PSAExemptions } from '@shell/types/pod-sec
 import { PSADimensions } from '@shell/config/pod-security-admission';
 import { MANAGEMENT } from '@shell/config/types';
 
-export default defineComponent({
+export default (Vue as VueConstructor<Vue & InstanceType<typeof CreateEditView>>).extend({
   mixins:     [CreateEditView],
   components: {
     CruResource,

package/mixins/create-edit-view/index.js

@@ -1,9 +1,9 @@
 import { _EDIT, _YAML } from '@shell/config/query-params';
-import { defineComponent } from 'vue';
+import Vue from 'vue';
 
 import impl from './impl';
 
-export default defineComponent({
+export default Vue.extend({
   ...impl,
 
   props: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rancher/shell",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "description": "Rancher Dashboard Shell",
   "repository": "https://github.com/rancherlabs/dashboard",
   "license": "Apache-2.0",

package/rancher-components/Accordion/Accordion.vue

@@ -1,8 +1,7 @@
 <script lang="ts">
-import { defineComponent } from 'vue';
+import Vue from 'vue';
 import { mapGetters } from 'vuex';
-
-export default defineComponent({
+export default Vue.extend({
   props: {
     title: {
       type:    String,

package/rancher-components/BadgeState/BadgeState.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { PropType, defineComponent } from 'vue';
+import Vue, { PropType } from 'vue';
 
 interface Badge {
   stateBackground: string;
@@ -11,7 +11,7 @@ interface Badge {
  * <p>Represents a badge whose label and color is either taken from the value property or
  * from the label and color properties. The state property takes precedence.</p>
  */
-export default defineComponent({
+export default Vue.extend({
   props: {
     /**
      * A value having the properties `stateBackground` and `stateDisplay`
@@ -59,7 +59,7 @@ export default defineComponent({
 </script>
 
 <template>
-  <span :class="['badge-state', bg]">
+  <span :class="{'badge-state': true, [bg]: true}">
     <i
       v-if="icon"
       class="icon"

package/rancher-components/Banner/Banner.vue

@@ -1,9 +1,9 @@
 <script lang="ts">
-import { defineComponent } from 'vue';
+import Vue from 'vue';
 import { nlToBr } from '@shell/utils/string';
 import { stringify } from '@shell/utils/error';
 
-export default defineComponent({
+export default Vue.extend({
   props: {
     /**
      * A color class that represents the color of the banner.

package/rancher-components/Card/Card.vue

@@ -1,7 +1,7 @@
 <script lang="ts">
-import { defineComponent, PropType } from 'vue';
+import Vue from 'vue';
 
-export default defineComponent({
+export default Vue.extend({
   name:  'Card',
   props: {
     /**
@@ -22,7 +22,7 @@ export default defineComponent({
      * The function to invoke when the default action button is clicked.
      */
     buttonAction: {
-      type:    Function as PropType<(event: MouseEvent) => void>,
+      type:    Function,
       default: (): void => { }
     },
     /**

package/rancher-components/Form/Checkbox/Checkbox.vue

@@ -1,10 +1,10 @@
 <script lang="ts">
-import { PropType, defineComponent } from 'vue';
+import Vue, { PropType } from 'vue';
 import { _EDIT, _VIEW } from '@shell/config/query-params';
 import { addObject, removeObject } from '@shell/utils/array';
 import cloneDeep from 'lodash/cloneDeep';
 
-export default defineComponent({
+export default Vue.extend({
   name: 'Checkbox',
 
   props: {
@@ -140,7 +140,7 @@ export default defineComponent({
     /**
      * Toggles the checked state for the checkbox and emits an 'input' event.
      */
-    clicked(event: MouseEvent | KeyboardEvent): boolean | void {
+    clicked(event: MouseEvent): boolean | void {
       if ((event.target as HTMLLinkElement).tagName === 'A' && (event.target as HTMLLinkElement).href) {
         // Ignore links inside the checkbox label so you can click them
         return true;

package/rancher-components/Form/LabeledInput/LabeledInput.test.ts

@@ -5,7 +5,7 @@ describe('component: LabeledInput', () => {
   it('should emit input only once', () => {
     const value = '2';
     const delay = 1;
-    const wrapper = mount(LabeledInput, {
+    const wrapper = mount(LabeledInput as any, {
       propsData: { delay },
       mocks:     { $store: { getters: { 'i18n/t': jest.fn() } } }
     });