@rancher/shell 3.0.5-rc.6 → 3.0.5-rc.8

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

@@ -4,22 +4,29 @@ import ChartMixin from '@shell/mixins/chart';
 import { Banner } from '@components/Banner';
 import ChartReadme from '@shell/components/ChartReadme';
 import LazyImage from '@shell/components/LazyImage';
-import DateFormatter from '@shell/components/formatter/Date';
 import isEqual from 'lodash/isEqual';
-import { CHART, REPO, REPO_TYPE, VERSION } from '@shell/config/query-params';
+import {
+  CHART, REPO, REPO_TYPE, VERSION, SEARCH_QUERY, CATEGORY, TAG
+} from '@shell/config/query-params';
+import { DATE_FORMAT } from '@shell/store/prefs';
 import { ZERO_TIME } from '@shell/config/types';
+import { escapeHtml } from '@shell/utils/string';
 import { mapGetters } from 'vuex';
 import { compatibleVersionsFor } from '@shell/store/catalog';
-import TypeDescription from '@shell/components/TypeDescription';
+import AppChartCardSubHeader from '@shell/pages/c/_cluster/apps/charts/AppChartCardSubHeader';
+import AppChartCardFooter from '@shell/pages/c/_cluster/apps/charts/AppChartCardFooter';
+import day from 'dayjs';
+import { RcButton } from '@components/RcButton';
 
 export default {
   components: {
     Banner,
     ChartReadme,
-    DateFormatter,
     LazyImage,
     Loading,
-    TypeDescription
+    AppChartCardSubHeader,
+    AppChartCardFooter,
+    RcButton
   },
 
   mixins: [
@@ -32,8 +39,9 @@ export default {
 
   data() {
     return {
+      SEARCH_QUERY,
       ZERO_TIME,
-      showLastVersions: 10,
+      showLastVersions: 7,
       showMoreVersions: false,
     };
   },
@@ -41,6 +49,10 @@ export default {
   computed: {
     ...mapGetters(['currentCluster']),
 
+    headerContent() {
+      return this.chart.cardContent;
+    },
+
     versions() {
       return this.showMoreVersions ? this.mappedVersions : this.mappedVersions.slice(0, this.showLastVersions);
     },
@@ -139,313 +151,549 @@ export default {
         }
       });
     },
+    handleHeaderItemClick(type, value) {
+      const params = {
+        cluster: this.$route.params.cluster,
+        product: this.$store.getters['productId'],
+      };
+
+      let queryValue;
+
+      if (type === REPO) {
+        const repos = this.$store.getters['catalog/repos'];
+
+        queryValue = repos.find((r) => r.nameDisplay === value)?.metadata?.uid;
+      } else if (type === CATEGORY || type === TAG) {
+        queryValue = value.toLowerCase();
+      }
+
+      if (queryValue) {
+        this.$router.push({
+          name:  'c-cluster-apps-charts',
+          params,
+          query: { [type]: queryValue },
+        });
+      }
+    },
+    formatVersionDate(date) {
+      if (date === ZERO_TIME) {
+        return this.t('generic.na');
+      }
+
+      return day(date).format('MMM D, YYYY');
+    },
+    getVersionDateTooltip(date) {
+      if (date === ZERO_TIME) {
+        return this.t('catalog.chart.info.chartVersions.missingVersionDate');
+      }
+
+      const dateFormat = escapeHtml(this.$store.getters['prefs/get'](DATE_FORMAT));
 
+      return day(date).format(dateFormat);
+    },
+    getVersionRoute(vers) {
+      const version = vers.id;
+
+      return {
+        name:   this.$route.name,
+        params: this.$route.params,
+        query:  {
+          ...this.$route.query,
+          [VERSION]: version,
+        }
+      };
+    }
   },
 };
 </script>
 
 <template>
   <Loading v-if="$fetchState.pending" />
-  <div v-else>
-    <TypeDescription resource="chart" />
+  <main v-else>
     <Banner
       v-if="versionInfoError"
       color="error"
       :label="versionInfoError"
     />
+    <Banner
+      v-if="warningMessage"
+      color="warning"
+      :label="warningMessage"
+      data-testid="deprecation-and-experimental-banner"
+    />
     <div
       v-if="chart"
       class="chart-header"
     >
