@rancher/shell 3.0.12-rc.2 → 3.0.12-rc.4

package/components/fleet/AppCoChartGrid.vue

@@ -0,0 +1,401 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useStore } from 'vuex';
+import { useI18n } from '@shell/composables/useI18n';
+import { ZERO_TIME, CATALOG_SORT_OPTIONS } from '@shell/config/types';
+import { RcItemCard } from '@components/RcItemCard';
+import AppChartCardSubHeader from '@shell/pages/c/_cluster/apps/charts/AppChartCardSubHeader';
+import AppCoEmptyState from '@shell/components/fleet/AppCoEmptyState.vue';
+import Loading from '@shell/components/Loading';
+import Select from '@shell/components/form/Select';
+import { RcIcon } from '@components/RcIcon';
+
+interface ChartVersion {
+  version: string;
+  description?: string;
+  icon?: string;
+  appVersion?: string;
+  created?: string;
+}
+
+interface ChartEntry {
+  name: string;
+  description: string;
+  icon: string;
+  version: string;
+  created: string;
+  versions: ChartVersion[];
+}
+
+interface SubHeaderItem {
+  icon: string;
+  iconTooltip: { key: string };
+  label: string;
+}
+
+const props = withDefaults(defineProps<{
+  charts: Record<string, ChartVersion[]>;
+  loading?: boolean;
+  searchPlaceholder?: string;
+}>(), {
+  charts:            () => ({}),
+  loading:           false,
+  searchPlaceholder: '',
+});
+
+const emit = defineEmits<{
+  'select-chart': [value: unknown];
+}>();
+
+const store = useStore();
+const { t } = useI18n(store);
+
+const searchQuery = ref('');
+const searchInput = ref<HTMLInputElement | null>(null);
+const selectedSortOption = ref(CATALOG_SORT_OPTIONS.ALPHABETICAL_ASC);
+
+const sortOptions = [
+  { kind: 'group', label: t('catalog.charts.sort.prefix') },
+  { value: CATALOG_SORT_OPTIONS.LAST_UPDATED_DESC, label: t('catalog.charts.sort.lastUpdatedDesc') },
+  { value: CATALOG_SORT_OPTIONS.ALPHABETICAL_ASC, label: t('catalog.charts.sort.alphaAscending') },
+  { value: CATALOG_SORT_OPTIONS.ALPHABETICAL_DESC, label: t('catalog.charts.sort.alphaDescending') },
+];
+
+const placeholderText = computed(() => props.searchPlaceholder || t('catalog.charts.search'));
+
+const allCharts = computed<ChartEntry[]>(() => {
+  const entries = props.charts as Record<string, any[]>;
+
+  if (!entries || !Object.keys(entries).length) {
+    return [];
+  }
+
+  return Object.keys(entries).sort().map((name) => {
+    const versions = entries[name] || [];
+    const latest = versions[0] || {};
+
+    return {
+      name,
+      description: latest.description || '',
+      icon:        latest.icon || '',
+      version:     latest.version || '',
+      created:     latest.created || '',
+      versions,
+    };
+  });
+});
+
+const filteredCharts = computed(() => {
+  if (!searchQuery.value) {
+    return allCharts.value;
+  }
+
+  const raw = searchQuery.value;
+  const exactMatch = /^"(.+)"$/.exec(raw);
+  const q = exactMatch ? exactMatch[1].toLowerCase() : raw.toLowerCase();
+
+  return allCharts.value.filter((chart) => {
+    const name = chart.name.toLowerCase();
+    const desc = chart.description.toLowerCase();
+
+    if (exactMatch) {
+      return name === q || desc === q;
+    }
+
+    return name.includes(q) || desc.includes(q);
+  });
+});
+
+const sortedCharts = computed(() => {
+  const charts = [...filteredCharts.value];
+
+  switch (selectedSortOption.value) {
+  case CATALOG_SORT_OPTIONS.ALPHABETICAL_ASC:
+    return charts.sort((a, b) => a.name.localeCompare(b.name));
+  case CATALOG_SORT_OPTIONS.ALPHABETICAL_DESC:
+    return charts.sort((a, b) => b.name.localeCompare(a.name));
+  case CATALOG_SORT_OPTIONS.LAST_UPDATED_DESC:
+    return charts.sort((a, b) => {
+      const dateA = a.created ? new Date(a.created).getTime() : 0;
+      const dateB = b.created ? new Date(b.created).getTime() : 0;
+
+      return dateB - dateA;
+    });
+  default:
+    return charts;
+  }
+});
+
+const formatDate = (dateString: string): string => {
+  if (!dateString || dateString === ZERO_TIME) {
+    return '';
+  }
+
+  try {
+    const d = new Date(dateString);
+
+    return d.toLocaleDateString(undefined, {
+      year:  'numeric',
+      month: 'short',
+      day:   'numeric'
+    });
+  } catch (e) {
+    return dateString;
+  }
+};
+
+const chartCards = computed(() => {
+  return sortedCharts.value.map((chart) => {
+    const dateStr = chart.created ? formatDate(chart.created) : '';
+    const subHeaderItems: SubHeaderItem[] = [];
+
+    if (chart.version) {
+      subHeaderItems.push({
+        icon:        'icon-version-alt',
+        iconTooltip: { key: 'tableHeaders.version' },
+        label:       chart.version,
+      });
+    }
+
+    if (dateStr) {
+      subHeaderItems.push({
+        icon:        'icon-refresh-alt',
+        iconTooltip: { key: 'tableHeaders.lastUpdated' },
+        label:       dateStr,
+      });
+    }
+
+    return {
+      id:       chart.name,
+      header:   { title: { text: chart.name } },
+      image:    chart.icon ? { src: chart.icon, alt: { text: chart.name } } : undefined,
+      content:  { text: chart.description },
+      subHeaderItems,
+      rawChart: chart,
+    };
+  });
+});
+
+const totalMessage = computed(() => {
+  const count = sortedCharts.value.length;
+
+  if (searchQuery.value) {
+    return t('catalog.charts.totalMatchedChartsMessage', { count });
+  }
+
+  return t('catalog.charts.totalChartsMessage', { count });
+});
+
+const hasCharts = computed(() => allCharts.value.length > 0);
+
+const clearSearch = () => {
+  searchQuery.value = '';
+  searchInput.value?.focus();
+};
+
+const onKeydown = (e: KeyboardEvent) => {
+  const input = searchInput.value;
+
+  if (!input || e.target === input) {
+    return;
+  }
+
+  if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
+    input.focus();
+    input.scrollIntoView({ behavior: 'smooth', block: 'start' });
+  }
+};
+</script>
+
+<template>
+  <div
+    class="chart-card-grid"
+    tabindex="-1"
+    @keydown="onKeydown"
+  >
+    <Loading
+      v-if="props.loading"
+      mode="relative"
+    />
+
+    <slot
+      v-else-if="!hasCharts"
+      name="empty-state"
+    />
+
+    <template v-else>
+      <div class="search-input">
+        <input
+          ref="searchInput"
+          v-model="searchQuery"
+          type="search"
+          class="input"
+          :placeholder="placeholderText"
+          :aria-label="placeholderText"
+          data-testid="chart-card-grid-search"
+        >
+        <RcIcon
+          v-if="!searchQuery"
+          type="search"
+          size="medium"
+          class="icon-search"
+          aria-hidden="true"
+        />
+      </div>
+
+      <div class="chart-grid-content">
+        <div class="total-and-sort">
+          <p
+            class="total-message"
+            data-testid="chart-card-grid-total"
+          >
+            {{ totalMessage }}
+          </p>
+          <Select
+            v-model:value="selectedSortOption"
+            :clearable="false"
+            :searchable="false"
+            :options="sortOptions"
+            placement="bottom"
+            class="charts-sort-select"
+          >
+            <template #selected-option="{ label }">
+              <span class="mmr-1">{{ t('catalog.charts.sort.prefix') }}:</span>{{ label }}
+            </template>
+
+            <template #option="{ label, kind }">
+              <span
+                v-if="kind === 'group'"
+                class="mml-2 mmr-2"
+              >
+                {{ label }}:
+              </span>
+              <span
+                v-else
+                class="mml-6"
+              >
+                {{ label }}
+              </span>
+            </template>
+          </Select>
+        </div>
+
+        <div
+          v-if="chartCards.length"
+          class="chart-cards"
+          data-testid="chart-card-grid-cards"
+        >
+          <rc-item-card
+            v-for="card in chartCards"
+            :id="card.id"
+            :key="card.id"
+            :header="card.header"
+            :image="card.image"
+            :content="card.content"
+            :value="card.rawChart"
+            variant="medium"
+            :clickable="true"
+            :class="{ 'single-card': chartCards.length === 1 }"
+            data-testid="chart-card-grid-card"
+            @card-click="emit('select-chart', $event)"
+          >
+            <template #item-card-sub-header>
+              <AppChartCardSubHeader :items="card.subHeaderItems" />
+            </template>
+            <template
+              v-if="$slots['card-footer']"
+              #item-card-footer
+            >
+              <slot
+                name="card-footer"
+                :card="card"
+              />
+            </template>
+          </rc-item-card>
+        </div>
+
+        <AppCoEmptyState
+          v-else
+          :title="t('fleet.helmOp.add.steps.selection.emptyState.noMatch.title')"
+          data-testid="chart-card-grid-no-match"
+        >
+          {{ t('fleet.helmOp.add.steps.selection.emptyState.noMatch.descriptionPre') }}
+          <a
+            href="#"
+            @click.prevent="clearSearch"
+          >{{ t('fleet.helmOp.add.steps.selection.emptyState.noMatch.clearSearch') }}</a>
+          {{ t('fleet.helmOp.add.steps.selection.emptyState.noMatch.descriptionPost') }}
+        </AppCoEmptyState>
+
+        <slot name="after-cards" />
+      </div>
+    </template>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.chart-card-grid {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-lg);
+  outline: none;
+}
+
+.search-input {
+  position: relative;
+
+  input {
+    width: 100%;
+    height: 48px;
+    padding-left: 16px;
+    padding-right: 40px;
+  }
+
+  .icon-search {
+    position: absolute;
+    top: 16px;
+    right: 16px;
+  }
+}
+
+.chart-grid-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-md);
+}
+.total-and-sort {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+
+  .total-message {
+    font-size: 16px;
+    font-weight: 600;
+    color: var(--body-text);
+  }
+
+  .charts-sort-select {
+    width: 300px;
+
+    :deep(.v-select.inline.vs--single.vs--open .vs__selected) {
+      opacity: 1;
+      color: var(--dropdown-disabled-text);
+    }
+  }
+}
+
+.chart-cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
+  gap: var(--gap-md);
+  width: 100%;
+  height: max-content;
+  overflow: hidden;
+
+  .single-card {
+    max-width: 500px;
+  }
+}
+
+</style>

