dashboard-shell-shell 3.0.2-rc.105 → 3.0.5-logTest.1

package/rancher-components/RcItemCard/RcItemCard.vue

@@ -0,0 +1,430 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import { useStore } from 'vuex';
+import { useI18n } from '@shell/composables/useI18n';
+import LazyImage from '@shell/components/LazyImage.vue';
+import { DropdownOption } from '@components/RcDropdown/types';
+import ActionMenu from '@shell/components/ActionMenuShell.vue';
+
+const store = useStore();
+const { t } = useI18n(store);
+
+/**
+ * Variants available for ItemCard layout
+ */
+type RcItemCardVariant = 'small' | 'medium';
+
+/**
+ * A label that can be either plain text or a translatable key.
+ */
+type Label = {
+  key?: string;
+  text?: string;
+};
+
+/**
+ * Represents an image used in the card.
+ */
+type Image = {
+  src: string;
+  alt?: Label;
+};
+
+/**
+ * Optional pill badge, typically used to highlight a tag or state.
+ */
+type Pill = {
+  label: Label;
+  tooltip?: Label;
+};
+
+/**
+ * Represents an icon-based status indicator shown in the card header.
+ */
+type Status = {
+  icon: string;
+  color?: string;
+  customColor?: string;
+  tooltip?: Label;
+  handleClick?: () => void;
+};
+
+/**
+ * Header metadata for the card.
+ */
+type Header = {
+  title?: Label;
+  statuses?: Status[];
+};
+
+/**
+ * The generic data value passed to the card.
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type ItemValue = Record<string, any>;
+
+/**
+ * Props accepted by the ItemCard component.
+ */
+interface RcItemCardProps {
+  /** Unique identifier for the card (used in test IDs) */
+  id: string;
+
+  /** Any object value associated with this card */
+  value: ItemValue;
+
+  /** Card title, status icons and action menu. Image will be included in the header in small variant too */
+  header: Header;
+
+  /** Optional image to show in card (position depends on variant). A slot is available for it too #item-card-image */
+  image?: Image;
+
+  /** Optional actions that will be displayed inside an action-menu */
+  actions?: DropdownOption[];
+
+  /** Text content inside the card body. A slot is available for it too #item-card-content */
+  content?: Label;
+
+  /** Layout variant: 'small' or 'medium' */
+  variant?: RcItemCardVariant;
+
+  /** Optional pill shown (only if variant is not 'small'). A slot is available for it too #item-card-pill */
+  pill?: Pill;
+
+  /** Makes the card clickable and emits 'card-click' on click/enter/space */
+  clickable?: boolean;
+}
+
+const props = defineProps<RcItemCardProps>();
+
+/**
+ * Emits 'card-click' when card is clicked or activated via keyboard.
+ */
+const emit = defineEmits<{( e: 'card-click', value: ItemValue): void; }>();
+
+/**
+ * Handles the card click while avoiding nested interactive elements
+ * By using RcItemCardAction.vue the 'item-card-action' attribute automatically gets added
+ * which then gets used to ignore 'card-click'
+ */
+function _handleCardClick(e: MouseEvent | KeyboardEvent) {
+  const interactiveSelector = '[item-card-action]';
+
+  // Prevent card click if the user clicks on an inner actionable element like repo, category, or tag
+  if ((e.target as HTMLElement).closest(interactiveSelector)) {
+    return;
+  }
+
+  emit('card-click', props.value);
+}
+
+/**
+ * Utility to resolve localized or plain text labels.
+ */
+function labelText(label?: Label): string {
+  return label?.key ? t(label.key) : label?.text ?? '';
+}
+
+/** ---------------- data ------------------ */
+const cardEl = ref<HTMLElement | null>(null);
+
+/** ---------------- Computed ------------------ */
+
+const headerTitle = computed(() => labelText(props.header.title));
+const imageAlt = computed(() => labelText(props.image?.alt));
+const pillLabel = computed(() => labelText(props.pill?.label));
+const pillTooltip = computed(() => labelText(props.pill?.tooltip));
+const contentText = computed(() => labelText(props.content));
+const statusTooltips = computed(() => props.header.statuses?.map((status) => labelText(status.tooltip)) || []);
+
+const cardMeta = computed(() => ({
+  ariaLabel: props.clickable ? t('itemCard.ariaLabel.clickable', { cardTitle: labelText(props.header.title) }) : undefined,
+  tabIndex:  props.clickable ? '0' : undefined,
+  role:      props.clickable ? 'button' : undefined
+}));
+
+</script>
+
+<template>
+  <div
+    ref="cardEl"
+    class="item-card"
+    :class="{
+      'clickable':
+        clickable
+    }"
+    :role="cardMeta.role"
+    :tabindex="cardMeta.tabIndex"
+    :aria-label="cardMeta.ariaLabel"
+    :data-testid="`item-card-${id}`"
+    @click="_handleCardClick"
+    @keydown.enter="_handleCardClick"
+    @keydown.space.prevent="_handleCardClick"
+  >
+    <div :class="['item-card-body', variant]">
+      <template v-if="variant !== 'small'">
+        <div>
+          <slot name="item-card-image">
+            <div
+              v-if="image"
+              :class="['item-card-image', variant]"
+              data-testid="item-card-image"
+            >
+              <LazyImage
+                :src="image.src"
+                :alt="imageAlt"
+                :style="{'width': '40px', 'height': '40px', 'object-fit': 'contain'}"
+              />
+            </div>
+          </slot>
+          <slot name="item-card-pill">
+            <div
+              v-if="pill"
+              v-clean-tooltip="pillTooltip"
+              class="item-card-pill"
+              data-testid="item-card-pill"
+            >
+              {{ pillLabel }}
+            </div>
+          </slot>
+        </div>
+      </template>
+
+      <div :class="['item-card-body-details', variant]">
+        <div :class="['item-card-header', variant]">
+          <div class="item-card-header-left">
+            <template v-if="variant === 'small'">
+              <slot name="item-card-image">
+                <div
+                  v-if="image"
+                  :class="['item-card-image', variant]"
+                  data-testid="item-card-image"
+                >
+                  <LazyImage
+                    :src="image.src"
+                    :alt="imageAlt"
+                    :style="{'width': '24px', 'height': '24px', 'object-fit': 'contain'}"
+                  />
+                </div>
+              </slot>
+            </template>
+            <slot name="item-card-header-title">
+              <h3
+                v-if="header.title"
+                v-clean-tooltip="headerTitle"
+                :class="['item-card-header-title', variant]"
+                data-testid="item-card-header-title"
+              >
+                {{ headerTitle }}
+              </h3>
+            </slot>
+          </div>
+          <div class="item-card-header-right">
+            <div
+              v-if="header.statuses?.length"
+              class="item-card-header-statuses"
+            >
+              <div
+                v-for="(status, i) in header.statuses"
+                :key="i"
+                class="item-card-header-statuses-status"
+                data-testid="item-card-header-statuses-status"
+              >
+                <i
+                  v-clean-tooltip="statusTooltips[i]"
+                  :class="['icon', status.icon, status.color]"
+                  :style="{color: status.customColor}"
+                  :data-testid="`item-card-header-status-${i}`"
+                />
+              </div>
+            </div>
+
+            <template v-if="$slots['item-card-actions']">
+              <div class="item-card-header-action-menu">
+                <slot name="item-card-actions" />
+              </div>
+            </template>
+            <template v-else-if="actions">
+              <div class="item-card-header-action-menu">
+                <ActionMenu
+                  data-testid="item-card-header-action-menu"
+                  :custom-actions="actions"
+                />
+              </div>
+            </template>
+          </div>
+        </div>
+
+        <slot name="item-card-sub-header" />
+
+        <template v-if="$slots['item-card-content']">
+          <slot name="item-card-content">
+            <div
+              class="item-card-content"
+              data-testid="item-card-content"
+            />
+          </slot>
+        </template>
+        <template v-else-if="content">
+          <div
+            class="item-card-content"
+            data-testid="item-card-content"
+          >
+            <p>{{ contentText }}</p>
+          </div>
+        </template>
+
+        <slot name="item-card-footer" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+$image-medium-box-width: 48px;
+
+.item-card {
+  display: flex;
+  padding: 16px;
+  align-items: flex-start;
+  gap: var(--gap-lg);
+  border-radius: var(--border-radius-md);
+  border: 1px solid var(--border);
+  background: var(--body-bg);
+
+  &.clickable:hover {
+    border-color: var(--primary);
+  }
+
+  &:focus-visible {
+    @include focus-outline;
+    outline-offset: -2px;
+  }
+
+  &-image {
+    width: $image-medium-box-width;
+    height: $image-medium-box-width;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #fff;
+    border-radius: var(--border-radius);
+
+    &.small {
+      width: 32px;
+      height: 32px;
+      margin-right: 12px;
+    }
+  }
+
+  &-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    height: 24px;
+    color: var(--body-text);
+
+    &-left,
+    &-right {
+      display: flex;
+      align-items: center;
+    }
+
+    &-left {
+      flex-grow: 1;
+      min-width: 0;
+    }
+
+    &-title {
+      max-width: 80%;
+      font-size: 18px;
+      font-weight: 600;
+      margin-bottom: 0px;
+      line-height: 24px;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+    }
+
+    &-statuses {
+      display: flex;
+      align-items: flex-start;
+      gap: 12px;
+
+      &-status {
+        width: 24px;
+        height: 24px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        .icon {
+          font-size: 23px;
+
+          &.error    { color: var(--error); }
+          &.info     { color: var(--info); }
+          &.success  { color: var(--success); }
+        }
+      }
+    }
+
+    &-action-menu {
+      margin-left: 12px;
+    }
+  }
+
+  &-content {
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    line-height: 21px;
+    word-break: break-word;
+  }
+
+  &-pill {
+    display: flex;
+    width: $image-medium-box-width;
+    padding: 4px 8px;
+    margin-top: 16px;
+    justify-content: center;
+    align-items: center;
+    border-radius: var(--border-radius);
+    background: var(--default);
+    text-transform: uppercase;
+    color: var(--disabled-text);
+    font-size: 10px;
+    font-weight: 600;
+  }
+
+  &-body {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    gap: var(--gap-lg);
+
+    &.small {
+      flex-direction: column;
+      align-items: flex-start;
+      gap: var(--gap);
+      flex: 1;
+    }
+
+    &-details {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      width: calc(100% - var(--gap-lg) - $image-medium-box-width);
+      gap: var(--gap);
+      flex: 1;
+
+      &.small {
+        width: 100%;
+      }
+    }
+  }
+}
+
+</style>

