@rancher/shell 3.0.4 → 3.0.5-rc.2

package/rancher-components/RcDropdown/useDropdownContext.ts

@@ -17,6 +17,7 @@ export const useDropdownContext = (emit: typeof rcDropdownEmits) => {
   const {
     dropdownItems,
     firstDropdownItem,
+    lastDropdownItem,
     dropdownContainer,
     registerDropdownCollection,
   } = useDropdownCollection();
@@ -70,7 +71,7 @@ export const useDropdownContext = (emit: typeof rcDropdownEmits) => {
   /**
    * Sets focus to the first dropdown item if a keydown event has occurred.
    */
-  const setFocus = () => {
+  const setFocus = (direction: 'down' | 'up') => {
     nextTick(() => {
       if (!didKeydown.value) {
         dropdownContainer.value?.focus();
@@ -78,7 +79,12 @@ export const useDropdownContext = (emit: typeof rcDropdownEmits) => {
         return;
       }
 
-      firstDropdownItem.value?.focus();
+      if (direction === 'down') {
+        firstDropdownItem.value?.focus();
+      } else if (direction === 'up') {
+        lastDropdownItem.value?.focus();
+      }
+
       didKeydown.value = false;
     });
   };
@@ -95,7 +101,7 @@ export const useDropdownContext = (emit: typeof rcDropdownEmits) => {
       dropdownItems,
       close:             () => returnFocus(),
       focusFirstElement: () => {
-        setFocus();
+        setFocus('down');
       },
       handleKeydown,
     });

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,4 +1,5 @@
 #!/usr/bin/env bash
+# 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)"
@@ -330,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
       # --------------------------------------------------------------------------------
@@ -358,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

package/server/har-file.js

@@ -1,11 +1,15 @@
 const fs = require('fs');
 const path = require('path');
+const querystring = require('querystring');
 
 // When we receive a request to this URL we will reset the session to replay again from the HAR file
 // This allows the user to refresh the browser and replay the HAR file again
 const RESET_URL = '/api/v1/namespaces/cattle-ui-plugin-system/services/http:ui-plugin-operator:80/proxy/index.json';
 
-const EXCLUDES_QS = '?exclude=metadata.managedFields';
+const EXCLUDE_QS = 'exclude';
+
+const LEGACY_UI_PLUGIN_INDEX = '/api/v1/namespaces/cattle-ui-plugin-system/services/http:ui-plugin-operator:80/proxy/index.json';
+const NEW_UI_PLUGIN_INDEX = '/v1/uiplugins';
 
 /**
  * Load the network requests/responses from the har file
@@ -113,10 +117,28 @@ function harProxy(responses, folder) {
     const url = decodeURIComponent(req.originalUrl);
     let playback = session[req.originalUrl];
 
+    // Handle case where HAR file was created with older UI Extension API that used the operator
+    if (!playback && req.originalUrl.includes(NEW_UI_PLUGIN_INDEX)) {
+      // Look for new URl for UI plugins
+      playback = session[LEGACY_UI_PLUGIN_INDEX];
+    }
+
     // If it did not match, try without the metadata excludes query string that was adding in 2.8.0
     // This might allow HAR captures with Rancher < 2.8.0 to be replayed on >= 2.8.0
-    if (!playback && req.originalUrl.endsWith(EXCLUDES_QS)) {
-      playback = session[req.originalUrl.slice(0, -EXCLUDES_QS.length)];
+    if (!playback && req.originalUrl.includes('?')) {
+      const urlParts = req.originalUrl.split('?');
+
+      if (urlParts.length > 1) {
+        const queryString = urlParts[1];
+        const qs = querystring.parse(queryString);
+
+        delete qs[EXCLUDE_QS];
+
+        const newQs = querystring.stringify(qs);
+        const newUrl = newQs.length ? `${ urlParts[0] }?${ newQs }` : urlParts[0];
+
+        playback = session[newUrl];
+      }
     }
 
     if (playback && playback[req.method] && playback[req.method].length) {

package/store/action-menu.js

@@ -2,31 +2,26 @@ import { filterBy, isArray } from '@shell/utils/array';
 
 export const state = function() {
   return {
-    show:              false,
-    resources:         [],
-    elem:              null,
-    event:             null,
-    showPromptMove:    false,
-    showPromptRemove:  false,
-    showPromptRestore: false,
-    showAssignTo:      false,
-    showPromptUpdate:  false,
-    showModal:         false,
-    toMove:            [],
-    toRemove:          [],
-    toRestore:         [],
-    toAssign:          [],
-    toUpdate:          [],
-    modalData:         {},
+    show:                false,
+    resources:           [],
+    elem:                null,
+    event:               null,
+    showPromptRemove:    false,
+    showPromptRestore:   false,
+    showModal:           false,
+    performCallbackData: undefined,
+    toRemove:            [],
+    toRestore:           [],
+    modalData:           {},
   };
 };
 
 export const getters = {
-  showing:   (state) => state.show,
-  elem:      (state) => state.elem,
-  event:     (state) => state.event,
-  resources: (state) => state.resources,
-
+  showing:             (state) => state.show,
+  elem:                (state) => state.elem,
+  event:               (state) => state.event,
+  resources:           (state) => state.resources,
+  performCallbackData: (state) => state.performCallbackData,
   optionsArray(state) {
     let selected = state.resources;
 
@@ -89,16 +84,6 @@ export const mutations = {
     state.toRemove = resources;
   },
 
-  togglePromptMove(state, resources) {
-    if (!resources) {
-      state.showPromptMove = false;
-      resources = [];
-    } else {
-      state.showPromptMove = !state.showPromptMove;
-      state.toMove = Array.isArray(resources) ? resources : [resources];
-    }
-  },
-
   togglePromptRestore(state, resources) {
     if (!resources) {
       state.showPromptRestore = false;
@@ -112,35 +97,13 @@ export const mutations = {
     state.toRestore = resources;
   },
 
-  toggleAssignTo(state, resources) {
-    state.showAssignTo = !state.showAssignTo;
-
-    if (!isArray(resources)) {
-      resources = [resources];
-    }
-
-    state.toAssign = resources;
-  },
-
-  togglePromptUpdate(state, resources) {
-    if (!resources) {
-      // Clearing the resources also hides the prompt
-      state.showPromptUpdate = false;
-    } else {
-      state.showPromptUpdate = !state.showPromptUpdate;
-    }
-
-    if (!isArray(resources)) {
-      resources = [resources];
-    }
-
-    state.toUpdate = resources;
-  },
-
   togglePromptModal(state, data) {
     if (!data) {
       // Clearing the resources also hides the prompt
       state.showModal = false;
+    } else if (data.performCallback) {
+      state.performCallbackData = data;
+      state.showModal = false;
     } else {
       state.showModal = true;
     }
@@ -148,6 +111,10 @@ export const mutations = {
     state.modalData = data;
   },
 
+  clearCallbackData(state) {
+    state.performCallbackData = undefined;
+  },
+
   SET_RESOURCE(state, resources) {
     state.resources = !isArray(resources) ? [resources] : resources;
   }
@@ -159,6 +126,9 @@ export const actions = {
   },
   setResource({ commit }, resource) {
     commit('SET_RESOURCE', resource);
+  },
+  clearCallbackData({ commit }) {
+    commit('clearCallbackData');
   }
 };
 

package/store/features.js

@@ -1,4 +1,5 @@
 import { MANAGEMENT } from '@shell/config/types';
+import { SCHEDULING_CUSTOMIZATION as SCHEDULING_CUSTOMIZATION_FEATURE } from '@shell/config/features';
 
 const definitions = {};
 
@@ -36,7 +37,7 @@ export const FLEET_WORKSPACE_BACK = create('provisioningv2-fleet-workspace-back-
 export const STEVE_CACHE = create('ui-sql-cache', false);
 export const UIEXTENSION = create('uiextension', true);
 export const PROVISIONING_PRE_BOOTSTRAP = create('provisioningprebootstrap', false);
-export const SCHEDULING_CUSTOMIZATION = create('cluster-agent-scheduling-customization', false);
+export const SCHEDULING_CUSTOMIZATION = create(SCHEDULING_CUSTOMIZATION_FEATURE, false);
 
 // Not currently used.. no point defining ones we don't use
 // export const EMBEDDED_CLUSTER_API = create('embedded-cluster-api', true);

package/store/index.js

@@ -862,6 +862,11 @@ export const actions = {
       const isRancherInHarvester = (rancherManagerSupport?.value || rancherManagerSupport?.default) === 'true';
 
       commit('isRancherInHarvester', isRancherInHarvester);
+
+      if (getters['isSingleProduct']) {
+        console.log('Detect standalone harvester, subscribe Rancher socket'); // eslint-disable-line no-console
+        await dispatch('rancher/subscribe');
+      }
     }
 
     const pl = res.settings?.find((x) => x.id === 'ui-pl')?.value;

package/store/modal.ts

@@ -0,0 +1,71 @@
+import { markRaw, Component } from 'vue';
+import { MutationTree, GetterTree, ActionTree } from 'vuex';
+
+export interface ModalState {
+  isOpen: boolean;
+  component: Component | null;
+  componentProps: Record<string, any>;
+  resources: any[];
+  closeOnClickOutside: boolean;
+  modalWidth: string;
+  modalSticky: boolean;
+}
+
+const state = (): ModalState => ({
+  isOpen:              false,
+  component:           null,
+  componentProps:      {},
+  resources:           [],
+  closeOnClickOutside: false,
+  modalWidth:          '600px',
+  modalSticky:         false
+});
+
+const getters: GetterTree<ModalState, any> = {
+  isOpen:              (state) => state.isOpen,
+  component:           (state) => state.component,
+  componentProps:      (state) => state.componentProps,
+  resources:           (state) => state.resources,
+  closeOnClickOutside: (state) => state.closeOnClickOutside,
+  modalWidth:          (state) => state.modalWidth,
+  modalSticky:         (state) => state.modalSticky,
+};
+
+const mutations: MutationTree<ModalState> = {
+  openModal(state, payload: {
+    component: Component;
+    componentProps?: Record<string, any>;
+    resources?: any[];
+    closeOnClickOutside?: boolean;
+    modalWidth?: string;
+    modalSticky?: boolean;
+  }) {
+    state.isOpen = true;
+    state.component = markRaw(payload.component);
+    state.componentProps = payload.componentProps || {};
+    state.resources = Array.isArray(payload.resources) ? payload.resources : (payload.resources ? [payload.resources] : []);
+    state.closeOnClickOutside = payload.closeOnClickOutside ?? false;
+    state.modalWidth = payload.modalWidth || '600px';
+    state.modalSticky = payload.modalSticky ?? false;
+  },
+
+  closeModal(state) {
+    state.isOpen = false;
+    state.component = null;
+    state.componentProps = {};
+    state.resources = [];
+    state.closeOnClickOutside = false;
+    state.modalWidth = '600px';
+    state.modalSticky = false;
+  }
+};
+
+const actions: ActionTree<ModalState, any> = {};
+
+export default {
+  namespaced: true,
+  state,
+  getters,
+  mutations,
+  actions
+};

package/store/slideInPanel.ts

@@ -0,0 +1,47 @@
+import { markRaw, Component } from 'vue';
+import { MutationTree, GetterTree, ActionTree } from 'vuex';
+
+export interface SlideInPanelState {
+  isOpen: boolean;
+  component: Component | null;
+  componentProps: Record<string, any>;
+}
+
+const state = (): SlideInPanelState => ({
+  isOpen:         false,
+  component:      null,
+  componentProps: {}
+});
+
+const getters: GetterTree<SlideInPanelState, any> = {
+  isOpen:         (state) => state.isOpen,
+  component:      (state) => state.component,
+  componentProps: (state) => state.componentProps
+};
+
+const mutations: MutationTree<SlideInPanelState> = {
+  open(state, payload: { component: Component; componentProps?: Record<string, any> }) {
+    state.isOpen = true;
+    state.component = markRaw(payload.component);
+    state.componentProps = payload.componentProps || {};
+  },
+  close(state) {
+    state.isOpen = false;
+
+    // Delay clearing component/props for 500ms (same as transition duration)
+    setTimeout(() => {
+      state.component = null;
+      state.componentProps = {};
+    }, 500);
+  }
+};
+
+const actions: ActionTree<SlideInPanelState, any> = {};
+
+export default {
+  namespaced: true,
+  state,
+  getters,
+  mutations,
+  actions
+};