package/components/fleet/AppCoEmptyState.vue

@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import { BadgeState } from '@components/BadgeState';
+import { RcIcon } from '@components/RcIcon';
+import { computed, type PropType } from 'vue';
+
+interface BadgeStateProps {
+  transitioning?: boolean;
+  error?: boolean;
+  stateBackground: string;
+  stateDisplay: string;
+}
+
+const props = defineProps({
+  title: {
+    type:     String,
+    required: true,
+  },
+  badgeState: {
+    type:    Object as PropType<BadgeStateProps | null>,
+    default: null,
+  },
+});
+
+const emptyState = computed(() => !props.badgeState?.transitioning && !props.badgeState?.error);
+</script>
+
+<template>
+  <div :class="[{'appco-empty-state': emptyState, 'appco-transitioning-error-state': !emptyState}]">
+    <component
+      :is="emptyState ? 'h1' : 'h2'"
+      class="appco-empty-state-title m-0"
+    >
+      {{ title }}
+    </component>
+    <div :class="['appco-empty-state-body', { 'has-badge': badgeState, 'direction-column': badgeState?.error }]">
+      <div
+        v-if="badgeState"
+        class="appco-badge-container"
+        role="status"
+        :aria-live="badgeState.transitioning ? 'polite' : undefined"
+      >
+        <RcIcon
+          v-if="badgeState.transitioning"
+          class="icon-spin"
+          type="spinner"
+          size="large"
+          aria-hidden="true"
+        />
+        <RcIcon
+          v-else-if="badgeState.error"
+          type="alert-alt"
+          status="error"
+          size="large"
+          aria-hidden="true"
+        />
+        <BadgeState
+          :color="badgeState.stateBackground"
+          :label="badgeState.stateDisplay"
+        />
+      </div>
+      <p>
+        <slot />
+      </p>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.appco-transitioning-error-state {
+  gap: var(--gap-md);
+  padding: 24px 0;
+}
+
+.appco-empty-state {
+  padding: 56px;
+  text-align: center;
+  align-items: center;
+
+  gap: var(--gap-lg);
+
+  .appco-empty-state-body {
+    margin: 0 auto;
+
+    &.direction-column {
+      flex-direction: column;
+    }
+
+    &.has-badge {
+      justify-content: center;
+    }
+  }
+
+  .appco-empty-state-title {
+    margin-bottom: 24px;
+  }
+}
+
+.appco-empty-state, .appco-transitioning-error-state {
+  display: flex;
+  flex-direction: column;
+  .appco-empty-state-title {
+    display: inline-flex;
+    align-items: center;
+  }
+
+  .appco-empty-state-body {
+    &.has-badge {
+      display: flex;
+      gap: var(--gap-md);
+      align-items: center;
+    }
+
+    p {
+      font-size: 16px;
+      line-height: normal;
+    }
+  }
+
+  .appco-badge-container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: var(--gap-md);
+  }
+
+}
+</style>

