@rancher/shell 3.0.12-rc.2 → 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/istio/__tests__/istio.index.test.ts

@@ -0,0 +1,194 @@
+import { nextTick } from 'vue';
+import { shallowMount } from '@vue/test-utils';
+import IstioOverview from '@shell/pages/c/_cluster/istio/index.vue';
+import { SERVICE } from '@shell/config/types';
+import Loading from '@shell/components/Loading';
+
+const createMockService = (name: string, namespace: string, label: string, proxyUrlReturn: string) => ({
+  id:       `${ namespace }/${ name }`,
+  type:     'service',
+  metadata: {
+    name,
+    namespace,
+    labels: { app: label },
+  },
+  proxyUrl: jest.fn(() => proxyUrlReturn),
+});
+
+describe('page: IstioOverview', () => {
+  const createWrapper = (overrides: Record<string, any> = {}) => {
+    const mockDispatch = jest.fn();
+    const mockSchemaFor = jest.fn();
+    const mockResolve = jest.fn(() => ({ href: '/c/_/monitoring' }));
+
+    const defaultMocks = {
+      $fetchState: { pending: false },
+      $store:      {
+        dispatch: mockDispatch,
+        getters:  {
+          'prefs/theme':       'dark',
+          'i18n/t':            (key: string) => key,
+          'cluster/schemaFor': mockSchemaFor,
+        },
+      },
+      $route:  { params: { cluster: '_' } },
+      $router: { resolve: mockResolve },
+    };
+
+    const wrapper = shallowMount(IstioOverview, {
+      global: {
+        mocks:      { ...defaultMocks, ...(overrides.mocks || {}) },
+        directives: { 'clean-html': () => {} },
+        stubs:      { t: true, ...(overrides.stubs || {}) },
+      },
+    });
+
+    return {
+      wrapper, mockDispatch, mockSchemaFor, mockResolve
+    };
+  };
+
+  describe('fetch', () => {
+    it('dispatches findLabelSelector for kiali with correct label selector', async() => {
+      const { wrapper, mockDispatch, mockSchemaFor } = createWrapper();
+
+      mockSchemaFor.mockReturnValue({});
+      mockDispatch.mockResolvedValue({ data: [] });
+
+      await (IstioOverview as any).fetch.call(wrapper.vm);
+
+      expect(mockDispatch).toHaveBeenCalledWith('cluster/findLabelSelector', {
+        type:     SERVICE,
+        matching: { labelSelector: { matchLabels: { app: 'kiali' } } },
+        opt:      { transient: true },
+      });
+    });
+
+    it('dispatches findLabelSelector for jaeger with correct label selector', async() => {
+      const { wrapper, mockDispatch, mockSchemaFor } = createWrapper();
+
+      mockSchemaFor.mockReturnValue({});
+      mockDispatch.mockResolvedValue({ data: [] });
+
+      await (IstioOverview as any).fetch.call(wrapper.vm);
+
+      expect(mockDispatch).toHaveBeenCalledWith('cluster/findLabelSelector', {
+        type:     SERVICE,
+        matching: { labelSelector: { matchLabels: { app: 'jaeger' } } },
+        opt:      { transient: true },
+      });
+    });
+
+    it('sets kialiService and jaegerService from response data', async() => {
+      const mockKiali = createMockService('kiali', 'istio-system', 'kiali', '/proxy/kiali');
+      const mockJaeger = createMockService('jaeger-query', 'istio-system', 'jaeger', '/proxy/jaeger');
+      const { wrapper, mockDispatch, mockSchemaFor } = createWrapper();
+
+      mockSchemaFor.mockReturnValue({});
+      mockDispatch
+        .mockResolvedValueOnce({ data: [mockKiali] })
+        .mockResolvedValueOnce({ data: [mockJaeger] });
+
+      await (IstioOverview as any).fetch.call(wrapper.vm);
+
+      expect(wrapper.vm.kialiService).toStrictEqual(mockKiali);
+      expect(wrapper.vm.jaegerService).toStrictEqual(mockJaeger);
+    });
+
+    it('skips dispatches when schemaFor returns falsy', async() => {
+      const { wrapper, mockDispatch, mockSchemaFor } = createWrapper();
+
+      mockSchemaFor.mockReturnValue(null);
+
+      await (IstioOverview as any).fetch.call(wrapper.vm);
+
+      expect(mockDispatch).not.toHaveBeenCalledWith('cluster/findLabelSelector', expect.anything());
+      expect(wrapper.vm.kialiService).toBeNull();
+      expect(wrapper.vm.jaegerService).toBeNull();
+    });
+
+    it('sets services to null when response data is empty', async() => {
+      const { wrapper, mockDispatch, mockSchemaFor } = createWrapper();
+
+      mockSchemaFor.mockReturnValue({});
+      mockDispatch.mockResolvedValue({ data: [] });
+
+      await (IstioOverview as any).fetch.call(wrapper.vm);
+
+      expect(wrapper.vm.kialiService).toBeNull();
+      expect(wrapper.vm.jaegerService).toBeNull();
+    });
+  });
+
+  describe('computed properties', () => {
+    it('kialiUrl returns null when kialiService is null', () => {
+      const { wrapper } = createWrapper();
+
+      expect(wrapper.vm.kialiUrl).toBeNull();
+    });
+
+    it('kialiUrl calls proxyUrl with correct arguments when service exists', async() => {
+      const mockKiali = createMockService('kiali', 'istio-system', 'kiali', '/proxy/kiali');
+      const { wrapper } = createWrapper();
+
+      wrapper.setData({ kialiService: mockKiali });
+      await nextTick();
+
+      expect(wrapper.vm.kialiUrl).toStrictEqual('/proxy/kiali');
+      expect(mockKiali.proxyUrl).toHaveBeenCalledWith('http', '20001');
+    });
+
+    it('jaegerUrl returns null when jaegerService is null', () => {
+      const { wrapper } = createWrapper();
+
+      expect(wrapper.vm.jaegerUrl).toBeNull();
+    });
+
+    it('jaegerUrl calls proxyUrl with correct arguments and appends /jaeger/search', async() => {
+      const mockJaeger = createMockService('jaeger-query', 'istio-system', 'jaeger', '/proxy/jaeger');
+      const { wrapper } = createWrapper();
+
+      wrapper.setData({ jaegerService: mockJaeger });
+      await nextTick();
+
+      expect(wrapper.vm.jaegerUrl).toStrictEqual('/proxy/jaeger/jaeger/search');
+      expect(mockJaeger.proxyUrl).toHaveBeenCalledWith('http', '16686');
+    });
+  });
+
+  describe('template rendering', () => {
+    it('shows Loading component when fetchState is pending', () => {
+      const { wrapper } = createWrapper({ mocks: { $fetchState: { pending: true } } });
+
+      expect(wrapper.findComponent(Loading).exists()).toBe(true);
+      expect(wrapper.find('.links').exists()).toBe(false);
+    });
+
+    it('shows disabled state when service URLs are null', () => {
+      const { wrapper } = createWrapper();
+      const containers = wrapper.findAll('.link-container');
+
+      expect(containers).toHaveLength(2);
+      containers.forEach((container) => {
+        expect(container.classes()).toContain('disabled');
+      });
+      expect(wrapper.findAll('.disabled-msg')).toHaveLength(2);
+    });
+
+    it('hides disabled state when services are set', async() => {
+      const mockKiali = createMockService('kiali', 'istio-system', 'kiali', '/proxy/kiali');
+      const mockJaeger = createMockService('jaeger-query', 'istio-system', 'jaeger', '/proxy/jaeger');
+      const { wrapper } = createWrapper();
+
+      wrapper.setData({ kialiService: mockKiali, jaegerService: mockJaeger });
+      await nextTick();
+
+      const containers = wrapper.findAll('.link-container');
+
+      containers.forEach((container) => {
+        expect(container.classes()).not.toContain('disabled');
+      });
+      expect(wrapper.findAll('.disabled-msg')).toHaveLength(0);
+    });
+  });
+});

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

