Chart View v2 and other minor changes (#1892)

vmware-tanzu · Jul 28, 2020 · c8b5673 · c8b5673
1 parent 55b916a
commit c8b5673
Show file tree

Hide file tree

Showing 34 changed files with 869 additions and 128 deletions.
diff --git a/dashboard/src/components/AppList/AppList.v2.test.tsx b/dashboard/src/components/AppList/AppList.v2.test.tsx
@@ -73,7 +73,7 @@ context("while fetching apps", () => {
   it("shows the search filter and deploy button", () => {
     const wrapper = shallow(<AppList {...props} />);
     expect(wrapper.find("SearchFilter")).toExist();
-    expect(wrapper.find("Link").findWhere(l => l.text() === "Deploy")).toExist();
+    expect(wrapper.find("Link").findWhere(l => l.text().includes("Deploy"))).toExist();
   });
 });
 
@@ -99,7 +99,7 @@ context("when fetched but not apps available", () => {
   it("shows the search filter and deploy button", () => {
     const wrapper = shallow(<AppList {...props} />);
     expect(wrapper.find("SearchFilter")).toExist();
-    expect(wrapper.find("Link").findWhere(l => l.text() === "Deploy")).toExist();
+    expect(wrapper.find("Link").findWhere(l => l.text().includes("Deploy"))).toExist();
   });
 });
 

diff --git a/dashboard/src/components/AppList/AppList.v2.tsx b/dashboard/src/components/AppList/AppList.v2.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 import { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
-import { CdsButton } from "../Clarity/clarity";
+import { CdsButton, CdsIcon } from "../Clarity/clarity";
 
 import { IFeatureFlags } from "../../shared/Config";
 import { IAppState, IClusterServiceVersion, IResource } from "../../shared/types";
@@ -74,7 +74,9 @@ function AppList(props: IAppListProps) {
         <Column span={2}>
           <div className="header-button">
             <Link to={url.app.catalog(cluster, namespace)}>
-              <CdsButton status="primary">Deploy</CdsButton>
+              <CdsButton status="primary">
+                <CdsIcon shape="deploy" inverse={true} /> Deploy
+              </CdsButton>
             </Link>
           </div>
         </Column>

diff --git a/dashboard/src/components/AppList/AppListItem.v2.tsx b/dashboard/src/components/AppList/AppListItem.v2.tsx
@@ -1,4 +1,3 @@
-import { bundleIcon, circleArrowIcon, ClarityIcons } from "@clr/core/icon-shapes";
 import * as React from "react";
 import helmIcon from "../../icons/helm.svg";
 import placeholder from "../../placeholder.png";
@@ -11,8 +10,6 @@ import Column from "components/js/Column";
 import Row from "components/js/Row";
 import "./AppListItem.v2.css";
 
-ClarityIcons.addIcons(bundleIcon, circleArrowIcon);
-
 export interface IAppListItemProps {
   app: IAppOverview;
   cluster: string;

diff --git a/dashboard/src/components/AppList/__snapshots__/AppList.v2.test.tsx.snap b/dashboard/src/components/AppList/__snapshots__/AppList.v2.test.tsx.snap
@@ -35,7 +35,11 @@ exports[`when an error is present matches the snapshot 1`] = `
           <ReactWrapperComponent
             status="primary"
           >
-            Deploy
+            <ReactWrapperComponent
+              inverse={true}
+              shape="deploy"
+            />
+             Deploy
           </ReactWrapperComponent>
         </Link>
       </div>
@@ -91,7 +95,11 @@ exports[`when an error is present renders a generic error message 1`] = `
           <ReactWrapperComponent
             status="primary"
           >
-            Deploy
+            <ReactWrapperComponent
+              inverse={true}
+              shape="deploy"
+            />
+             Deploy
           </ReactWrapperComponent>
         </Link>
       </div>
@@ -147,7 +155,11 @@ exports[`when apps available matches the snapshot 1`] = `
           <ReactWrapperComponent
             status="primary"
           >
-            Deploy
+            <ReactWrapperComponent
+              inverse={true}
+              shape="deploy"
+            />
+             Deploy
           </ReactWrapperComponent>
         </Link>
       </div>
@@ -216,7 +228,11 @@ exports[`when custom resources available matches the snapshot 1`] = `
           <ReactWrapperComponent
             status="primary"
           >
-            Deploy
+            <ReactWrapperComponent
+              inverse={true}
+              shape="deploy"
+            />
+             Deploy
           </ReactWrapperComponent>
         </Link>
       </div>
@@ -298,7 +314,11 @@ exports[`when fetched but not apps available matches the snapshot 1`] = `
           <ReactWrapperComponent
             status="primary"
           >
-            Deploy
+            <ReactWrapperComponent
+              inverse={true}
+              shape="deploy"
+            />
+             Deploy
           </ReactWrapperComponent>
         </Link>
       </div>
@@ -355,7 +375,11 @@ exports[`while fetching apps loading spinner matches the snapshot 1`] = `
           <ReactWrapperComponent
             status="primary"
           >
-            Deploy
+            <ReactWrapperComponent
+              inverse={true}
+              shape="deploy"
+            />
+             Deploy
           </ReactWrapperComponent>
         </Link>
       </div>
@@ -411,7 +435,11 @@ exports[`while fetching apps loading spinner matches the snapshot 2`] = `
           <ReactWrapperComponent
             status="primary"
           >
-            Deploy
+            <ReactWrapperComponent
+              inverse={true}
+              shape="deploy"
+            />
+             Deploy
           </ReactWrapperComponent>
         </Link>
       </div>

diff --git a/dashboard/src/components/AppView/AppView.v2.scss b/dashboard/src/components/AppView/AppView.v2.scss
@@ -1,17 +1,3 @@
-.appview-header {
-  width: 100%;
-}
-
-.control-buttons {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  height: 100%;
-  .header-button {
-    margin-left: 0.5rem;
-  }
-}
-
 .appview-separator {
   border-bottom: 2px solid #f1f1f1;
   padding-bottom: 1.2rem;

diff --git a/dashboard/src/components/AppView/AppView.v2.tsx b/dashboard/src/components/AppView/AppView.v2.tsx
@@ -1,4 +1,3 @@
-import { ClarityIcons, rewindIcon, trashIcon, uploadCloudIcon } from "@clr/core/icon-shapes";
 import { RouterAction } from "connected-react-router";
 import { assignWith } from "lodash";
 import { get } from "lodash";
@@ -26,8 +25,6 @@ import "./AppView.v2.css";
 import ChartInfo from "./ChartInfo/ChartInfo.v2";
 import ResourceTabs from "./ResourceTabs";
 
-ClarityIcons.addIcons(rewindIcon, trashIcon, uploadCloudIcon);
-
 export interface IAppViewProps {
   cluster: string;
   namespace: string;
@@ -164,7 +161,7 @@ export default function AppView({
   return (
     <section>
       <PageHeader>
-        <div className="appview-header">
+        <div className="kubeapps-header-content">
           <Row>
             <Column span={7}>
               <Row>

diff --git a/dashboard/src/components/AppView/ChartInfo/ChartInfo.v2.test.tsx b/dashboard/src/components/AppView/ChartInfo/ChartInfo.v2.test.tsx
@@ -25,7 +25,7 @@ const defaultProps = {
 it("renders a app item", () => {
   const wrapper = mount(<ChartInfo {...defaultProps} />);
   // Renders info about the description and versions
-  const subsections = wrapper.find(".chartinfo-subsection");
+  const subsections = wrapper.find(".left-menu-subsection");
   expect(subsections).toHaveLength(2);
 });
 

diff --git a/dashboard/src/components/AppView/ChartInfo/ChartInfo.v2.tsx b/dashboard/src/components/AppView/ChartInfo/ChartInfo.v2.tsx
@@ -10,10 +10,10 @@ interface IChartInfoProps {
 function ChartInfo({ app }: IChartInfoProps) {
   const metadata = app.chart && app.chart.metadata;
   return (
-    <>
+    <section className="left-menu">
       {metadata && (
-        <section className="chartinfo-subsection" aria-labelledby="chartinfo-versions">
-          <h5 className="chartinfo-subsection-title" id="chartinfo-versions">
+        <section className="left-menu-subsection" aria-labelledby="chartinfo-versions">
+          <h5 className="left-menu-subsection-title" id="chartinfo-versions">
             Versions
           </h5>
           <div>
@@ -29,15 +29,15 @@ function ChartInfo({ app }: IChartInfoProps) {
         </section>
       )}
       {metadata && (
-        <section className="chartinfo-subsection" aria-labelledby="chartinfo-description">
-          <h5 className="chartinfo-subsection-title" id="chartinfo-description">
+        <section className="left-menu-subsection" aria-labelledby="chartinfo-description">
+          <h5 className="left-menu-subsection-title" id="chartinfo-description">
             Description
           </h5>
           <span>{metadata.description}</span>
         </section>
       )}
       <ChartUpdateInfo app={app} />
-    </>
+    </section>
   );
 }
 

diff --git a/dashboard/src/components/AppView/ChartInfo/ChartUpdateInfo.tsx b/dashboard/src/components/AppView/ChartInfo/ChartUpdateInfo.tsx
@@ -1,17 +1,9 @@
-import {
-  checkCircleIcon,
-  circleArrowIcon,
-  ClarityIcons,
-  exclamationTriangleIcon,
-} from "@clr/core/icon-shapes";
 import { CdsIcon } from "components/Clarity/clarity";
 import * as React from "react";
 
 import { hapi } from "shared/hapi/release";
 import { IChartUpdateInfo, IRelease } from "shared/types";
 
-ClarityIcons.addIcons(exclamationTriangleIcon, checkCircleIcon, circleArrowIcon);
-
 interface IChartInfoProps {
   app: IRelease;
 }
@@ -59,8 +51,8 @@ export default function ChartUpdateInfo(props: IChartInfoProps) {
   // an update available or not
   if (app.updateInfo && app.chart?.metadata) {
     updateInfo = (
-      <section className="chartinfo-subsection" aria-labelledby="chartinfo-update-info">
-        <h5 className="chartinfo-subsection-title" id="chartinfo-update-info">
+      <section className="left-menu-subsection" aria-labelledby="chartinfo-update-info">
+        <h5 className="left-menu-subsection-title" id="chartinfo-update-info">
           Update Info
         </h5>
         {getUpdateInfo(app.updateInfo, app.chart.metadata)}

diff --git a/...board/src/components/AppView/ResourceTable/ResourceItem/SecretItem/SecretItemDatum.v2.tsx b/...board/src/components/AppView/ResourceTable/ResourceItem/SecretItem/SecretItemDatum.v2.tsx
@@ -1,4 +1,3 @@
-import { ClarityIcons, copyToClipboardIcon, eyeHideIcon, eyeIcon } from "@clr/core/icon-shapes";
 import Column from "components/js/Column";
 import Row from "components/js/Row";
 import React, { useEffect, useRef } from "react";
@@ -7,7 +6,6 @@ import { CdsIcon } from "../../../../Clarity/clarity";
 
 import ReactTooltip from "react-tooltip";
 import "./SecretItemDatum.v2.css";
-ClarityIcons.addIcons(eyeIcon, eyeHideIcon, copyToClipboardIcon);
 
 interface ISecretItemDatumProps {
   name: string;

diff --git a/dashboard/src/components/ApplicationStatus/ApplicationStatus.v2.tsx b/dashboard/src/components/ApplicationStatus/ApplicationStatus.v2.tsx
@@ -1,4 +1,3 @@
-import { ClarityIcons, exclamationTriangleIcon } from "@clr/core/icon-shapes";
 import { flatten } from "lodash";
 import { get } from "lodash";
 import React, { useEffect, useState } from "react";
@@ -12,8 +11,6 @@ import { hapi } from "../../shared/hapi/release";
 import { IK8sList, IKubeItem, IResource } from "../../shared/types";
 import "./ApplicationStatus.v2.css";
 
-ClarityIcons.addIcons(exclamationTriangleIcon);
-
 interface IApplicationStatusProps {
   deployments: Array<IKubeItem<IResource | IK8sList<IResource, {}>>>;
   statefulsets: Array<IKubeItem<IResource | IK8sList<IResource, {}>>>;

diff --git a/dashboard/src/components/Catalog/Catalog.v2.tsx b/dashboard/src/components/Catalog/Catalog.v2.tsx
@@ -1,4 +1,3 @@
-import { bundleIcon, ClarityIcons } from "@clr/core/icon-shapes";
 import { RouterAction } from "connected-react-router";
 import { uniq } from "lodash";
 import React, { useEffect, useState } from "react";
@@ -22,8 +21,6 @@ import { app } from "shared/url";
 import "./Catalog.v2.css";
 import CatalogItems from "./CatalogItems";
 
-ClarityIcons.addIcons(bundleIcon);
-
 interface ICatalogProps {
   charts: IChartState;
   repo: string;

diff --git a/dashboard/src/components/Catalog/ChartSummary.tsx b/dashboard/src/components/Catalog/ChartSummary.tsx
@@ -0,0 +1,73 @@
+import ChartMaintainers from "components/ChartView/ChartMaintainers";
+import React from "react";
+import { IChartAttributes, IChartVersion } from "shared/types";
+
+interface IChartSummaryProps {
+  version: IChartVersion;
+  chartAttrs: IChartAttributes;
+}
+
+function isKubernetesCharts(repoURL: string) {
+  return (
+    repoURL === "https://kubernetes-charts.storage.googleapis.com" ||
+    repoURL === "https://kubernetes-charts-incubator.storage.googleapis.com"
+  );
+}
+
+export default function ChartSummary({ version, chartAttrs }: IChartSummaryProps) {
+  return (
+    <div className="left-menu">
+      {version.attributes.app_version && (
+        <section className="left-menu-subsection" aria-labelledby="chartinfo-versions">
+          <h5 className="left-menu-subsection-title" id="chartinfo-versions">
+            App Version
+          </h5>
+          <div>{version.attributes.app_version}</div>
+        </section>
+      )}
+      {chartAttrs.home && (
+        <section className="left-menu-subsection" aria-labelledby="chartinfo-versions">
+          <h5 className="left-menu-subsection-title" id="chartinfo-versions">
+            Home
+          </h5>
+          <div>
+            <a href={chartAttrs.home} target="_blank" rel="noopener noreferrer">
+              {chartAttrs.home}
+            </a>
+          </div>
+        </section>
+      )}
+      {chartAttrs.maintainers?.length > 0 && (
+        <section className="left-menu-subsection" aria-labelledby="chartinfo-versions">
+          <h5 className="left-menu-subsection-title" id="chartinfo-versions">
+            Maintainers
+          </h5>
+          <div>
+            <ChartMaintainers
+              maintainers={chartAttrs.maintainers}
+              githubIDAsNames={isKubernetesCharts(chartAttrs.repo.url)}
+            />
+          </div>
+        </section>
+      )}
+      {chartAttrs.sources?.length > 0 && (
+        <section className="left-menu-subsection" aria-labelledby="chartinfo-versions">
+          <h5 className="left-menu-subsection-title" id="chartinfo-versions">
+            Related
+          </h5>
+          <div>
+            <ul>
+              {chartAttrs.sources.map((s, i) => (
+                <li key={i}>
+                  <a href={s} target="_blank" rel="noopener noreferrer">
+                    {s}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </section>
+      )}
+    </div>
+  );
+}