-      <Banner
-        v-if="warningMessage"
-        color="warning"
-        :label="warningMessage"
-        data-testid="deprecation-and-experimental-banner"
-      />
-      <div class="name-logo-install">
-        <div class="name-logo">
-          <div class="logo-bg">
-            <LazyImage
-              :src="chart.icon"
-              class="logo"
-              :alt="t('catalog.charts.iconAlt', { app: chart.chartNameDisplay })"
-            />
-          </div>
-          <h1>
+      <div class="logo-container">
+        <div class="logo-box">
+          <LazyImage
+            :src="chart.icon"
+            class="logo"
+            :alt="t('catalog.charts.iconAlt', { app: chart.chartNameDisplay })"
+          />
+        </div>
+        <div
+          v-if="chart.featured"
+          v-clean-tooltip="t('generic.featured')"
+          class="featured-pill"
+        >
+          {{ t('generic.shortFeatured') }}
+        </div>
+      </div>
+      <div class="header-body">
+        <div class="header-top">
+          <h1
+            class="title"
+            data-testid="chart-header-title"
+          >
             <router-link :to="{ name: 'c-cluster-apps-charts' }">
               {{ t('catalog.chart.header.charts') }}:
             </router-link>
-            {{ chart.chartNameDisplay }} ({{ targetVersion }})
+            {{ chart.chartNameDisplay }}
           </h1>
+          <div
+            v-if="headerContent.statuses.length"
+            class="statuses"
+          >
+            <div
+              v-for="(status, i) in headerContent.statuses"
+              :key="i"
+              class="status"
+            >
+              <i
+                v-clean-tooltip="t(status.tooltip.key)"
+                :class="['icon', status.icon, status.color]"
+                :style="{color: status.customColor}"
+                role="img"
+                :aria-label="t(status.tooltip.key)"
+              />
+            </div>
+          </div>
+        </div>
+        <div class="header-sub-top">
+          <AppChartCardSubHeader :items="headerContent.subHeaderItems" />
+        </div>
+        <div class="header-middle">
+          <div
+            v-if="version && version.description"
+            class="description"
+          >
+            <p>{{ version.description }}</p>
+          </div>
+        </div>
+        <div class="header-bottom">
+          <AppChartCardFooter
+            :items="headerContent.footerItems"
+            @click:item="handleHeaderItemClick"
+          />
         </div>
-        <button
-          v-if="!requires.length"
-          type="button"
-          data-testid="btn-chart-install"
-          class="btn role-primary"
-          @click.prevent="install"
-        >
-          {{ t(`asyncButton.${action}.action` ) }}
-        </button>
       </div>
-      <div
-        v-if="chart.windowsIncompatible"
-        class="mt-5"
+      <RcButton
+        v-if="!requires.length"
+        data-testid="btn-chart-install"
+        class="btn role-primary"
+        @click.prevent="install"
       >
-        <label class="os-label">{{ t('catalog.charts.windowsIncompatible') }}</label>
-      </div>
-      <div
-        v-if="requires.length || warnings.length || targetedAppWarning || osWarning"
-        class="mt-20"
+        <i
+          v-if="action === 'upgrade'"
+          class="icon icon-upgrade-alt mmr-2"
+        />
+        {{ t(`asyncButton.${action}.action` ) }}
+      </RcButton>
+    </div>
+
+    <div class="dashed-spacer" />
+
+    <div
+      v-if="requires.length || warnings.length || targetedAppWarning || osWarning"
+      class="chart-banners"
+    >
+      <Banner
+        v-if="osWarning"
+        color="error"
       >
-        <Banner
-          v-if="osWarning"
-          color="error"
-        >
-          <span v-clean-html="osWarning" />
-        </Banner>
-        <Banner
-          v-for="(msg, i) in requires"
-          :key="i"
-          color="error"
-        >
-          <span v-clean-html="msg" />
-        </Banner>
+        <span v-clean-html="osWarning" />
+      </Banner>
+      <Banner
+        v-for="(msg, i) in requires"
+        :key="i"
+        color="error"
+      >
+        <span v-clean-html="msg" />
+      </Banner>
 
-        <Banner
-          v-for="(msg, i) in warnings"
-          :key="i"
-          color="warning"
-        >
-          <span v-clean-html="msg" />
-        </Banner>
+      <Banner
+        v-for="(msg, i) in warnings"
+        :key="i"
+        color="warning"
+      >
+        <span v-clean-html="msg" />
+      </Banner>
 