package/rancher-components/RcItemCard/RcItemCardAction.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+/**
+ * RcItemCardAction
+ *
+ * This component is used to wrap any interactive elements (like buttons, links)
+ * inside an RcItemCard so they don't trigger the card-click event.
+ *
+ * Usage:
+ *
+ * <rc-item-card-action @click="doSomething">
+ *   <a href="#">Click me</a>
+ * </rc-item-card-action>
+ *
+ */
+</script>
+
+<template>
+  <div
+    item-card-action
+    data-testid="rc-item-card-action"
+  >
+    <slot />
+  </div>
+</template>

package/rancher-components/RcItemCard/index.ts

@@ -0,0 +1,2 @@
+export { default as RcItemCard } from './RcItemCard.vue';
+export { default as RcItemCardAction } from './RcItemCardAction.vue';

package/rancher-components/StringList/StringList.vue

@@ -633,7 +633,7 @@ export default defineComponent({
 }
 
 :deep() {
-  /* .labeled-input INPUT.no-label, */
+  // .labeled-input INPUT.no-label,
   .labeled-input INPUT:hover.no-label,
   .labeled-input INPUT:focus.no-label {
     padding: 1px 0px 0px 0px;

package/scripts/build-pkg.sh

@@ -2,7 +2,6 @@
 
 SCRIPT_DIR="$( cd -- "$( dirname -- "${BASH_SOURCE[0]}" )" &> /dev/null && pwd )"
 BASE_DIR="$( cd $SCRIPT_DIR && cd ../.. & pwd)"
-SHELL_DIR=$BASE_DIR/shell/
 EXIT_CODE=0
 FORMATS="umd-min"
 
@@ -19,12 +18,18 @@ done
 
 shift $((OPTIND-1))
 
-# Use shell folder in node modules when we have @rancher/shell installed as a node module
-# rather than the use-case of the mono-repo with the shell folder at the top-level
-if [ ! -d ${SHELL_DIR} ]; then
-  SHELL_DIR=$BASE_DIR/node_modules/@rancher/shell/
-  SHELL_DIR=$(cd -P ${SHELL_DIR} && pwd)
+# ---- 修改这里 ----
+# 优先使用顶级 shell 文件夹，如果不存在则使用 node_modules/dashboard-shell-shell
+SHELL_DIR=$BASE_DIR/shell/
+if [ ! -d "${SHELL_DIR}" ]; then
+  SHELL_DIR=$BASE_DIR/node_modules/dashboard-shell-shell/
+  if [ ! -d "${SHELL_DIR}" ]; then
+    echo "Error: dashboard-shell-shell not found in node_modules"
+    exit 1
+  fi
 fi
+# 转为绝对路径，防止符号链接循环
+SHELL_DIR=$(cd -P "${SHELL_DIR}" && pwd)
 
 CREATE_TARBALL=${2}
 
@@ -46,18 +51,14 @@ if [ -d "${BASE_DIR}/pkg/${1}" ]; then
 
   pushd pkg/${1}
 
-  # Check that the .shell link exists and points to the correct place
-  if [ -e ".shell" ]; then
-    LINK=$(readlink .shell)
-    if [ "${LINK}" != "${SHELL_DIR}" ]; then
-      echo ".shell symlink exists but does not point to expected location - please check and fix"
-      popd
-      exit -1
-    fi
-  else
-    ln -s ${SHELL_DIR} .shell
+  # 删除旧的 .shell，防止循环
+  if [ -L ".shell" ] || [ -e ".shell" ]; then
+    rm -rf .shell
   fi
 
+  # 创建新的符号链接
+  ln -s "${SHELL_DIR}" .shell
+
   FILE=index.js
   if [ -f ./index.ts ]; then
     FILE=index.ts
@@ -72,7 +73,7 @@ if [ -d "${BASE_DIR}/pkg/${1}" ]; then
   cp -f ./package.json ${PKG_DIST}/package.json
   node ${SCRIPT_DIR}/pkgfile.js ${PKG_DIST}/package.json
   rm -rf ${PKG_DIST}/*.bak
-  rm .shell
+  rm -rf .shell
 
   popd  
 fi
@@ -81,22 +82,16 @@ if [ $EXIT_CODE -ne 0 ]; then
   exit $EXIT_CODE
 fi
 
-
 if [ -n "${CREATE_TARBALL}" ]; then
   echo $COMMIT $COMMIT_BRANCH > ${PKG_DIST}/version-commit.txt
 
   TARBALL=${NAME}.tar.gz
 
   pushd ${PKG_DIST}
-
   rm -f ../$TARBALL
-
   echo "Compressing to ${TARBALL}..."
-
   tar -czf ../${TARBALL} .
-
   popd
-
 fi
 
 exit $EXIT_CODE

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)"

package/scripts/publish-shell.sh

@@ -1,7 +1,7 @@
 #!/usr/bin/env bash
 
 # 执行命令示例：
-# TAG=shell-pkg-v3.0.2-rc.105 ./shell/scripts/publish-shell.sh
+# TAG=shell-pkg-v3.0.5-logTest.1 ./shell/scripts/publish-shell.sh
 
 set -euo pipefail
 

package/static/loading-indicator.html

@@ -22,7 +22,7 @@
   height: 80px;
   margin: 0 auto;
   width: 80px;
-}
+}}
 
 @keyframes initial-load-animate {
   0% {

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');
   }
 };