dashboard-shell-shell 1.0.10000011122 → 1.6.0-alpha.1

package/pages/c/_cluster/apps/charts/AppChartCardFooter.vue

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import { RcItemCardAction } from '@components/RcItemCard';
+
+interface FooterItem {
+  icon?: string;
+  iconTooltip?: Record<{key?: string, text?: string}>;
+  labels: string[];
+}
+
+const emit = defineEmits<{(e: 'click:item', type: string, label: string): void; }>();
+
+defineProps<{
+  items: FooterItem[];
+}>();
+
+function onClickItem(type: string, label: string) {
+  emit('click:item', type, label);
+}
+
+</script>
+
+<template>
+  <div class="app-chart-card-footer">
+    <div
+      v-for="(footerItem, i) in items"
+      :key="i"
+      class="app-chart-card-footer-item"
+      data-testid="app-chart-card-footer-item"
+    >
+      <i
+        v-if="footerItem.icon"
+        v-clean-tooltip="t(footerItem.iconTooltip?.key)"
+        :class="['icon', 'app-chart-card-footer-item-icon', footerItem.icon]"
+      />
+      <rc-item-card-action
+        v-for="(label, j) in footerItem.labels"
+        :key="j"
+        class="app-chart-card-footer-item-text secondary-text-link"
+        data-testid="app-chart-card-footer-item-text"
+        tabindex="0"
+        :aria-label="t('catalog.charts.appChartCard.footerItem.ariaLabel')"
+        @click="onClickItem(footerItem.type, label)"
+        @keydown.enter="onClickItem(footerItem.type, label)"
+        @keydown.space.prevent="onClickItem(footerItem.type, label)"
+      >
+        {{ label }}<span v-if="footerItem.labels.length > 1 && j !== footerItem.labels.length - 1">, </span>
+      </rc-item-card-action>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.app-chart-card-footer {
+  display: flex;
+  flex-wrap: wrap;
+
+  &-item {
+    display: flex;
+    align-items: center;
+    color: var(--link-text-secondary);
+    margin-top: 8px;
+    margin-right: 8px;
+
+    &-text {
+      text-transform: capitalize;
+      margin-right: 8px;
+    }
+
+    &-icon {
+      width: 20px;
+      height: 20px;
+      display: flex;
+      font-size: 19px;
+      align-items: center;
+      justify-content: center;
+      margin-right: 8px;
+    }
+  }
+}
+</style>

package/pages/c/_cluster/apps/charts/AppChartCardSubHeader.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+
+interface SubHeaderItem {
+  icon: string;
+  iconTooltip?: Record<{key?: string, text?: string}>;
+  label: string;
+  labelTooltip?: string;
+}
+
+defineProps<{
+  items: SubHeaderItem[];
+}>();
+
+</script>
+
+<template>
+  <div class="app-chart-card-sub-header">
+    <div
+      v-for="(subHeaderItem, i) in items"
+      :key="i"
+      class="app-chart-card-sub-header-item"
+      data-testid="app-chart-card-version"
+    >
+      <i
+        v-clean-tooltip="t(subHeaderItem.iconTooltip.key)"
+        :class="['icon', 'app-chart-card-sub-header-item-icon', subHeaderItem.icon]"
+      />
+      <p v-clean-tooltip="subHeaderItem.labelTooltip">
+        {{ subHeaderItem.label }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.app-chart-card-sub-header {
+  display: flex;
+  gap: var(--gap-md);
+  color: var(--link-text-secondary);
+  margin-bottom: 8px;
+
+  &-item {
+    display: flex;
+    align-items: center;
+  }
+
+  &-item-icon {
+    width: 20px;
+    height: 20px;
+    display: flex;
+    font-size: 19px;
+    align-items: center;
+    justify-content: center;
+    margin-right: 8px;
+  }
+}
+</style>

package/pages/c/_cluster/apps/charts/StatusLabel.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+
+defineProps<{
+  label: string;
+  icon: string;
+  iconColor?: string;
+  tooltip?: string;
+}>();
+
+</script>
+
+<template>
+  <div class="status-label">
+    {{ label }}
+    <i
+      v-clean-tooltip.right="tooltip"
+      :class="['icon', icon, iconColor]"
+    />
+  </div>
+</template>
+
+<style scoped lang="scss">
+.status-label {
+  display: flex;
+  align-items: flex-end;
+  gap: var(--gap);
+  margin-left: 4px;
+
+  .icon {
+    &.warning  { color: var(--warning); }
+  }
+}
+</style>