@rancher/shell 3.0.5-rc.1 → 3.0.5-rc.2

package/rancher-components/RcDropdown/RcDropdown.vue

@@ -24,9 +24,18 @@ import { ref } from 'vue';
 import { useClickOutside } from '@shell/composables/useClickOutside';
 import { useDropdownContext } from '@components/RcDropdown/useDropdownContext';
 
-defineProps<{
-  ariaLabel?: string
-}>();
+import type { Placement } from 'floating-vue';
+
+withDefaults(
+  defineProps<{
+    // eslint-disable-next-line vue/require-default-prop
+    ariaLabel?: string;
+    // eslint-disable-next-line vue/require-default-prop
+    distance?: number;
+    placement?: Placement;
+  }>(),
+  { placement: 'bottom-end' }
+);
 
 const emit = defineEmits(['update:open']);
 
@@ -61,7 +70,8 @@ const applyShow = () => {
     :shown="isMenuOpen"
     :auto-hide="false"
     :container="popperContainer"
-    :placement="'bottom-end'"
+    :placement="placement"
+    :distance="distance"
     @apply-show="applyShow"
   >
     <slot name="default">
@@ -78,8 +88,8 @@ const applyShow = () => {
         dropdown-menu-collection
         :aria-label="ariaLabel || 'Dropdown Menu'"
         @keydown="handleKeydown"
-        @keydown.down="setFocus('down')"
-        @keydown.up="setFocus('up')"
+        @keydown.down.prevent="setFocus('down')"
+        @keydown.up.prevent="setFocus('up')"
       >
         <slot name="dropdownCollection">
           <!--Empty slot content-->
@@ -111,6 +121,7 @@ const applyShow = () => {
         }
 
         .v-popper__inner {
+          overflow: unset;
           padding: 10px 0 10px 0;
         }
       }

package/rancher-components/RcDropdown/RcDropdownItem.vue

@@ -2,56 +2,12 @@
 /**
  * An item for a dropdown menu. Used in conjunction with RcDropdown.
  */
-import { inject } from 'vue';
-import { DropdownContext, defaultContext } from './types';
+import { useDropdownItem } from '@components/RcDropdown/useDropdownItem';
 
 const props = defineProps({ disabled: Boolean });
 const emits = defineEmits(['click']);
 
-const { close, dropdownItems } = inject<DropdownContext>('dropdownContext') || defaultContext;
-
-/**
- * Handles keydown events to navigate between dropdown items.
- * @param {KeyboardEvent} e - The keydown event.
- */
-const handleKeydown = (e: KeyboardEvent) => {
-  const activeItem = document.activeElement;
-
-  const activeIndex = dropdownItems.value.indexOf(activeItem || new HTMLElement());
-
-  if (activeIndex < 0) {
-    return;
-  }
-
-  const shouldAdvance = e.key === 'ArrowDown';
-
-  const newIndex = findNewIndex(shouldAdvance, activeIndex, dropdownItems.value);
-
-  if (dropdownItems.value[newIndex] instanceof HTMLElement) {
-    dropdownItems.value[newIndex].focus();
-  }
-};
-
-/**
- * Finds the new index for the dropdown item based on the key pressed.
- * @param shouldAdvance - Whether to advance to the next or previous item.
- * @param activeIndex - Current active index.
- * @param itemsArr - Array of dropdown items.
- * @returns The new index.
- */
-const findNewIndex = (shouldAdvance: boolean, activeIndex: number, itemsArr: Element[]) => {
-  const newIndex = shouldAdvance ? activeIndex + 1 : activeIndex - 1;
-
-  if (newIndex > itemsArr.length - 1) {
-    return 0;
-  }
-
-  if (newIndex < 0) {
-    return itemsArr.length - 1;
-  }
-
-  return newIndex;
-};
+const { handleKeydown, close, handleActivate } = useDropdownItem();
 
 const handleClick = (e: MouseEvent) => {
   if (props.disabled) {
@@ -62,15 +18,6 @@ const handleClick = (e: MouseEvent) => {
   close();
 };
 
-/**
- * Handles keydown events to activate the dropdown item.
- * @param e - The keydown event.
- */
-const handleActivate = (e: KeyboardEvent) => {
-  if (e?.target instanceof HTMLElement) {
-    e?.target?.click();
-  }
-};
 </script>
 
 <template>
@@ -83,7 +30,7 @@ const handleActivate = (e: KeyboardEvent) => {
     :aria-disabled="disabled || false"
     @click.stop="handleClick"
     @keydown.enter.space="handleActivate"
-    @keydown.up.down.stop="handleKeydown"
+    @keydown.up.down.prevent.stop="handleKeydown"
   >
     <slot name="before">
       <!--Empty slot content-->

package/rancher-components/RcDropdown/RcDropdownItemCheckbox.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+/**
+ * An item for a dropdown menu. Used in conjunction with RcDropdown.
+ */
+import { Checkbox as RcCheckbox } from '@components/Form/Checkbox';
+import { useDropdownItem } from '@components/RcDropdown/useDropdownItem';
+
+const props = defineProps({ modelValue: Boolean, disabled: Boolean });
+const emits = defineEmits(['click']);
+
+const { handleKeydown, handleActivate } = useDropdownItem();
+
+const handleClick = () => {
+  if (props.disabled) {
+    return;
+  }
+
+  emits('click', !props.modelValue);
+};
+</script>
+
+<template>
+  <div
+    ref="dropdownMenuItem"
+    dropdown-menu-item
+    tabindex="-1"
+    role="menuitemcheckbox"
+    :disabled="disabled || null"
+    :aria-disabled="disabled || false"
+    @click.stop="handleClick"
+    @keydown.enter.space="handleActivate"
+    @keydown.up.down.prevent.stop="handleKeydown"
+  >
+    <rc-checkbox :value="modelValue">
+      <template #label>
+        <slot name="default">
+          <!--Empty slot content-->
+        </slot>
+      </template>
+    </rc-checkbox>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  [dropdown-menu-item] {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    padding: 9px 8px;
+    margin: 0 9px;
+    border-radius: 4px;
+
+    &:hover {
+      cursor: pointer;
+      background-color: var(--dropdown-hover-bg);
+    }
+    &:focus-visible, &:focus {
+      @include focus-outline;
+      outline-offset: 0;
+    }
+    &[disabled] {
+      color: var(--disabled-text);
+      &:hover {
+        cursor: not-allowed;
+      }
+    }
+  }
+</style>

package/rancher-components/RcDropdown/RcDropdownItemSelect.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+/**
+ * An item for a dropdown menu. Used in conjunction with RcDropdown.
+ */
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+import { useDropdownItem } from '@components/RcDropdown/useDropdownItem';
+import { ref } from 'vue';
+
+type LabeledSelectComponent = {
+  focusSearch: () => void;
+};
+
+defineProps({
+  modelValue: {
+    type:    String,
+    default: ''
+  },
+  disabled: Boolean,
+  options:  {
+    type: Array,
+    default() {
+      return [];
+    }
+  },
+});
+const emits = defineEmits(['click', 'select']);
+
+const { handleKeydown, handleActivate } = useDropdownItem();
+
+const dropdownMenuItem = ref<HTMLDivElement | null>(null);
+const menuItemSelect = ref<LabeledSelectComponent | null>(null);
+
+const handleClick = () => {
+  menuItemSelect?.value?.focusSearch();
+};
+
+const focusMenuItem = () => {
+  dropdownMenuItem?.value?.focus();
+};
+</script>
+
+<template>
+  <div
+    ref="dropdownMenuItem"
+    dropdown-menu-item
+    tabindex="-1"
+    role="menuitem"
+    :disabled="disabled || null"
+    :aria-disabled="disabled || false"
+    @click.stop="handleClick"
+    @keydown.enter.space="handleActivate"
+    @keydown.up.down.prevent.stop="handleKeydown"
+  >
+    <LabeledSelect
+      ref="menuItemSelect"
+      :value="modelValue"
+      :label="t('wm.containerLogs.range.label')"
+      :options="options"
+      :clearable="false"
+      placement="top"
+      @keydown.enter.stop
+      @update:value="emits('select', $event)"
+      @on-close="focusMenuItem"
+    />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  [dropdown-menu-item] {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    padding: 9px 8px;
+    margin: 0 9px;
+    border-radius: 4px;
+
+    &:hover {
+      cursor: pointer;
+      background-color: var(--dropdown-hover-bg);
+    }
+    &:focus-visible, &:focus {
+      @include focus-outline;
+      outline-offset: 0;
+    }
+    &[disabled] {
+      color: var(--disabled-text);
+      &:hover {
+        cursor: not-allowed;
+      }
+    }
+  }
+</style>

package/rancher-components/RcDropdown/index.ts

@@ -1,5 +1,7 @@
 export { default as RcDropdown } from './RcDropdown.vue';
 export { default as RcDropdownItem } from './RcDropdownItem.vue';
+export { default as RcDropdownItemCheckbox } from './RcDropdownItemCheckbox.vue';
+export { default as RcDropdownItemSelect } from './RcDropdownItemSelect.vue';
 export { default as RcDropdownSeparator } from './RcDropdownSeparator.vue';
 export { default as RcDropdownTrigger } from './RcDropdownTrigger.vue';
 export { default as RcDropdownMenu } from './RcDropdownMenu.vue';

package/rancher-components/RcDropdown/useDropdownItem.ts

@@ -0,0 +1,63 @@
+import { inject } from 'vue';
+import { DropdownContext, defaultContext } from './types';
+
+export const useDropdownItem = () => {
+  const { dropdownItems, close } = inject<DropdownContext>('dropdownContext') || defaultContext;
+
+  /**
+   * Handles keydown events to navigate between dropdown items.
+   * @param {KeyboardEvent} e - The keydown event.
+   */
+  const handleKeydown = (e: KeyboardEvent) => {
+    const activeItem = document.activeElement;
+
+    const activeIndex = dropdownItems.value.indexOf(activeItem || new HTMLElement());
+
+    if (activeIndex < 0) {
+      return;
+    }
+
+    const shouldAdvance = e.key === 'ArrowDown';
+
+    const newIndex = findNewIndex(shouldAdvance, activeIndex, dropdownItems.value);
+
+    if (dropdownItems.value[newIndex] instanceof HTMLElement) {
+      dropdownItems.value[newIndex].focus();
+    }
+  };
+
+  /**
+   * Finds the new index for the dropdown item based on the key pressed.
+   * @param shouldAdvance - Whether to advance to the next or previous item.
+   * @param activeIndex - Current active index.
+   * @param itemsArr - Array of dropdown items.
+   * @returns The new index.
+   */
+  const findNewIndex = (shouldAdvance: boolean, activeIndex: number, itemsArr: Element[]) => {
+    const newIndex = shouldAdvance ? activeIndex + 1 : activeIndex - 1;
+
+    if (newIndex > itemsArr.length - 1) {
+      return 0;
+    }
+
+    if (newIndex < 0) {
+      return itemsArr.length - 1;
+    }
+
+    return newIndex;
+  };
+
+  /**
+   * Handles keydown events to activate the dropdown item.
+   * @param e - The keydown event.
+   */
+  const handleActivate = (e: KeyboardEvent) => {
+    if (e?.target instanceof HTMLElement) {
+      e?.target?.click();
+    }
+  };
+
+  return {
+    handleKeydown, close, handleActivate
+  };
+};

package/scripts/extension/bundle

@@ -29,12 +29,32 @@ cp -R ${CHART_TEMPLATE}/* ${TMP}/container/
 # Copy the plugin assets
 mkdir -p ${TMP}/container/plugin
 
+# Copy Helm charts and plugin assets
 cp -R ${BASE_DIR}/assets/* ${TMP}/container/plugin
 cp ${BASE_DIR}/package.json ${TMP}/container/plugin
 cp ${BASE_DIR}/index.yaml ${TMP}/container/
 cp ${BASE_DIR}/index.yaml ${TMP}/container/plugin
 rm -f ${TMP}/container/plugin/report.html
 
+# Add extension .tgz files with proper naming
+echo -e "${CYAN}Copying extension archives...${RESET}"
+for pkg_dir in ${BASE_DIR}/extensions/*/; do
+  pkg=$(basename "${pkg_dir}")
+  echo -e "Processing package: ${pkg}"
+  
+  # Find all .tgz files in the package directory
+  for tgz_path in "${pkg_dir}"*.tgz; do
+    if [ -f "${tgz_path}" ]; then
+      # Extract version from filename
+      version=$(basename "${tgz_path}" .tgz)
+      compressed_package_name="${pkg}-${version}.tgz"
+      
+      echo "Copying ${tgz_path} to ${TMP}/container/plugin/${compressed_package_name}"
+      cp "${tgz_path}" "${TMP}/container/plugin/${compressed_package_name}"
+    fi
+  done
+done
+
 # Generate files.txt for each pkg and move pkg files into relative plugin directories
 for d in ${BASE_DIR}/dist-pkg/*; do
   pkg=$(basename $d)

package/scripts/extension/helm/charts/ui-plugin-server/templates/cr.yaml

@@ -8,7 +8,8 @@ spec:
   plugin:
     name: {{ include "extension-server.fullname" . }}
     version: {{ (semver (default .Chart.AppVersion .Values.plugin.versionOverride)).Original }}
-    endpoint: http://{{ include "extension-server.fullname" . }}.{{ .Release.Namespace }}.svc
+    endpoint: {{ .Values.plugin.endpoint | quote }}
+    compressedEndpoint: {{ .Values.plugin.compressedEndpoint | quote }}
     noCache: {{ .Values.plugin.noCache }}
     noAuth: {{ .Values.plugin.noAuth }}
     metadata: {{ include "extension-server.pluginMetadata" . | indent 6 }}

package/scripts/extension/helm/charts/ui-plugin-server/values.yaml

@@ -3,6 +3,8 @@ fullnameOverride: ""
 plugin:
   enabled: true
   versionOverride: ""
+  endpoint: ""
+  compressedEndpoint: ""
   noCache: false
   noAuth: false
   metadata: {}

package/scripts/extension/helmpatch

@@ -1,15 +1,9 @@
 #!/usr/bin/env node
 
-// Update Chart.yaml and values.yaml files
-
 const fs = require('fs');
 const path = require('path');
 const yaml = require('js-yaml');
 
-// TODO: Should already be in the template
-// const UI_PLUGIN_ANNOTATION_NAME = 'catalog.cattle.io/ui-component';
-// const UI_PLUGIN_ANNOTATION_VALUE = 'plugins';
-
 console.log('Helm file update');
 
 if (process.argv.length !== 4) {
@@ -17,12 +11,10 @@ if (process.argv.length !== 4) {
   process.exit(1);
 }
 
-const destFolder = process.argv[2];
+const chartFolder = process.argv[2];
 const pkgFilePath = process.argv[3];
 
 const pkgFile = JSON.parse(fs.readFileSync(pkgFilePath, 'utf8'));
-
-const chartFolder = destFolder;
 const chartFile = path.join(chartFolder, 'Chart.yaml');
 const valuesFile = path.join(chartFolder, 'values.yaml');
 
@@ -32,36 +24,57 @@ if (!fs.existsSync(chartFolder)) {
 }
 
 // --------------------------------------------------------------------------------
-// Chart.yaml
+// Chart.yaml updates (annotations)
 // --------------------------------------------------------------------------------
 const chart = yaml.load(fs.readFileSync(chartFile, 'utf8'));
-let updated = false;
-
-// Add in annotations to match any rules in the package file
-if (pkgFile.rancher && typeof pkgFile.rancher === 'object') {
-  // See if there are any annotations and merge them in, if there are
-  if (pkgFile.rancher.annotations) {
-    chart.annotations = chart.annotations || {};
-    Object.keys(pkgFile.rancher.annotations).forEach((key) => {
-      chart.annotations[key] = pkgFile.rancher.annotations[key];
-      updated = true;
-    });
-  }
+let chartUpdated = false;
+
+if (pkgFile.rancher?.annotations) {
+  chart.annotations = chart.annotations || {};
+  Object.entries(pkgFile.rancher.annotations).forEach(([key, value]) => {
+    if (chart.annotations[key] !== value) {
+      chart.annotations[key] = value;
+      chartUpdated = true;
+    }
+  });
 }
 
-if (updated) {
-  // Write out updated file
-  const str = yaml.dump(chart);
-
-  fs.writeFileSync(chartFile, str, 'utf8');
+if (chartUpdated) {
+  fs.writeFileSync(chartFile, yaml.dump(chart), 'utf8');
+  console.log('Updated Chart.yaml annotations');
 }
 
 // --------------------------------------------------------------------------------
-// values.yaml
+// values.yaml updates (endpoints)
 // --------------------------------------------------------------------------------
-
 const values = yaml.load(fs.readFileSync(valuesFile, 'utf8'));
 
-const valuesYaml = yaml.dump(values, { quotingType: '"' });
+// Get package metadata from package.json
+const pkgName = pkgFile.name;
+const pkgVersion = pkgFile.version;
+const pkgFullName = `${ pkgName }-${ pkgVersion }`;
+
+// Determine build type from environment
+const isGitHubBuild = process.env.GITHUB_BUILD === 'true';
+
+// Set endpoints based on build type
+if (isGitHubBuild) {
+  const githubSource = process.env.GITHUB_SOURCE;
+  const githubBranch = process.env.GITHUB_BRANCH;
+
+  values.plugin.endpoint = `https://raw.githubusercontent.com/${ githubSource }/${ githubBranch }/extensions/${ pkgName }/${ pkgVersion }`;
+} else {
+  const imagePrefix = process.env.IMAGE_PREFIX || '';
+  const baseExt = process.env.BASE_EXT;
+
+  values.plugin.endpoint = `http://${ imagePrefix }${ baseExt }-svc.cattle-ui-plugin-system:8080/plugin/${ pkgFullName }`;
+}
+
+// Always set compressedEndpoint as endpoint + .tgz
+values.plugin.compressedEndpoint = `${ values.plugin.endpoint }.tgz`;
 
-fs.writeFileSync(valuesFile, valuesYaml, 'utf8');
+// Write updated values.yaml
+fs.writeFileSync(valuesFile, yaml.dump(values, { quotingType: '"' }), 'utf8');
+console.log('Updated values.yaml endpoints:');
+console.log(`- endpoint: ${ values.plugin.endpoint }`);
+console.log(`- compressedEndpoint: ${ values.plugin.compressedEndpoint }`);

package/scripts/extension/publish

@@ -1,5 +1,5 @@
 #!/usr/bin/env bash
-set -eo pipefail
+# set -eo pipefail comment out for now because of a Harvester issue
 
 SCRIPT_DIR="$( cd -- "$( dirname -- "${BASH_SOURCE[0]}" )" &> /dev/null && pwd )"
 BASE_DIR="$(pwd)"
@@ -331,6 +331,12 @@ if [ "${UPDATE_LATEST_PACAKGES}" = "true" ]; then
       find plugin -type f | sort > files.txt
       popd > /dev/null
 
+      # --------------------------------------------------------------------------------
+      # Package extensions into tgz for the compressedEndpoint
+      # --------------------------------------------------------------------------------
+      echo -e "${CYAN}Packaging extension into tgz${RESET}"
+      tar -czf ${BASE_DIR}/extensions/${pkg}/${PKG_VERSION}.tgz -C ${BASE_DIR}/extensions/${pkg} ${PKG_VERSION}
+
       # --------------------------------------------------------------------------------
       # Create the Helm chart
       # --------------------------------------------------------------------------------
@@ -359,18 +365,11 @@ if [ "${UPDATE_LATEST_PACAKGES}" = "true" ]; then
         cp ./pkg/${pkg}/README.md ${CHART_FOLDER}/README.md
       fi
 
-      pushd ${CHART_FOLDER}/templates > /dev/null
-      
-      if [ "${GITHUB_BUILD}" == "true" ]; then
-        echo "Patching for GitHub build"
-        ENDPOINT=https://raw.githubusercontent.com/${GITHUB_SOURCE}/${GITHUB_BRANCH}/extensions/${pkg}/${PKG_VERSION}
-      else
-        echo "Patching for container build"
-        ENDPOINT=http://${IMAGE_PREFIX}${BASE_EXT}-svc.cattle-ui-plugin-system:8080/plugin/${PKG_NAME}
-      fi
-      sed -i.bak -e 's@endpoint: .*@endpoint: '"${ENDPOINT}"'@g' cr.yaml
-      rm *.bak
-      popd > /dev/null
+      export GITHUB_BUILD
+      export IMAGE_PREFIX
+      export BASE_EXT
+      export GITHUB_SOURCE
+      export GITHUB_BRANCH
 
       # Additional patches
       ${SCRIPT_DIR}/helmpatch ${CHART_FOLDER} "${BASE_DIR}/pkg/${pkg}/package.json"

package/scripts/typegen.sh

@@ -63,10 +63,8 @@ rm -rf ${INDEX}
 echo "// Auto-generated type definitions for shell" > ${INDEX}
 echo "// Do not modify this file as changes will get overwritten" >> ${INDEX}
 
-# Copy in the vue shim type definitions
-if [ -f "$BASE_DIR/shell/types/vue-shim.d" ]; then
-  cat "$BASE_DIR/shell/types/vue-shim.d" >> ${INDEX}
-fi
+echo "/// <reference types=\"@rancher/shell/types/vue-shim\" />" >> ${INDEX}
+echo "/// <reference types=\"@rancher/shell/types/global-vue\" />" >> ${INDEX}
 
 function processDir() {
   local dir=$1