-        <Banner
-          v-if="targetedAppWarning"
-          color="warning"
-        >
-          <span v-clean-html="targetedAppWarning" />
-        </Banner>
-      </div>
-      <div
-        v-else-if="version && version.description"
-        class="description mt-10"
+      <Banner
+        v-if="targetedAppWarning"
+        color="warning"
       >
-        <p>
-          {{ version.description }}
-        </p>
-      </div>
+        <span v-clean-html="targetedAppWarning" />
+      </Banner>
     </div>
 
-    <div class="spacer" />
-
-    <div class="chart-content">
+    <div class="chart-body">
       <ChartReadme
         v-if="hasReadme"
         :version-info="versionInfo"
-        class="chart-content__tabs"
+        :show-app-readme="false"
+        :hide-readme-first-title="false"
+        class="chart-body__readme"
       />
       <div
         v-else
-        class="chart-content__tabs"
+        class="chart-body__readme"
       >
         {{ t('catalog.install.appReadmeMissing', {}, true) }}
       </div>
-      <div
+      <aside
         v-if="version"
-        class="chart-content__right-bar ml-20"
+        class="chart-body__info"
       >
-        <div class="chart-content__right-bar__section">
-          <h3>
-            {{ t('catalog.chart.info.chartVersions.label') }}
-          </h3>
+        <div class="chart-body__info-section">
+          <h4>{{ t('catalog.chart.info.chartVersions.label') }}</h4>
           <div
             v-for="vers of versions"
             :key="vers.id"
-            class="chart-content__right-bar__section--cVersion"
+            class="chart-body__info-section--versions"
+            data-testid="chart-versions"
           >
-            <b v-if="vers.originalVersion === version.version">{{ vers.originalVersion === currentVersion ? t('catalog.install.versions.current', { ver: currentVersion }): vers.shortLabel }}</b>
-            <a
+            <b
+              v-if="vers.originalVersion === version.version"
+              v-clean-tooltip="vers.label"
+              class="current-version"
+            >
+              <template v-if="vers.originalVersion === currentVersion">
+                <span class="ellipsis">{{ currentVersion }}</span>
+                <i class="icon icon-confirmation-alt" />
+              </template>
+              <span
+                v-else
+                class="ellipsis"
+              >
+                {{ vers.originalVersion }}
+              </span>
+            </b>
+            <div
               v-else
-              v-clean-tooltip="vers.label.length > 16 ? vers.label : null"
-              @click.prevent="selectVersion(vers)"
+              class="current-version"
             >
-              {{ vers.originalVersion === currentVersion ? t('catalog.install.versions.current', { ver: currentVersion }): vers.shortLabel }}
-            </a>
-            <DateFormatter
-              v-if="vers.created !== ZERO_TIME"
-              :value="vers.created"
-              :show-time="false"
-            />
-          </div>
-          <div class="mt-10 chart-content__right-bar__section--showMore">
-            <button
-              v-if="mappedVersions.length > showLastVersions"
-              type="button"
-              class="btn btn-sm role-link"
-              @click="showMoreVersions = !showMoreVersions"
+              <router-link
+                v-clean-tooltip="vers.label"
+                :to="getVersionRoute(vers)"
+                class="ellipsis"
+                data-testid="chart-version-link"
+              >
+                {{ vers.originalVersion === currentVersion ? currentVersion : vers.originalVersion }}
+              </router-link>
+              <i
+                v-if="vers.originalVersion === currentVersion"
+                class="icon icon-confirmation-alt"
+              />
+            </div>
+            <p
+              v-clean-tooltip="{ content: getVersionDateTooltip(vers.created), placement: 'left'}"
+              class="version-date"
             >
-              {{ t(`catalog.chart.info.chartVersions.${showMoreVersions ? 'showLess' : 'showMore'}`) }}
-            </button>
+              {{ formatVersionDate(vers.created) }}
+            </p>
           </div>
