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

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>

package/components/fleet/FleetClusterTargets/ClusterSelectionFields.vue

@@ -0,0 +1,217 @@
+<script setup lang="ts">
+import { computed, nextTick, ref } from 'vue';
+import { useStore } from 'vuex';
+import { useI18n } from '@shell/composables/useI18n';
+import { Selector } from '@shell/types/fleet';
+import LabeledSelect from '@shell/components/form/LabeledSelect.vue';
+import MatchExpressions from '@shell/components/form/MatchExpressions.vue';
+import { RcButton } from '@components/RcButton';
+
+interface SelectOption {
+  label: string,
+  value: string,
+  disabled?: boolean,
+}
+
+const props = withDefaults(defineProps<{
+  selectedClusters?: string[];
+  selectedClusterGroups?: string[];
+  clusterSelectors?: Selector[];
+  clustersOptions?: SelectOption[];
+  clusterGroupsOptions?: SelectOption[];
+  mode: string;
+  isView?: boolean;
+  variant?: 'appco' | 'default';
+  compact?: boolean;
+}>(), {
+  selectedClusters:      () => [],
+  selectedClusterGroups: () => [],
+  clusterSelectors:      () => [],
+  clustersOptions:       () => [],
+  clusterGroupsOptions:  () => [],
+  isView:                false,
+  variant:               'default',
+  compact:               false,
+});
+
+// eslint-disable-next-line func-call-spacing
+const emit = defineEmits<{
+  (e: 'select-clusters', list: string[]): void;
+  (e: 'select-cluster-groups', list: string[]): void;
+  (e: 'add-match-expressions'): void;
+  (e: 'update-match-expressions', index: number, value: Selector, key?: number): void;
+  (e: 'remove-match-expressions', key?: number): void;
+}>();
+
+const store = useStore();
+const { t } = useI18n(store);
+
+const isAppco = computed(() => props.variant === 'appco');
+
+const byLabelHeading = computed(() => {
+  if (isAppco.value) {
+    return 'h4';
+  }
+
+  return props.compact ? 'h5' : 'h4';
+});
+
+const groupHeading = computed(() => {
+  if (isAppco.value) {
+    return 'h4';
+  }
+
+  return props.compact ? 'h4' : 'h3';
+});
+
+const addButtonClass = computed(() => (isAppco.value ? 'mmt-3' : 'mmt-4'));
+
+const matchExpressionRefs = ref<Record<number, any>>({});
+
+function setMatchExpressionRef(key: number | undefined, el: any) {
+  if (key === null || key === undefined) {
+    return;
+  }
+
+  if (el) {
+    matchExpressionRefs.value[key] = el;
+  } else {
+    delete matchExpressionRefs.value[key];
+  }
+}
+
+function focusMatchExpression(key: number) {
+  nextTick(() => {
+    matchExpressionRefs.value[key]?.focus();
+  });
+}
+
+defineExpose({ focusMatchExpression });
+</script>
+
+<template>
+  <div :class="isAppco ? 'appco-select-clusters' : undefined">
+    <!-- Select by cluster name -->
+    <div>
+      <h4 v-if="isAppco">
+        {{ t('fleet.clusterTargets.clusters.byName.title') }}
+      </h4>
+      <LabeledSelect
+        data-testid="fleet-target-cluster-name-selector"
+        :class="{ 'mmt-4': !isAppco && !compact }"
+        :value="selectedClusters"
+        :label="t('fleet.clusterTargets.clusters.byName.label')"
+        :options="clustersOptions"
+        :taggable="true"
+        :close-on-select="false"
+        :mode="mode"
+        :multiple="true"
+        :placeholder="t('fleet.clusterTargets.clusters.byName.placeholder')"
+        @update:value="emit('select-clusters', $event)"
+      />
+    </div>
+
+    <!-- Select by labels -->
+    <div
+      v-if="!isView || (clusterSelectors && clusterSelectors.length > 0)"
+      :class="{ 'mmt-6': !isAppco }"
+    >
+      <component
+        :is="byLabelHeading"
+        :class="{ 'm-0': !isAppco }"
+      >
+        {{ t('fleet.clusterTargets.clusters.byLabel.title') }}
+      </component>
+      <div
+        v-for="(selector, i) in clusterSelectors"
+        :key="selector.key"
+        class="match-expressions-container mmt-4"
+      >
+        <MatchExpressions
+          :ref="(el) => setMatchExpressionRef(selector.key, el)"
+          class="body"
+          :value="selector"
+          :mode="mode"
+          :initial-empty-row="true"
+          :label-key="t('fleet.clusterTargets.clusters.byLabel.labelKey')"
+          :add-icon="'icon-plus'"
+          :add-class="'btn-sm'"
+          @update:value="emit('update-match-expressions', i, $event, selector.key)"
+        />
+        <RcButton
+          v-if="!isView"
+          size="small"
+          variant="link"
+          :aria-label="t('fleet.clusterTargets.clusters.byLabel.removeSelector')"
+          @click="emit('remove-match-expressions', selector.key)"
+        >
+          <i
+            class="icon icon-x"
+            aria-hidden="true"
+          />
+        </RcButton>
+      </div>
+      <RcButton
+        v-if="!isView"
+        size="small"
+        variant="secondary"
+        :class="addButtonClass"
+        @click="emit('add-match-expressions')"
+      >
+        <i class="icon icon-plus" />
+        <span>{{ t('fleet.clusterTargets.clusters.byLabel.addSelector') }}</span>
+      </RcButton>
+    </div>
+
+    <!-- Select by cluster groups -->
+    <div :class="{ 'mmt-8': !isAppco }">
+      <component
+        :is="groupHeading"
+        :class="{ 'm-0': !isAppco }"
+      >
+        {{ t('fleet.clusterTargets.clusterGroups.title') }}
+      </component>
+      <LabeledSelect
+        data-testid="fleet-target-cluster-group-selector"
+        :class="{ 'mmt-4': !isAppco }"
+        :value="selectedClusterGroups"
+        :label="t('fleet.clusterTargets.clusterGroups.byName.label')"
+        :options="clusterGroupsOptions"
+        :taggable="true"
+        :close-on-select="false"
+        :mode="mode"
+        :multiple="true"
+        :placeholder="t('fleet.clusterTargets.clusterGroups.byName.placeholder')"
+        @update:value="emit('select-cluster-groups', $event)"
+      />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .appco-select-clusters {
+    display: flex;
+    flex-direction: column;
+    gap: var(--gap-lg);
+
+    h4 {
+      margin: 0 0 12px 0;
+    }
+  }
+
+  .match-expressions-container {
+    display: flex;
+    align-items: start;
+    border: 1px solid var(--border);
+    border-radius: 5px;
+
+    .body {
+      padding: 15px;
+      width: 100%;
+    }
+
+    .btn {
+      margin: 5px;
+    }
+  }
+</style>