@rancher/shell 3.0.12-rc.3 → 3.0.12-rc.4

package/pages/c/_cluster/fleet/application/suse-app-collection/credentials.vue

@@ -0,0 +1,310 @@
+<script setup lang="ts">
+import { computed, ref, onMounted } from 'vue';
+import { useStore } from 'vuex';
+import { useRoute, useRouter } from 'vue-router';
+import { useI18n } from '@shell/composables/useI18n';
+import { AUTH_TYPE, SECRET } from '@shell/config/types';
+import {
+  FLEET_APPCO_AUTH_GENERATE_NAME,
+  createAppCoAuthSecret,
+  ensureAppCoResources,
+} from '@shell/utils/fleet-appco';
+import { CATALOG } from '@shell/config/labels-annotations';
+import { SECRET_TYPES } from '@shell/config/secret';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+import LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';
+import Banner from '@components/Banner/Banner.vue';
+import Loading from '@shell/components/Loading';
+import { RcButton } from '@components/RcButton';
+import AppCoPageHeader from '@shell/components/fleet/AppCoPageHeader.vue';
+
+const ADD_NEW_TOKEN = '__add_new__';
+
+interface SelectOption {
+  label: string;
+  value?: string;
+  disabled?: boolean;
+  kind?: string;
+}
+
+const store = useStore();
+const route = useRoute();
+const router = useRouter();
+const { t } = useI18n(store);
+
+const loading = ref(true);
+const saving = ref(false);
+const createErrors = ref<string[]>([]);
+const selectedSecret = ref('');
+const username = ref('');
+const accessToken = ref('');
+
+const namespace = computed(() => store.getters.workspace);
+
+const existingSecrets = computed(() => {
+  const ns = namespace.value;
+  const allSecrets = store.getters[`${ CATALOG._MANAGEMENT }/all`](SECRET) || [];
+
+  return allSecrets.filter((s: any) => {
+    return s.metadata?.namespace === ns &&
+      s.metadata?.name?.startsWith(FLEET_APPCO_AUTH_GENERATE_NAME) &&
+      s._type === SECRET_TYPES.BASIC;
+  });
+});
+
+const secretOptions = computed(() => {
+  const existing = existingSecrets.value.map((s: any) => {
+    const name = s.metadata.name;
+    const user = s.decodedData?.username || '';
+    const label = user ? `${ name } (HTTP Basic Auth: ${ user })` : `${ name } (HTTP Basic Auth)`;
+
+    return { label, value: name };
+  });
+
+  const out: SelectOption[] = [
+    {
+      label: t('fleet.appCo.credentials.addNewToken'),
+      value: ADD_NEW_TOKEN,
+      kind:  'highlighted',
+    },
+  ];
+
+  if (existing.length) {
+    out.push({
+      label:    'divider',
+      disabled: true,
+      kind:     'divider',
+    });
+    out.push({
+      label:    t('fleet.appCo.credentials.chooseExisting'),
+      disabled: true,
+      kind:     'title',
+    });
+    out.push(...existing);
+  }
+
+  return out;
+});
+
+const isAddNew = computed(() => selectedSecret.value === ADD_NEW_TOKEN);
+const hasNoSecrets = computed(() => !loading.value && existingSecrets.value.length === 0 && !route.query.secret);
+
+const canSave = computed(() => {
+  if (isAddNew.value || hasNoSecrets.value) {
+    return !!username.value && !!accessToken.value;
+  }
+
+  return !!selectedSecret.value;
+});
+
+const originalSecret = (route.query.secret as string) || '';
+
+const cancel = () => {
+  if (originalSecret) {
+    router.push({
+      name:   'c-cluster-fleet-application-appco-charts',
+      params: { cluster: route.params.cluster as string },
+      query:  { secret: originalSecret },
+    });
+  } else {
+    router.push({
+      name:   'c-cluster-fleet-application-create',
+      params: { cluster: route.params.cluster as string },
+    });
+  }
+};
+
+const save = async() => {
+  createErrors.value = [];
+  saving.value = true;
+
+  try {
+    let secretName = selectedSecret.value;
+
+    if (isAddNew.value) {
+      const credentials = {
+        selected:   AUTH_TYPE._BASIC,
+        publicKey:  username.value,
+        privateKey: accessToken.value,
+      };
+
+      const secret = await createAppCoAuthSecret(store, credentials, namespace.value);
+
+      secretName = secret.metadata.name;
+    }
+
+    await ensureAppCoResources(store, secretName, namespace.value, t);
+
+    router.push({
+      name:   'c-cluster-fleet-application-appco-charts',
+      params: { cluster: route.params.cluster as string },
+      query:  { secret: secretName },
+    });
+  } catch (e: unknown) {
+    const msg = e instanceof Error ? e.message : String(e);
+
+    createErrors.value = [msg];
+  } finally {
+    saving.value = false;
+  }
+};
+
+onMounted(async() => {
+  try {
+    if (store.getters[`${ CATALOG._MANAGEMENT }/schemaFor`](SECRET)) {
+      await store.dispatch(`${ CATALOG._MANAGEMENT }/findAll`, { type: SECRET });
+    }
+  } finally {
+    loading.value = false;
+  }
+
+  const querySecret = route.query.secret as string;
+
+  if (querySecret && existingSecrets.value.find((s: any) => s.metadata.name === querySecret)) {
+    selectedSecret.value = querySecret;
+  } else if (existingSecrets.value.length && !querySecret) {
+    router.replace({
+      name:   'c-cluster-fleet-application-appco-charts',
+      params: { cluster: route.params.cluster as string },
+      query:  { secret: existingSecrets.value[0].metadata.name },
+    });
+  } else if (!existingSecrets.value.length) {
+    selectedSecret.value = ADD_NEW_TOKEN;
+  }
+});
+</script>
+
+<template>
+  <Loading v-if="loading" />
+
+  <div
+    v-else
+    class="appco-credentials-page"
+  >
+    <div>
+      <AppCoPageHeader :subtitle="true" />
+
+      <div class="credentials-content">
+        <h2 class="subtitle">
+          {{ t('fleet.appCo.credentials.subtitle') }}
+        </h2>
+
+        <Banner
+          v-for="(err, i) in createErrors"
+          :key="i"
+          color="error"
+          :label="err"
+        />
+
+        <p v-if="hasNoSecrets">
+          {{ t('fleet.appCo.credentials.noTokensYet', {}, true) }}
+        </p>
+
+        <div
+          v-else
+          class="row"
+        >
+          <div class="col span-6">
+            <LabeledSelect
+              v-model:value="selectedSecret"
+              :label="t('fleet.appCo.credentials.accessTokenLabel')"
+              :options="secretOptions"
+              :required="true"
+              :selectable="(option: any) => !option.disabled"
+              data-testid="appco-credentials-select"
+            />
+          </div>
+        </div>
+
+        <template v-if="isAddNew || hasNoSecrets">
+          <div class="row">
+            <div class="col span-6">
+              <LabeledInput
+                v-model:value="username"
+                :label="t('fleet.appCo.credentials.username')"
+                :required="true"
+                :placeholder="t('fleet.appCo.credentials.usernamePlaceholder')"
+                data-testid="appco-credentials-username"
+              />
+            </div>
+          </div>
+          <div class="row">
+            <div class="col span-6">
+              <LabeledInput
+                v-model:value="accessToken"
+                :label="t('fleet.appCo.credentials.accessTokenField')"
+                :required="true"
+                type="multiline"
+                :placeholder="t('fleet.appCo.credentials.accessTokenPlaceholder')"
+                data-testid="appco-credentials-token"
+              />
+            </div>
+          </div>
+          <Banner
+            color="info"
+            :label="t('fleet.helmOp.add.steps.selection.authBanner')"
+          />
+        </template>
+      </div>
+    </div>
+
+    <div class="appco-credentials-page-footer">
+      <hr class="footer-divider">
+      <div class="footer">
+        <RcButton
+          variant="secondary"
+          data-testid="appco-credentials-cancel"
+          size="large"
+          @click="cancel"
+        >
+          {{ t('generic.cancel') }}
+        </RcButton>
+        <RcButton
+          :disabled="!canSave || saving"
+          :loading="saving"
+          data-testid="appco-credentials-save"
+          size="large"
+          @click="save"
+        >
+          {{ t('generic.save') }}
+        </RcButton>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.appco-credentials-page {
+  display: flex;
+  flex-direction: column;
+  min-height: 100%;
+  justify-content: space-between;
+}
+
+.credentials-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-md);
+}
+
+.subtitle {
+  margin: 0;
+}
+
+.footer-divider {
+  border: none;
+  border-top: 1px solid var(--border);
+}
+
+.appco-credentials-page-footer {
+  margin: (-$space-m);
+}
+
+.footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 20px;
+  padding: $space-s $space-m;
+}
+</style>

