@rancher/shell 3.0.9-rc.5 → 3.0.9-rc.6

package/components/Resource/Detail/Metadata/IdentifyingInformation/__tests__/identifying-fields.test.ts

@@ -6,7 +6,12 @@ import { NAME as FLEET_NAME } from '@shell/config/product/fleet';
 
 const mockStore = {
   getters: {
-    productId: 'PRODUCT_ID', clusterId: 'CLUSTER_ID', 'type-map/optionsFor': jest.fn(), currentCluster: 'CLUSTER_ID'
+    productId:             'PRODUCT_ID',
+    clusterId:             'CLUSTER_ID',
+    'type-map/optionsFor': jest.fn(),
+    currentCluster:        'CLUSTER_ID',
+    currentStore:          () => 'cluster',
+    'cluster/canList':     () => true,
   }
 };
 const mockRoute = { params: { cluster: 'CLUSTER', namespace: 'NAMESPACE' } };
@@ -32,7 +37,8 @@ describe('composables: IdentifyingFields', () => {
       expect(result).toBeUndefined();
     });
 
-    it('should return a valid namespace row', () => {
+    it('should return a valid namespace row with ResourcePopover when user canList namespaces', () => {
+      mockStore.getters['cluster/canList'] = () => true;
       const resource = { namespace: 'NAMESPACE' };
       const result = useNamespace(resource);
 
@@ -42,6 +48,17 @@ describe('composables: IdentifyingFields', () => {
       expect(result?.value.label).toStrictEqual('component.resource.detail.metadata.identifyingInformation.namespace');
       expect(result?.value.valueDataTestid).toStrictEqual('masthead-subheader-namespace');
     });
+
+    it('should return a plain text namespace row when user cannot canList namespaces', () => {
+      mockStore.getters['cluster/canList'] = () => false;
+      const resource = { namespace: 'NAMESPACE' };
+      const result = useNamespace(resource);
+
+      expect(result?.value.valueOverride).toBeUndefined();
+      expect(result?.value.value).toStrictEqual(resource.namespace);
+      expect(result?.value.label).toStrictEqual('component.resource.detail.metadata.identifyingInformation.namespace');
+      expect(result?.value.valueDataTestid).toStrictEqual('masthead-subheader-namespace');
+    });
   });
 
   describe('useWorkspace', () => {

package/components/Resource/Detail/Metadata/IdentifyingInformation/identifying-fields.ts

@@ -24,18 +24,26 @@ export const useNamespace = (resource: any): ComputedRef<Row> | undefined => {
   }
 
   return computed(() => {
-    return {
-      label:           i18n.t('component.resource.detail.metadata.identifyingInformation.namespace'),
-      value:           resourceValue.namespace,
-      valueDataTestid: 'masthead-subheader-namespace',
-      valueOverride:   {
-        component: markRaw(defineAsyncComponent(() => import('@shell/components/Resource/Detail/ResourcePopover/index.vue'))),
-        props:     {
-          type:           NAMESPACE,
-          id:             resourceValue.namespace,
-          detailLocation: resourceValue.namespaceLocation
-        }
+    const currentStore = store.getters['currentStore'](NAMESPACE);
+    const canList = store.getters[`${ currentStore }/canList`](NAMESPACE);
+
+    const label = i18n.t('component.resource.detail.metadata.identifyingInformation.namespace');
+    const value = resourceValue.namespace;
+    const valueDataTestid = 'masthead-subheader-namespace';
+    const valueOverride = canList ? {
+      component: markRaw(defineAsyncComponent(() => import('@shell/components/Resource/Detail/ResourcePopover/index.vue'))),
+      props:     {
+        type:           NAMESPACE,
+        id:             resourceValue.namespace,
+        detailLocation: resourceValue.namespaceLocation
       }
+    } : undefined;
+
+    return {
+      label,
+      value,
+      valueDataTestid,
+      valueOverride,
     };
   });
 };

package/components/Resource/Detail/ResourcePopover/__tests__/index.test.ts

@@ -79,6 +79,18 @@ describe('component: ResourcePopover/index.vue', () => {
       expect(wrapper.find('.display').exists()).toBe(false);
     });
 
+    it('should show plain text and no PopoverCard when fetch fails', async() => {
+      mockClusterFind.mockRejectedValue(new Error('Not found'));
+      const wrapper = createWrapper(undefined, undefined, PopoverCardStub);
+
+      await wrapper.vm.$nextTick();
+      await wrapper.vm.$nextTick();
+      await wrapper.vm.$nextTick();
+
+      expect(wrapper.findComponent(PopoverCard).exists()).toBe(false);
+      expect(wrapper.text()).toBe('test-ns/test-pod');
+    });
+
     it('should fetch data using the default store', async() => {
       const wrapper = createWrapper();
 

package/components/Resource/Detail/ResourcePopover/index.vue

@@ -58,6 +58,7 @@ const actionInvoked = () => {
 
 <template>
   <PopoverCard
+    v-if="!fetch.error"
     class="resource-popover"
     :card-title="nameDisplay"
     fallback-focus="[data-testid='resource-popover-action-menu']"
@@ -104,6 +105,7 @@ const actionInvoked = () => {
       />
     </template>
   </PopoverCard>
+  <span v-else>{{ props.id }}</span>
 </template>
 
 <style lang="scss" scoped>

package/components/Resource/Detail/ResourceRow.vue

@@ -47,7 +47,7 @@ const displayCounts = computed(() => {
       </SubtleLink>
       <span
         v-else
-        class="text-muted"
+        class="text-deemphasized"
       >
         {{ label }}
       </span>
@@ -55,7 +55,7 @@ const displayCounts = computed(() => {
     <div class="right">
       <div
         v-if="!counts || counts.length == 0"
-        class="text-muted"
+        class="text-deemphasized"
       >
         0
       </div>

package/components/ResourceList/index.vue

@@ -87,11 +87,14 @@ export default {
   },
 
   beforeMount() {
-    const inStore = this.$store.getters['currentStore'](this.resource);
-    const canList = this.$store.getters[`${ inStore }/canList`](this.resource);
+    if (!this.hasListComponent) {
+      // If a list doesn't have a list component confirm via schema that the resource is listable
+      const inStore = this.$store.getters['currentStore'](this.resource);
+      const canList = this.$store.getters[`${ inStore }/canList`](this.resource);
 
-    if (!canList) {
-      this.$store.dispatch('loadingError', new Error(this.t('nav.failWhale.resourceListNotListable', { resource: this.schema.id }, true)));
+      if (!canList) {
+        this.$store.dispatch('loadingError', new Error(this.t('nav.failWhale.resourceListNotListable', { resource: this.schema?.id || this.resource || 'unknown' }, true)));
+      }
     }
   },
 

package/components/Window/ContainerLogs.vue

@@ -13,7 +13,6 @@ import LogItem from '@shell/components/LogItem';
 import ContainerLogsActions from '@shell/components/Window/ContainerLogsActions.vue';
 import { shallowRef } from 'vue';
 import { useStore } from 'vuex';
-import { debounce } from 'lodash';
 import { useRuntimeFlag } from '@shell/composables/useRuntimeFlag';
 
 import { escapeRegex } from '@shell/utils/string';
@@ -110,12 +109,6 @@ export default {
       required: true,
     },
 
-    // The height of the window
-    height: {
-      type:     Number,
-      required: true,
-    },
-
     // The pod to connect to
     pod: {
       type:     Object,
@@ -147,7 +140,6 @@ export default {
       socket:              null,
       isOpen:              false,
       isFollowing:         true,
-      scrollThreshold:     80,
       timestamps:          this.$store.getters['prefs/get'](LOGS_TIME),
       wrap:                this.$store.getters['prefs/get'](LOGS_WRAP),
       previous:            false,
@@ -290,18 +282,6 @@ export default {
     container() {
       this.connect();
     },
-
-    lines: {
-      handler() {
-        if (this.isFollowing) {
-          this.$nextTick(() => {
-            this.follow();
-          });
-        }
-      },
-      deep: true
-    }
-
   },
 
   beforeUnmount() {
@@ -315,6 +295,35 @@ export default {
   },
 
   methods: {
+    onScrollToBottom() {
+      this.startFollowing();
+    },
+
+    onMouseWheel(ev) {
+      // On scroll up stop following
+      if (ev.deltaY < 0) {
+        this.stopFollowing();
+      }
+    },
+
+    onMouseDown() {
+      this.stopFollowing();
+    },
+
+    onMouseUp() {
+      const virtualList = this.$refs.virtualList;
+
+      if (!virtualList) {
+        return;
+      }
+
+      const isVirtualListScrolledToBottom = virtualList.getOffset() + virtualList.getClientSize() >= virtualList.getScrollSize();
+
+      if (isVirtualListScrolledToBottom) {
+        this.startFollowing();
+      }
+    },
+
     openContainerMenu() {
       this.isContainerMenuOpen = true;
     },
@@ -451,22 +460,21 @@ export default {
         if (maxLines && this.lines.length > maxLines) {
           this.lines = this.lines.slice(-maxLines);
         }
+
+        this.$nextTick(() => {
+          this.follow();
+        });
       }
     },
 
-    updateFollowing: debounce(function() {
-      const virtualList = this.$refs.virtualList;
-
-      if (virtualList) {
-        const scrollSize = virtualList.getScrollSize();
-        const clientSize = virtualList.getClientSize();
-        const offset = virtualList.getOffset();
-
-        const distanceFromBottom = scrollSize - clientSize - offset;
+    stopFollowing() {
+      this.isFollowing = false;
+    },
 
-        this.isFollowing = distanceFromBottom <= this.scrollThreshold;
-      }
-    }, 100),
+    startFollowing() {
+      this.isFollowing = true;
+      this.follow();
+    },
 
     parseRange(range) {
       range = `${ range }`.trim().toLowerCase();
@@ -537,9 +545,8 @@ export default {
     follow() {
       const virtualList = this.$refs.virtualList;
 
-      if (virtualList) {
-        virtualList.scrollToBottom();
-        this.isFollowing = true;
+      if (virtualList && this.isFollowing) {
+        virtualList.scrollToOffset(virtualList.getScrollSize());
       }
     },
 
@@ -607,7 +614,7 @@ export default {
             :aria-label="t('wm.containerLogs.follow')"
             :aria-disabled="isFollowing"
             :disabled="isFollowing"
-            @click="follow"
+            @click="startFollowing"
           >
             <t
               class="wm-btn-large"
@@ -762,7 +769,11 @@ export default {
           :data-component="logItem"
           direction="vertical"
           :keeps="200"
-          @scroll="updateFollowing"
+          :bottom-threshold="200"
+          @tobottom="onScrollToBottom"
+          @wheel.passive="onMouseWheel"
+          @mousedown="onMouseDown"
+          @mouseup="onMouseUp"
         />
         <template v-if="!filtered.length">
           <div v-if="search">

package/components/fleet/FleetClusterTargets/TargetsList.vue

@@ -67,13 +67,13 @@ export default {
     flex-direction: column;
   }
   .targets-list-list {
-    overflow-y: scroll;
+    overflow-y: auto;
   }
   .link-main{
     word-spacing: 22px;
+    line-height: 17px; // To fit the icon size and make sure it doesnt resize
   }
   .link-icon {
-    position: absolute;
     margin-left: -14px; // Remove the space of the icon to make it float to accomodate the underline
     display: none; // Make the icon disappear by default
   }

package/components/fleet/FleetClusterTargets/index.vue

@@ -406,7 +406,10 @@ export default {
         :placeholder="t('fleet.clusterTargets.clusters.byName.placeholder')"
         @update:value="selectClusters"
       />
-      <div class="mmt-6">
+      <div
+        v-if="!isView || (clusterSelectors && clusterSelectors.length > 0)"
+        class="mmt-6"
+      >
         <h4 class="m-0">
           {{ t('fleet.clusterTargets.clusters.byLabel.title') }}
         </h4>
@@ -427,6 +430,7 @@ export default {
             @update:value="updateMatchExpressions(i, $event, selector.key)"
           />
           <RcButton
+            v-if="!isView"
             size="small"
             variant="link"
             @click="removeMatchExpressions(selector.key)"
@@ -435,6 +439,7 @@ export default {
           </RcButton>
         </div>
         <RcButton
+          v-if="!isView"
           size="small"
           variant="secondary"
           class="mmt-4"

package/components/fleet/GitRepoAdvancedTab.vue

@@ -0,0 +1,333 @@
+<script setup>
+import { useStore } from 'vuex';
+import { useI18n } from '@shell/composables/useI18n';
+import { Banner } from '@components/Banner';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+import SelectOrCreateAuthSecret from '@shell/components/form/SelectOrCreateAuthSecret';
+import Checkbox from '@components/Form/Checkbox/Checkbox.vue';
+import UnitInput from '@shell/components/form/UnitInput';
+import FleetOCIStorageSecret from '@shell/components/fleet/FleetOCIStorageSecret.vue';
+
+defineProps({
+  value: {
+    type:     Object,
+    required: true
+  },
+  mode: {
+    type:     String,
+    required: true
+  },
+  isView: {
+    type:    Boolean,
+    default: false
+  },
+  workspace: {
+    type:     String,
+    required: true
+  },
+  tlsMode: {
+    type:     String,
+    required: true
+  },
+  tlsOptions: {
+    type:     Array,
+    required: true
+  },
+  caBundle: {
+    type:    String,
+    default: null
+  },
+  isTls: {
+    type:     Boolean,
+    required: true
+  },
+  displayHelmRepoUrlRegex: {
+    type:     Boolean,
+    required: true
+  },
+  tempCachedValues: {
+    type:     Object,
+    required: true
+  },
+  correctDriftEnabled: {
+    type:     Boolean,
+    required: true
+  },
+  pollingInterval: {
+    type:     Number,
+    required: false,
+    default:  undefined
+  },
+  showPollingIntervalWarning: {
+    type:     Boolean,
+    required: true
+  },
+  specifyOption: {
+    type:     String,
+    required: true
+  },
+  registerBeforeHook: {
+    type:     Function,
+    required: true
+  },
+  isGithubDotComRepository: {
+    type:     Boolean,
+    required: true,
+  },
+  isBasicAuthSelected: {
+    type:     Boolean,
+    required: true,
+  }
+});
+
+const emit = defineEmits([
+  'update:tls-mode',
+  'update:ca-bundle',
+  'update:auth',
+  'update:cached-auth',
+  'update:correct-drift',
+  'update:polling-enabled',
+  'update:polling-interval',
+  'update:validate-polling-interval',
+]);
+
+const store = useStore();
+const { t } = useI18n(store);
+
+const updateTlsMode = (event) => {
+  emit('update:tls-mode', event);
+};
+
+const updateCaBundle = (value) => {
+  emit('update:ca-bundle', value);
+};
+
+const updateAuth = (val, key) => {
+  emit('update:auth', { value: val, key });
+};
+
+const updateCachedAuthVal = (val, key) => {
+  emit('update:cached-auth', { value: val, key });
+};
+
+const updateCorrectDrift = (value) => {
+  emit('update:correct-drift', value);
+};
+
+const enablePolling = (value) => {
+  emit('update:polling-enabled', value);
+};
+
+const updatePollingInterval = (value) => {
+  emit('update:polling-interval', value);
+};
+
+const validatePollingInterval = () => {
+  emit('update:validate-polling-interval');
+};
+</script>
+
+<template>
+  <div>
+    <Banner
+      v-if="!isView"
+      color="info"
+      label-key="fleet.gitRepo.add.steps.advanced.info"
+      data-testid="gitrepo-advanced-info"
+    />
+
+    <h2>{{ t('fleet.gitRepo.auth.title') }}</h2>
+    <Banner
+      v-if="isGithubDotComRepository && isBasicAuthSelected"
+      color="warning"
+      label-key="fleet.gitRepo.auth.githubdotcomPasswordBanner"
+      data-testid="gitrepo-githubdotcom-password-warning"
+    />
+    <SelectOrCreateAuthSecret
+      data-testid="gitrepo-git-auth"
+      :value="value.spec.clientSecretName"
+      :register-before-hook="registerBeforeHook"
+      :namespace="value.metadata.namespace"
+      :delegate-create-to-parent="true"
+      in-store="management"
+      :pre-select="tempCachedValues.clientSecretName"
+      :mode="mode"
+      generate-name="gitrepo-auth-"
+      label-key="fleet.gitRepo.auth.git"
+      :cache-secrets="true"
+      :show-ssh-known-hosts="true"
+      :is-github-dot-com-repository="isGithubDotComRepository"
+      @update:value="updateAuth($event, 'clientSecretName')"
+      @inputauthval="updateCachedAuthVal($event, 'clientSecretName')"
+    />
+    <SelectOrCreateAuthSecret
+      data-testid="gitrepo-helm-auth"
+      :value="value.spec.helmSecretName"
+      :register-before-hook="registerBeforeHook"
+      :namespace="value.metadata.namespace"
+      :delegate-create-to-parent="true"
+      in-store="management"
+      :mode="mode"
+      generate-name="helmrepo-auth-"
+      label-key="fleet.gitRepo.auth.helm"
+      :pre-select="tempCachedValues.helmSecretName"
+      :cache-secrets="true"
+      :show-ssh-known-hosts="true"
+      @update:value="updateAuth($event, 'helmSecretName')"
+      @inputauthval="updateCachedAuthVal($event, 'helmSecretName')"
+    />
+
+    <div
+      v-if="displayHelmRepoUrlRegex"
+      class="row mt-20"
+    >
+      <div
+        class="col span-6"
+        data-testid="gitrepo-helm-repo-url-regex"
+      >
+        <LabeledInput
+          v-model:value="value.spec.helmRepoURLRegex"
+          :mode="mode"
+          label-key="fleet.gitRepo.helmRepoURLRegex"
+        />
+      </div>
+    </div>
+
+    <template v-if="isTls">
+      <div class="row mt-20">
+        <div class="col span-6">
+          <LabeledSelect
+            :label="t('fleet.gitRepo.tls.label')"
+            :mode="mode"
+            :value="tlsMode"
+            :options="tlsOptions"
+            @update:value="updateTlsMode($event)"
+          />
+        </div>
+        <div
+          v-if="tlsMode === specifyOption"
+          class="col span-6"
+        >
+          <LabeledInput
+            :value="caBundle"
+            :mode="mode"
+            type="multiline"
+            label-key="fleet.gitRepo.caBundle.label"
+            placeholder-key="fleet.gitRepo.caBundle.placeholder"
+            @update:value="updateCaBundle"
+          />
+        </div>
+      </div>
+    </template>
+    <div class="spacer" />
+
+    <h2>
+      {{ t('fleet.gitRepo.ociStorageSecret.title') }}
+    </h2>
+    <div class="row mt-20">
+      <div class="col span-6">
+        <FleetOCIStorageSecret
+          :secret="value.spec.ociRegistrySecret"
+          :workspace="workspace"
+          :mode="mode"
+          @update:value="value.spec.ociRegistrySecret=$event"
+        />
+      </div>
+    </div>
+    <div class="spacer" />
+
+    <h2>
+      {{ t('fleet.gitRepo.resources.label') }}
+    </h2>
+    <div class="resource-handling">
+      <Checkbox
+        :value="correctDriftEnabled"
+        :tooltip="t('fleet.gitRepo.resources.correctDriftTooltip')"
+        data-testid="gitRepo-correctDrift-checkbox"
+        class="check"
+        type="checkbox"
+        label-key="fleet.gitRepo.resources.correctDrift"
+        :mode="mode"
+        @update:value="updateCorrectDrift"
+      />
+      <Checkbox
+        v-model:value="value.spec.keepResources"
+        :tooltip="t('fleet.gitRepo.resources.keepResourcesTooltip')"
+        data-testid="gitRepo-keepResources-checkbox"
+        class="check"
+        type="checkbox"
+        label-key="fleet.gitRepo.resources.keepResources"
+        :mode="mode"
+      />
+    </div>
+
+    <div class="spacer" />
+    <h2>
+      {{ t('fleet.gitRepo.polling.label') }}
+    </h2>
+    <div class="row polling">
+      <div class="col span-6">
+        <Checkbox
+          :value="value.isPollingEnabled"
+          data-testid="gitRepo-enablePolling-checkbox"
+          class="check"
+          type="checkbox"
+          label-key="fleet.gitRepo.polling.enable"
+          :mode="mode"
+          @update:value="enablePolling"
+        />
+      </div>
+      <template v-if="value.isPollingEnabled">
+        <div class="col">
+          <Banner
+            v-if="showPollingIntervalWarning"
+            color="warning"
+            label-key="fleet.gitRepo.polling.pollingInterval.minimumValueWarning"
+            data-testid="gitRepo-pollingInterval-minimumValueWarning"
+          />
+          <Banner
+            v-if="value.isWebhookConfigured"
+            color="warning"
+            label-key="fleet.gitRepo.polling.pollingInterval.webhookWarning"
+            data-testid="gitRepo-pollingInterval-webhookWarning"
+          />
+        </div>
+        <div class="col span-6">
+          <UnitInput
+            :value="pollingInterval"
+            data-testid="gitRepo-pollingInterval-input"
+            min="1"
+            :suffix="t('suffix.seconds', { count: pollingInterval })"
+            :label="t('fleet.gitRepo.polling.pollingInterval.label')"
+            :mode="mode"
+            tooltip-key="fleet.gitRepo.polling.pollingInterval.tooltip"
+            @update:value="updatePollingInterval"
+            @blur.capture="validatePollingInterval"
+          />
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .spacer {
+    padding: 30px 0 0 0;
+  }
+  :deep() .select-or-create-auth-secret {
+    .row {
+      margin-top: 10px !important;
+    }
+  }
+  .resource-handling {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+  }
+  .polling {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+  }
+</style>