@rancher/shell 0.4.0 → 0.5.0

package/components/PodSecurityAdmission.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } 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 Vue.extend({
+export default defineComponent({
   components: {
     Checkbox, LabeledSelect, LabeledInput
   },

package/components/Questions/index.vue

@@ -258,7 +258,7 @@ export default {
       }
 
       if ( this.tabbed === 'multiple' ) {
-        return this.groups.length > 1;
+        return !!this.groups.length;
       }
 
       return true;

package/components/ResourceDetail/Masthead.vue

@@ -422,6 +422,7 @@ export default {
             <span v-if="value.detailPageHeaderActionOverride && value.detailPageHeaderActionOverride(realMode)">{{ value.detailPageHeaderActionOverride(realMode) }}</span>
             <t
               v-else
+              class="mastehead-resource-title"
               :k="'resourceDetail.header.' + realMode"
               :subtype="resourceSubtype"
               :name="displayName"
@@ -544,6 +545,10 @@ export default {
 
   HEADER {
     margin: 0;
+
+    .title {
+      overflow: hidden;
+    }
   }
 
   .primaryheader {
@@ -553,6 +558,17 @@ export default {
 
     h1 {
       margin: 0;
+      overflow: hidden;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+
+      .mastehead-resource-title {
+        padding: 0 8px;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+      }
     }
   }
 
@@ -575,9 +591,6 @@ export default {
 
   .masthead-state {
     font-size: initial;
-    display: inline-block;
-    position: relative;
-    top: -2px;
   }
 
   .masthead-istio {

package/components/ResourceTable.vue

@@ -97,6 +97,14 @@ export default {
       default: 'sortableTable.paging.resource',
     },
 
+    /**
+     * Additional params to pass to the pagingLabel translation
+     */
+    pagingParams: {
+      type:    Object,
+      default: null,
+    },
+
     rowActions: {
       type:    Boolean,
       default: true,
@@ -392,7 +400,11 @@ export default {
       return standard.concat(this.listGroups);
     },
 
-    pagingParams() {
+    parsedPagingParams() {
+      if (this.pagingParams) {
+        return this.pagingParams;
+      }
+
       if ( !this.schema ) {
         return {
           singularLabel: '',
@@ -482,7 +494,7 @@ export default {
     :group-options="groupOptions"
     :search="search"
     :paging="true"
-    :paging-params="pagingParams"
+    :paging-params="parsedPagingParams"
     :paging-label="pagingLabel"
     :row-actions="rowActions"
     :table-actions="_showBulkActions"

package/components/ResourceYaml.vue

@@ -190,6 +190,11 @@ export default {
 
       cm.foldLinesMatching(/managedFields/);
 
+      // Allow the model to supply an array of json paths to fold other sections in the YAML for the given resource type
+      if (this.value?.yamlFolding) {
+        this.value.yamlFolding.forEach((path) => cm.foldYaml(path));
+      }
+
       // regardless of edit or create we should probably fold all the comments so they dont get out of hand.
       const saved = cm.getMode().fold;
 

package/components/SideNav.vue

@@ -583,7 +583,7 @@ export default {
         }
       }
 
-      &.nuxt-link-active:not(:hover) {
+      &.router-link-active:not(:hover) {
         A {
           background-color: var(--nav-active);
         }

package/components/SingleClusterInfo.vue

@@ -13,10 +13,7 @@ export default {
   },
 
   async fetch() {
-    this.clusters = await this.$store.dispatch('management/findAll', {
-      type: MANAGEMENT.CLUSTER,
-      opt:  { url: MANAGEMENT.CLUSTER }
-    });
+    this.clusters = await this.$store.dispatch('management/findAll', { type: MANAGEMENT.CLUSTER });
   },
 
   data() {

package/components/Tabbed/index.vue

@@ -19,6 +19,11 @@ export default {
       default: false
     },
 
+    hideSingleTab: {
+      type:    Boolean,
+      default: false
+    },
+
     showTabsAddRemove: {
       type:    Boolean,
       default: false
@@ -86,6 +91,11 @@ export default {
     sortedTabs() {
       return sortBy(this.tabs, ['weight:desc', 'labelDisplay', 'name']);
     },
+
+    // hide tabs based on tab count IF flag is active
+    hideTabs() {
+      return this.hideSingleTab && this.sortedTabs.length === 1;
+    }
   },
 
   watch: {
@@ -225,11 +235,13 @@ export default {
 <template>
   <div :class="{'side-tabs': !!sideTabs, 'tabs-only': tabsOnly }">
     <ul
+      v-if="!hideTabs"
       ref="tablist"
       role="tablist"
       class="tabs"
       :class="{'clearfix':!sideTabs, 'vertical': sideTabs, 'horizontal': !sideTabs}"
       tabindex="0"
+      data-testid="tabbed-block"
       @keydown.right.prevent="selectNext(1)"
       @keydown.left.prevent="selectNext(-1)"
       @keydown.down.prevent="selectNext(1)"

package/components/fleet/FleetRepos.vue

@@ -8,8 +8,16 @@ import {
   AGE,
   STATE,
   NAME,
-  FLEET_SUMMARY
+  FLEET_SUMMARY,
+  FLEET_REPO,
+  FLEET_REPO_TARGET,
+  FLEET_REPO_CLUSTERS_READY,
+  FLEET_REPO_CLUSTER_SUMMARY,
+  FLEET_REPO_PER_CLUSTER_STATE
+
 } from '@shell/config/table-headers';
+import { FLEET } from '@shell/config/labels-annotations';
+import { STATES_ENUM } from '@shell/plugins/dashboard-store/resource-class';
 
 export default {
 
@@ -19,6 +27,11 @@ export default {
     ResourceTable, Link, Shortened, FleetIntro
   },
   props: {
+    clusterId: {
+      type:     String,
+      required: false,
+      default:  null,
+    },
     rows: {
       type:     Array,
       required: true,
@@ -54,35 +67,46 @@ export default {
       });
     },
 
+    isClusterView() {
+      return !!this.clusterId;
+    },
+
     noRows() {
       return !this.filteredRows.length;
     },
 
     headers() {
-      const out = [
-        STATE,
-        NAME,
-        {
-          name:     'repo',
-          labelKey: 'tableHeaders.repo',
-          value:    'repoDisplay',
-          sort:     'repoDisplay',
-          search:   ['spec.repo', 'status.commit'],
+      // Cluster summary is only shown in the cluster view
+      const fleetClusterSummary = {
+        ...FLEET_REPO_CLUSTER_SUMMARY,
+        formatterOpts: {
+          // Fleet uses labels to identify clusters
+          clusterLabel: this.clusterId
         },
-        {
-          name:     'target',
-          labelKey: 'tableHeaders.target',
-          value:    'targetInfo.modeDisplay',
-          sort:     ['targetInfo.modeDisplay', 'targetInfo.cluster', 'targetInfo.clusterGroup'],
-        },
-        {
-          name:     'clustersReady',
-          labelKey: 'tableHeaders.clustersReady',
-          value:    'status.readyClusters',
-          sort:     'status.readyClusters',
-          search:   false,
+      };
+
+      // if hasPerClusterState then use the repo state
+      const fleetPerClusterState = {
+        ...FLEET_REPO_PER_CLUSTER_STATE,
+        value: (row) => {
+          const statePerCluster = row.clusterResourceStatus?.find((c) => {
+            return c.clusterLabel === this.clusterId;
+          });
+
+          return statePerCluster ? statePerCluster?.status?.displayStatus : STATES_ENUM.ACTIVE;
         },
-        FLEET_SUMMARY,
+      };
+
+      const summary = this.isClusterView ? [fleetClusterSummary] : [FLEET_REPO_CLUSTERS_READY, FLEET_SUMMARY];
+
+      const state = this.isClusterView ? fleetPerClusterState : STATE;
+
+      const out = [
+        state,
+        NAME,
+        FLEET_REPO,
+        FLEET_REPO_TARGET,
+        ...summary,
         AGE
       ];
 
@@ -92,6 +116,12 @@ export default {
   methods: {
     parseTargetMode(row) {
       return row.targetInfo?.mode === 'clusterGroup' ? this.t('fleet.gitRepo.warningTooltip.clusterGroup') : this.t('fleet.gitRepo.warningTooltip.cluster');
+    },
+
+    clusterViewResourceStatus(row) {
+      return row.clusterResourceStatus.find((c) => {
+        return c.metadata?.labels[FLEET.CLUSTER_NAME] === this.clusterId;
+      });
     }
   },
 };
@@ -111,7 +141,7 @@ export default {
       key-field="_key"
       v-on="$listeners"
     >
-      <template #cell:repo="{row}">
+      <template #cell:repo="{ row }">
         <Link
           :row="row"
           :value="row.spec.repo"
@@ -119,6 +149,7 @@ export default {
           before-icon-key="repoIcon"
           url-key="spec.repo"
         />
+        {{ row.cluster }}
         <template v-if="row.commitDisplay">
           <div class="text-muted">
             <Shortened
@@ -130,7 +161,10 @@ export default {
         </template>
       </template>
 
-      <template #cell:clustersReady="{row}">
+      <template
+        v-if="!isClusterView"
+        #cell:clustersReady="{ row }"
+      >
         <span
           v-if="!row.clusterInfo"
           class="text-muted"
@@ -138,7 +172,8 @@ export default {
         <span
           v-else-if="row.clusterInfo.unready"
           class="text-warning"
-        >{{ row.clusterInfo.ready }}/{{ row.clusterInfo.total }}</span>
+        >{{ row.clusterInfo.ready }}/{{
+          row.clusterInfo.total }}</span>
         <span
           v-else
           class="cluster-count-info"
@@ -152,7 +187,7 @@ export default {
         </span>
       </template>
 
-      <template #cell:target="{row}">
+      <template #cell:target="{ row }">
         {{ row.targetInfo.modeDisplay }}
       </template>
     </ResourceTable>

package/components/fleet/FleetResources.vue

@@ -11,7 +11,12 @@ export default {
     value: {
       type:     Object,
       required: true,
-    }
+    },
+    clusterId: {
+      type:     String,
+      required: false,
+      default:  null,
+    },
   },
 
   computed: {

package/components/form/ArrayListSelect.vue

@@ -24,6 +24,10 @@ export default {
     loading: {
       type:    Boolean,
       default: false
+    },
+    disabled: {
+      type:    Boolean,
+      default: true
     }
   },
   computed: {
@@ -34,6 +38,10 @@ export default {
 
     addAllowed() {
       return this.filteredOptions.length > 0;
+    },
+
+    defaultAddValue() {
+      return this.options[0]?.value;
     }
   },
 
@@ -62,6 +70,8 @@ export default {
     class="array-list-select"
     :add-allowed="addAllowed || loading"
     :loading="loading"
+    :defaultAddValue="defaultAddValue"
+    :disabled="disabled"
     @input="$emit('input', $event)"
   >
     <template v-slot:columns="scope">

package/components/form/Error.vue

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

package/components/form/Footer.vue

@@ -1,10 +1,10 @@
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } 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 Vue.extend({
+export default defineComponent({
   components: { AsyncButton, Banner },
 
   props: {

package/components/form/GitPicker.vue

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