package/pages/c/_cluster/fleet/index.vue

@@ -775,7 +775,7 @@ export default {
   display: flex;
   align-items: center;
   justify-content: end;
-  gap: 16px;
+  gap: var(--gap-md);
 
   .collapse-all-btn {
     width: 105px;
@@ -977,7 +977,7 @@ export default {
           .resource-cards-container {
             display: grid;
             grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-            gap: 16px;
+            gap: var(--gap-md);
             min-height: 100%;
 
             .resource-card {

package/pages/c/_cluster/uiplugins/__tests__/index.test.ts

@@ -1201,6 +1201,102 @@ describe('page: UI plugins/Extensions', () => {
       expect(all[1].installed).toBe(true);
       expect(all[1].uiplugin).toBe(pluginCR);
     });
+
+    it('should use install-time repo fallback when originalRepoName is undefined', () => {
+      const apps = [{
+        metadata: {
+          name:      'my-plugin',
+          namespace: UI_PLUGIN_NAMESPACE,
+          labels:    {}
+        },
+        spec: { chart: { metadata: { annotations: {} } } }
+      }];
+
+      wireWrapper = createWireWrapper(apps);
+      wireWrapper.vm.installedFromRepo = { 'my-plugin': 'rancher-charts' };
+
+      const all: any[] = [{
+        name:                'my-plugin',
+        chart:               { repoName: 'rancher-charts' },
+        installableVersions: [],
+      }];
+
+      const pluginCR = { name: 'my-plugin', version: '1.0.0' };
+
+      wireWrapper.vm.wirePluginCRToChart(pluginCR, all);
+
+      expect(all).toHaveLength(1);
+      expect(all[0].installed).toBe(true);
+      expect(all[0].uiplugin).toBe(pluginCR);
+      expect(all[0].installedVersion).toBe('1.0.0');
+    });
+
+    it('should preserve certification flags when using install-time repo fallback', () => {
+      const apps = [{
+        metadata: {
+          name:      'my-plugin',
+          namespace: UI_PLUGIN_NAMESPACE,
+          labels:    {}
+        },
+        spec: { chart: { metadata: { annotations: {} } } }
+      }];
+
+      wireWrapper = createWireWrapper(apps);
+      wireWrapper.vm.installedFromRepo = { 'my-plugin': 'rancher-charts' };
+
+      const all: any[] = [{
+        name:                'my-plugin',
+        chart:               { repoName: 'rancher-charts' },
+        certified:           true,
+        primeOnly:           false,
+        experimental:        false,
+        installableVersions: [],
+      }];
+
+      const pluginCR = { name: 'my-plugin', version: '1.0.0' };
+
+      wireWrapper.vm.wirePluginCRToChart(pluginCR, all);
+
+      expect(all).toHaveLength(1);
+      expect(all[0].installed).toBe(true);
+      expect(all[0].certified).toBe(true);
+    });
+
+    it('should not cross-match to wrong repo when using install-time repo fallback with multiple repos', () => {
+      const apps = [{
+        metadata: {
+          name:      'my-plugin',
+          namespace: UI_PLUGIN_NAMESPACE,
+          labels:    {}
+        },
+        spec: { chart: { metadata: { annotations: {} } } }
+      }];
+
+      wireWrapper = createWireWrapper(apps);
+      wireWrapper.vm.installedFromRepo = { 'my-plugin': 'repo-a' };
+
+      const all: any[] = [
+        {
+          name:                'my-plugin',
+          chart:               { repoName: 'repo-a' },
+          installableVersions: [],
+        },
+        {
+          name:                'my-plugin',
+          chart:               { repoName: 'repo-b' },
+          installableVersions: [],
+        }
+      ];
+
+      const pluginCR = { name: 'my-plugin', version: '1.0.0' };
+
+      wireWrapper.vm.wirePluginCRToChart(pluginCR, all);
+
+      expect(all).toHaveLength(2);
+      expect(all[0].installed).toBe(true);
+      expect(all[0].uiplugin).toBe(pluginCR);
+      expect(all[1].installed).toBeUndefined();
+    });
   });
 
   describe('mergePluginErrors', () => {

package/pages/c/_cluster/uiplugins/index.vue

@@ -66,6 +66,7 @@ export default {
       kubeVersion:                    null,
       activeTab:                      '',
       installing:                     {},
+      installedFromRepo:              {},
       errors:                         {},
       plugins:                        [], // The installed plugins
       helmOps:                        [], // Helm operations
@@ -528,6 +529,9 @@ export default {
             this.updatePluginInstallStatus(pluginId, type);
           },
           closed: (res) => {
+            if (res && plugin?.chart?.repoName) {
+              this.installedFromRepo[plugin.name] = plugin.chart.repoName;
+            }
             this.didInstall(res);
           }
         }
@@ -962,6 +966,17 @@ export default {
         chart = all.find((c) => c.name === pluginCR.name && c.chart?.repoName === originalRepoName);
       }
 
+      // fallback to try and prevent https://github.com/rancher/dashboard/issues/17956
+      // which we believe is due to a race condition
+      // we fall back to plugin name which should be present when going through the "installed plugins" (uiplugins) and should be enough to find the correct chart in the majority of cases, as long as there are not multiple charts with the same name across different repos
+      if (!chart) {
+        const fallbackRepoName = this.installedFromRepo?.[pluginCR.name];
+
+        if (fallbackRepoName) {
+          chart = all.find((c) => c.name === pluginCR.name && c.chart?.repoName === fallbackRepoName);
+        }
+      }
+
       if (chart) {
         chart.installed = true;
         chart.uiplugin = pluginCR;

package/pages/fail-whale.vue

@@ -8,11 +8,12 @@ import FixedBanner from '@shell/components/FixedBanner';
 import GrowlManager from '@shell/components/GrowlManager';
 import BrowserTabVisibility from '@shell/mixins/browser-tab-visibility';
 import PromptModal from '@shell/components/PromptModal';
+import { RcButton } from '@components/RcButton';
 
 export default {
 
   components: {
-    BrandImage, FixedBanner, GrowlManager, Header, PromptModal
+    BrandImage, FixedBanner, GrowlManager, Header, PromptModal, RcButton
   },
   mixins: [Brand, BrowserTabVisibility],
 
@@ -61,10 +62,13 @@ export default {
 
 <template>
   <div class="dashboard-root">
-    <a
-      href="#main-content"
-      class="skip-to-content btn role-primary"
-    >{{ t('nav.skipToContent') }}</a>
+    <rc-button
+      size="large"
+      class="skip-to-content"
+      :to="{ hash: '#main-content' }"
+    >
+      {{ t('nav.skipToContent') }}
+    </rc-button>
     <FixedBanner :header="true" />
     <PromptModal />
     <div
@@ -106,12 +110,12 @@ export default {
                 {{ displayError }}
               </h2>
               <p class="mt-20">
-                <a
+                <rc-button
+                  size="large"
                   :href="home"
-                  class="btn role-primary"
                 >
                   {{ t('nav.home') }}
-                </a>
+                </rc-button>
               </p>
               <hr
                 class="custom-content"
@@ -119,12 +123,13 @@ export default {
                 role="none"
               >
               <p class="mt-20">
-                <a
-                  class="btn role-secondary"
+                <rc-button
+                  size="large"
+                  variant="secondary"
                   @click="$router.push(previousRoute.fullPath)"
                 >
                   {{ t('nav.failWhale.reload') }}
-                </a>
+                </rc-button>
               </p>
             </div>
           </div>

package/pages/home.vue

@@ -35,6 +35,7 @@ import Preset from '@shell/mixins/preset';
 import { PaginationFeatureHomePageClusterConfig } from '@shell/types/resources/settings';
 import MgmtCluster from '@shell/models/management.cattle.io.cluster';
 import ManagementClusterUtils from '@shell/list/utils/management.cattle.io.cluster.utils';
+import { RcButton } from '@components/RcButton';
 
 export default defineComponent({
   name:       'Home',
@@ -50,6 +51,7 @@ export default defineComponent({
     ResourceTable,
     DynamicContentBanner,
     DynamicContentPanel,
+    RcButton
   },
 
   mixins: [PageHeaderActions, Preset],
@@ -504,39 +506,31 @@ export default defineComponent({
                   #header-middle
                 >
                   <div class="table-heading">
-                    <router-link
+                    <rc-button
                       v-if="!!provClusterSchema"
+                      variant="secondary"
                       :to="manageLocation"
-                      class="btn btn-sm role-secondary"
                       data-testid="cluster-management-manage-button"
-                      role="button"
                       :aria-label="t('cluster.manageAction')"
-                      @keyup.space="$router.push(manageLocation)"
                     >
                       {{ t('cluster.manageAction') }}
-                    </router-link>
-                    <router-link
+                    </rc-button>
+                    <rc-button
                       v-if="canCreateCluster"
                       :to="importLocation"
-                      class="btn btn-sm role-primary"
                       data-testid="cluster-create-import-button"
-                      role="button"
                       :aria-label="t('cluster.importAction')"
-                      @keyup.space="$router.push(importLocation)"
                     >
                       {{ t('cluster.importAction') }}
-                    </router-link>
-                    <router-link
+                    </rc-button>
+                    <rc-button
                       v-if="canCreateCluster"
                       :to="createLocation"
-                      class="btn btn-sm role-primary"
                       data-testid="cluster-create-button"
-                      role="button"
                       :aria-label="t('generic.create')"
-                      @keyup.space="$router.push(createLocation)"
                     >
                       {{ t('generic.create') }}
-                    </router-link>
+                    </rc-button>
                   </div>
                 </template>
                 <template #col:name="{row}">
@@ -604,14 +598,6 @@ export default defineComponent({
                     &mdash;
                   </td>
                 </template>
-                <!-- <template #cell:explorer="{row}">
-                    <router-link v-if="row && row.isReady" class="btn btn-sm role-primary" :to="{name: 'c-cluster', params: {cluster: row.id}}">
-                      {{ t('landing.clusters.explore') }}
-                    </router-link>
-                    <button v-else :disabled="true" class="btn btn-sm role-primary">
-                      {{ t('landing.clusters.explore') }}
-                    </button>
-                  </template> -->
               </ResourceTable>
             </div>
             <div
@@ -665,39 +651,31 @@ export default defineComponent({
                   #header-middle
                 >
                   <div class="table-heading">
-                    <router-link
+                    <rc-button
                       v-if="!!provClusterSchema"
+                      variant="secondary"
                       :to="manageLocation"
-                      class="btn btn-sm role-secondary"
                       data-testid="cluster-management-manage-button"
-                      role="button"
                       :aria-label="t('cluster.manageAction')"
-                      @keyup.space="$router.push(manageLocation)"
                     >
                       {{ t('cluster.manageAction') }}
-                    </router-link>
-                    <router-link
+                    </rc-button>
+                    <rc-button
                       v-if="canCreateCluster"
                       :to="importLocation"
-                      class="btn btn-sm role-primary"
                       data-testid="cluster-create-import-button"
-                      role="button"
                       :aria-label="t('cluster.importAction')"
-                      @keyup.space="$router.push(importLocation)"
                     >
                       {{ t('cluster.importAction') }}
-                    </router-link>
-                    <router-link
+                    </rc-button>
+                    <rc-button
                       v-if="canCreateCluster"
                       :to="createLocation"
-                      class="btn btn-sm role-primary"
                       data-testid="cluster-create-button"
-                      role="button"
                       :aria-label="t('generic.create')"
-                      @keyup.space="$router.push(createLocation)"
                     >
                       {{ t('generic.create') }}
-                    </router-link>
+                    </rc-button>
                   </div>
                 </template>
                 <template #col:name="{row}">
@@ -748,14 +726,6 @@ export default defineComponent({
                     &mdash;
                   </td>
                 </template>
-                <!-- <template #cell:explorer="{row}">
-                  <router-link v-if="row && row.isReady" class="btn btn-sm role-primary" :to="{name: 'c-cluster', params: {cluster: row.id}}">
-                    {{ t('landing.clusters.explore') }}
-                  </router-link>
-                  <button v-else :disabled="true" class="btn btn-sm role-primary">
-                    {{ t('landing.clusters.explore') }}
-                  </button>
-                </template> -->
               </PaginatedResourceTable>
             </div>
             <div

package/plugins/clean-html.d.ts

@@ -0,0 +1,9 @@
+import { Config } from 'dompurify';
+
+export function purifyHTML(value: string, options?: Config): string;
+
+export function addLinkInterceptor(fn: (link: string) => string | undefined | void, name?: string): void;
+
+export function removeLinkInterceptor(fn: (link: string) => string | undefined | void): void;
+
+export function processLink(link: string): string;