package/components/fleet/AppCoPageHeader.vue

@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import { useStore } from 'vuex';
+import { useI18n } from '@shell/composables/useI18n';
+import { RcButton } from '@components/RcButton';
+import Masthead from '@shell/components/ResourceList/Masthead.vue';
+import { RcIcon } from '@components/RcIcon';
+
+const store = useStore();
+const { t } = useI18n(store);
+
+const props = defineProps({
+  subtitle: {
+    type:    Boolean,
+    default: false,
+  },
+  secretLabel: {
+    type:    String,
+    default: '',
+  },
+  showSecretInfo: {
+    type:    Boolean,
+    default: false,
+  },
+});
+const emit = defineEmits(['edit-credentials']);
+
+const SUSE_ACCESS_TOKENS_URL = 'https://docs.apps.rancher.io/get-started/authentication#create-an-access-token';
+</script>
+
+<template>
+  <div class="appco-page-header">
+    <Masthead
+      resource="workload"
+      :type-display="t('fleet.appCo.credentials.title')"
+      :is-creatable="false"
+      :show-favorite="false"
+      component-testid="workload-dashboard"
+    >
+      <template
+        v-if="props.subtitle"
+        #subHeader
+      >
+        <p class="mmt-1 text-deemphasized">
+          {{ t('fleet.appCo.credentials.infoText') }}<br>
+          {{ t('generic.learnMoreAbout') }}
+          <a
+            :href="SUSE_ACCESS_TOKENS_URL"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            {{ t('fleet.appCo.credentials.accessTokensLink') }}
+            <RcIcon
+              type="external-link"
+              aria-hidden="true"
+            />
+          </a>
+        </p>
+      </template>
+      <template #createButton>
+        <div class="align-end">
+          <div
+            v-if="props.showSecretInfo && props.secretLabel"
+            class="secret-info"
+          >
+            <div class="secret-text">
+              <span class="secret-label">{{ t('fleet.appCo.credentials.accessTokenLabel') }}</span>
+              <span class="secret-value">{{ props.secretLabel }}</span>
+            </div>
+            <RcButton
+              class="edit-btn"
+              variant="secondary"
+              size="medium"
+              :aria-label="t('fleet.appCo.credentials.editCredentials')"
+              data-testid="appco-header-edit-credentials"
+              @click="emit('edit-credentials')"
+            >
+              <RcIcon type="edit" />
+            </RcButton>
+          </div>
+        </div>
+      </template>
+    </Masthead>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.secret-info {
+  display: grid;
+  grid-template-columns: auto auto;
+  gap: var(--gap);
+  align-items: center;
+
+  .secret-text {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    text-align: right;
+  }
+
+  .secret-label {
+    color: var(--input-label);
+    font-size: 14px;
+  }
+
+  .secret-value {
+    font-size: 14px;
+    line-height: 22px;
+  }
+}
+
+.edit-btn {
+  width: 40px;
+}
+
+.align-end {
+  display: flex;
+  justify-content: flex-end;
+}
+</style>