@@ -8,12 +8,27 @@ export default {
   components: { Loading },
 
   async fetch() {
-    try {
-      this.kialiService = await this.$store.dispatch('cluster/find', { type: SERVICE, id: 'istio-system/kiali' });
-    } catch {}
-    try {
-      this.jaegerService = await this.$store.dispatch('cluster/find', { type: SERVICE, id: 'istio-system/tracing' });
-    } catch {}
+    if (this.$store.getters['cluster/schemaFor'](SERVICE)) {
+      try {
+        const kialiResponse = await this.$store.dispatch('cluster/findLabelSelector', {
+          type:     SERVICE,
+          matching: { labelSelector: { matchLabels: { app: 'kiali' } } },
+          opt:      { transient: true }
+        });
+
+        this.kialiService = kialiResponse.data?.[0] || null;
+      } catch {}
+
+      try {
+        const jaegerResponse = await this.$store.dispatch('cluster/findLabelSelector', {
+          type:     SERVICE,
+          matching: { labelSelector: { matchLabels: { app: 'jaeger' } } },
+          opt:      { transient: true }
+        });
+
+        this.jaegerService = jaegerResponse.data?.[0] || null;
+      } catch {}
+    }
   },
 
   data() {

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

@@ -385,6 +385,7 @@ export default {
                   v-for="btn in panelActions"
                   :key="btn.action"
                   class="mmr-3 mmb-3"
+                  size="large"
                   :variant="btn.role"
                   @click="onButtonClick(btn)"
                 >