+          <a
+            v-if="mappedVersions.length > showLastVersions"
+            href="#"
+            role="button"
+            class="mmt-1 secondary-text-link"
+            data-testid="chart-show-more-versions"
+            @click.prevent="showMoreVersions = !showMoreVersions"
+          >
+            {{ t(`catalog.chart.info.chartVersions.${showMoreVersions ? 'showLess' : 'showMore'}`) }}
+          </a>
         </div>
         <div
           v-if="appVersion"
-          class="chart-content__right-bar__section"
+          class="chart-body__info-section"
         >
-          <h3 t>
-            {{ t('catalog.chart.info.appVersion') }}
-          </h3>
+          <h4>{{ t('catalog.chart.info.appVersion') }}</h4>
           {{ appVersion }}
         </div>
+        <div
+          v-if="repo"
+          class="chart-body__info-section"
+        >
+          <h4>{{ t('catalog.chart.info.repository') }}</h4>
+          <router-link
+            :to="repo.detailLocation"
+            data-testid="chart-repo-link"
+          >
+            {{ chart.repoNameDisplay }}
+          </router-link>
+        </div>
         <div
           v-if="home"
-          class="chart-content__right-bar__section"
+          class="chart-body__info-section"
         >
-          <h3>{{ t('catalog.chart.info.home') }}</h3>
+          <h4>{{ t('catalog.chart.info.home') }}</h4>
           <a
             :href="home"
             rel="nofollow noopener noreferrer"
             target="_blank"
-          >{{ home }}</a>
+            data-testid="chart-home-link"
+          >{{ home }}<i class="icon icon-external-link" /><span class="sr-only">{{ t('generic.opensInNewTab') }}</span></a>
         </div>
         <div
           v-if="maintainers.length"
-          class="chart-content__right-bar__section"
+          class="chart-body__info-section"
         >
-          <h3>{{ t('catalog.chart.info.maintainers') }}</h3>
+          <h4>{{ t('catalog.chart.info.maintainers') }}</h4>
           <a
             v-for="m of maintainers"
             :key="m.id"
             :href="m.url"
             rel="nofollow noopener noreferrer"
             target="_blank"
-          >{{ m.text }}</a>
+          >{{ m.text }}<span class="sr-only">{{ t('generic.opensInNewTab') }}</span></a>
         </div>
         <div
           v-if="version.sources"
-          class="chart-content__right-bar__section"
+          class="chart-body__info-section"
         >
-          <h3>{{ t('catalog.chart.info.related') }}</h3>
+          <h4>{{ t('catalog.chart.info.related') }}</h4>
           <a
             v-for="s of version.sources"
             :key="s"
             :href="s"
             rel="nofollow noopener noreferrer"
             target="_blank"
-          >{{ s }}</a>
+          >{{ s }}<i class="icon icon-external-link" /><span class="sr-only">{{ t('generic.opensInNewTab') }}</span></a>
         </div>
         <div
           v-if="version.urls"
-          class="chart-content__right-bar__section"
+          class="chart-body__info-section"
         >
-          <h3>{{ t('catalog.chart.info.chartUrls') }}</h3>
+          <h4>{{ t('catalog.chart.info.chartUrls') }}</h4>
           <a
             v-for="url of version.urls"
             :key="url"
             :href="url"
             rel="nofollow noopener noreferrer"
             target="_blank"
-          >{{ version.urls.length === 1 ? 'Download': url }}</a>
+          >{{ version.urls.length === 1 ? 'Download': url }}<span class="sr-only">{{ t('generic.opensInNewTab') }}</span></a>
         </div>
         <div
           v-if="version.keywords"
-          class="chart-content__right-bar__section chart-content__right-bar__section--keywords"
+          class="chart-body__info-section chart-body__info-section--keywords"
         >
-          <h3>{{ t('catalog.chart.info.keywords') }}</h3>
-          {{ version.keywords.join(', ') }}
+          <h4>{{ t('catalog.chart.info.keywords') }}</h4>
+          <div class="keyword-links">
+            <span
+              v-for="(keyword, i) in version.keywords"
+              :key="i"
+              class="keyword-item"
+            >
+              <router-link
+                v-clean-tooltip="t('catalog.charts.findSimilar.message', { type: t('catalog.charts.findSimilar.types.keyword') }, true)"
+                :to="{ name: 'c-cluster-apps-charts', query: { [SEARCH_QUERY]: keyword } }"
+                data-testid="chart-keyword-link"
+              >
+                {{ keyword }}
+              </router-link>
+              <span v-if="version.keywords.length > 1 && i !== version.keywords.length - 1">,</span>
+            </span>
+          </div>
         </div>