package/components/fleet/AppCoVersionSelect.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { useStore } from 'vuex';
+import { useI18n } from '@shell/composables/useI18n';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+
+export interface VersionOption {
+  label: string;
+  value: string;
+  date?: string;
+}
+
+defineProps<{
+  value?: string;
+  options?: VersionOption[];
+  loading?: boolean;
+  mode: string;
+}>();
+
+// eslint-disable-next-line func-call-spacing
+const emit = defineEmits<{
+  (e: 'update:value', value: string): void;
+}>();
+
+const store = useStore();
+const { t } = useI18n(store);
+</script>
+
+<template>
+  <LabeledSelect
+    :value="value"
+    :options="options"
+    :loading="loading"
+    :mode="mode"
+    :label="t('fleet.helmOp.appCoConfig.chartVersion')"
+    :searchable="true"
+    option-key="value"
+    @update:value="emit('update:value', $event)"
+  >
+    <template #option="opt">
+      <div class="version-option">
+        <span>{{ opt.label }}</span>
+        <span
+          v-if="opt.date"
+          class="version-option-date"
+        >{{ opt.date }}</span>
+      </div>
+    </template>
+    <template #selected-option="opt">
+      <div class="version-option">
+        <span>{{ opt.label }}</span>
+        <span
+          v-if="opt.date"
+          class="version-option-date"
+        >{{ opt.date }}</span>
+      </div>
+    </template>
+  </LabeledSelect>
+</template>
+
+<style lang="scss" scoped>
+.version-option {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.version-option-date {
+  color: var(--muted);
+}
+</style>