-      </div>
+      </aside>
     </div>
-  </div>
+  </main>
 </template>
 
 <style lang="scss" scoped>
+  $logo-box-width: 60px;
   $name-height: 50px;
   $padding: 5px;
 
   .chart-header {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    gap: var(--gap-lg);
 
-    .name-logo-install {
+    .logo-container {
       display: flex;
+      flex-direction: column;
       align-items: center;
-      justify-content: space-between;
-      height: $name-height;
+      gap: 12px;
+
+      .logo-box {
+        width: $logo-box-width;
+        height: $logo-box-width;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background: #fff;
+        border-radius: var(--border-radius);
+
+        .logo {
+          width: 48px;
+          height: 48px;
+          object-fit: contain;
+        }
+      }
+
+      .featured-pill {
+        display: flex;
+        width: $logo-box-width;
+        padding: 4px 8px;
+        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;
+      }
     }
 
-    .name-logo {
+    .header-body {
       display: flex;
-      align-items: center;
+      flex-direction: column;
+      align-items: flex-start;
+      gap: var(--gap);
 
-      .logo-bg {
-        height: $name-height;
-        width: $name-height;
-        background-color: white;
-        border: $padding solid white;
-        border-radius: calc( 3 * var(--border-radius));
-        position: relative;
-      }
+      .header-top {
+        display: flex;
 
-      .logo {
-        max-height: $name-height - 2 * $padding;
-        max-width: $name-height - 2 * $padding;
-        position: absolute;
-        width: auto;
-        height: auto;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        margin: auto;
-      }
+        .title {
+          margin: 0 12px 0 0;
+        }
 
-      h1 {
-        margin: 0 20px;
+        .statuses {
+          display: flex;
+          align-items: center;
+          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); }
+            }
+          }
+        }
       }
     }
 
-    .os-label{
-      background-color: var(--warning-banner-bg);
-      color: var(--warning);
-    }
-
     .btn {
-      height: 30px;
+      margin-left: auto;
+      height: 40px;
     }
 
     .description {
-      margin-right: 80px;
+      line-height: 21px;
     }
   }
 
-  .chart-content {
+  .chart-banners {
+    .banner {
+      margin-top: 0;
+      margin-bottom: 24px;
+    }
+  }
+
+  .chart-body {
     display: flex;
-    &__tabs {
+    &__readme {
       flex: 1;
       min-width: 400px;
+      padding: 12px 24px;
     }
-    &__right-bar {
-      min-width: 260px;
-      max-width: 260px;
-
-      &__section {
+    &__info {
+      min-width: 300px;
+      max-width: 300px;
+      height: max-content;
+      background: var(--sortable-table-header-bg);
+      padding: 16px;
+      border-radius: 8px;
+      margin-left: 24px;
+
+      &-section {
         display: flex;
         flex-direction: column;
-        padding-bottom: 20px;
+        padding-bottom: 24px;
         word-break: break-all;
+        line-height: 21px;
+
+        h4 {
+          font-weight: bold;
+        }
+
         a {
           cursor: pointer;
+
+          .icon-external-link {
+            margin-left: 8px;
+          }
         }
-        &--cVersion{
+
+        &--versions{
           display: flex;
           justify-content: space-between;
+          margin-bottom: 4px;
+
+          .version-date {
+            color: var(--link-text-secondary);
+          }
+
+          .current-version {
+            display: flex;
+            align-items: center;
+
+            .ellipsis {
+              display: block;
+              max-width: 140px;
+              white-space: nowrap;
+              overflow: hidden;
+              text-overflow: ellipsis;
+            }
+
+            .icon-confirmation-alt {
+              color: var(--success);
+              margin-left: 12px;
+              font-size: 19px;
+            }
+          }
         }
 
         &--keywords{
-         word-break: break-word;
+          color: var(--link-text-secondary);
+          padding-bottom: 0;
+
+          .keyword-links {
+            .keyword-item {
+              display: inline-block;
+              white-space: nowrap;
+
+              span {
+                margin-right: 4px;
+                margin-left: -2px;
+              }
+            }
+          }
         }
-
       }
     }
   }