add links for chart details sidebar

vmware-tanzu · Jan 22, 2018 · 7fb0e15 · 7fb0e15
1 parent cb2f42c
commit 7fb0e15
Show file tree

Hide file tree

Showing 5 changed files with 89 additions and 18 deletions.
diff --git a/src/components/ChartView/ChartHeader.tsx b/src/components/ChartView/ChartHeader.tsx
@@ -6,7 +6,7 @@ import ChartIcon from "../ChartIcon";
 interface IChartHeaderProps {
   appVersion?: string;
   id: string;
-  icon: string;
+  icon?: string;
   repo: string;
   description: string;
 }

diff --git a/src/components/ChartView/ChartMaintainers.tsx b/src/components/ChartView/ChartMaintainers.tsx
@@ -0,0 +1,33 @@
+import * as React from "react";
+
+import { IChartAttributes } from "../../shared/types";
+
+interface IChartMaintainersProps {
+  maintainers: IChartAttributes["maintainers"];
+  githubIDAsNames?: boolean;
+}
+
+class ChartMaintainers extends React.Component<IChartMaintainersProps> {
+  public render() {
+    const maintainerLinks = this.props.maintainers.map((v, i) => {
+      let link: string | JSX.Element = v.name;
+      if (this.props.githubIDAsNames) {
+        link = (
+          <a href={`/~https://github.com/${v.name}`} target="_blank">
+            {v.name}
+          </a>
+        );
+      } else if (v.email) {
+        link = <a href={`mailto:${v.email}`}>{v.name}</a>;
+      }
+      return <li key={i}>{link}</li>;
+    });
+    return (
+      <div className="ChartMaintainers">
+        <ul className="remove-style padding-l-reset margin-b-reset">{maintainerLinks}</ul>
+      </div>
+    );
+  }
+}
+
+export default ChartMaintainers;
diff --git a/src/components/ChartView/ChartView.css b/src/components/ChartView/ChartView.css
@@ -7,9 +7,15 @@
   width: 66.66%;
 }
 
+.ChartView__sidebar-container {
+  /* for col-3 class */
+  width: 25%;
+}
+
 .ChartViewSidebar__section {
   /* hack to make h2 margin work... */
   padding-top: 0.1px;
+  overflow-wrap: break-word;
 }
 
 .ChartViewSidebar__section > div {

diff --git a/src/components/ChartView/ChartView.tsx b/src/components/ChartView/ChartView.tsx
@@ -4,6 +4,7 @@ import { RouterAction } from "react-router-redux";
 import { IChart, IChartState } from "../../shared/types";
 import ChartDeployButton from "./ChartDeployButton";
 import ChartHeader from "./ChartHeader";
+import ChartMaintainers from "./ChartMaintainers";
 import ChartReadme from "./ChartReadme";
 import ChartVersionsList from "./ChartVersionsList";
 import "./ChartView.css";
@@ -45,8 +46,8 @@ class ChartView extends React.Component<IChartViewProps> {
                 <ChartReadme markdown={readme} />
               </div>
               {/* TODO: fix when upgrading to bitnami-ui v3 - col-4 does not fit correctly in v2 */}
-              <div className="col-3">
-                <aside className="ChartViewSidebar bg-light margin-v-big padding-h-normal">
+              <div className="col-3 ChartView__sidebar-container">
+                <aside className="ChartViewSidebar bg-light margin-v-big padding-h-normal padding-b-normal">
                   <div className="ChartViewSidebar__section">
                     <h2>Usage</h2>
                     <ChartDeployButton push={push} chart={chart} deployChart={deployChart} />
@@ -55,22 +56,45 @@ class ChartView extends React.Component<IChartViewProps> {
                     <h2>Chart Versions</h2>
                     <ChartVersionsList versions={versions} />
                   </div>
-                  <div className="ChartViewSidebar__section">
-                    <h2>App Version</h2>
-                    <div>{chart.relationships.latestChartVersion.data.app_version}</div>
-                  </div>
-                  <div className="ChartViewSidebar__section">
-                    <h2>Home</h2>
-                    <div>{chart.attributes.home}</div>
-                  </div>
+                  {chart.relationships.latestChartVersion.data.app_version && (
+                    <div className="ChartViewSidebar__section">
+                      <h2>App Version</h2>
+                      <div>{chart.relationships.latestChartVersion.data.app_version}</div>
+                    </div>
+                  )}
+                  {chart.attributes.home && (
+                    <div className="ChartViewSidebar__section">
+                      <h2>Home</h2>
+                      <div>
+                        <a href={chart.attributes.home} target="_blank">
+                          {chart.attributes.home}
+                        </a>
+                      </div>
+                    </div>
+                  )}
                   <div className="ChartViewSidebar__section">
                     <h2>Maintainers</h2>
-                    {chart.attributes.maintainers.map((m, i) => <div key={i}>{m.name}</div>)}
-                  </div>
-                  <div className="ChartViewSidebar__section">
-                    <h2>Related</h2>
-                    {chart.attributes.sources.map((s, i) => <div key={i}>{s}</div>)}
+                    <ChartMaintainers
+                      maintainers={chart.attributes.maintainers}
+                      githubIDAsNames={this.isKubernetesCharts(chart.attributes.repo.url)}
+                    />
                   </div>
+                  {chart.attributes.sources.length > 0 && (
+                    <div className="ChartViewSidebar__section">
+                      <h2>Related</h2>
+                      <div className="ChartSources">
+                        <ul className="remove-style padding-l-reset margin-b-reset">
+                          {chart.attributes.sources.map((s, i) => (
+                            <li key={i}>
+                              <a href={s} target="_blank">
+                                {s}
+                              </a>
+                            </li>
+                          ))}
+                        </ul>
+                      </div>
+                    </div>
+                  )}
                 </aside>
               </div>
             </div>
@@ -79,6 +103,13 @@ class ChartView extends React.Component<IChartViewProps> {
       </section>
     );
   }
+
+  private isKubernetesCharts(repoURL: string) {
+    return (
+      repoURL === "https://kubernetes-charts.storage.googleapis.com" ||
+      repoURL === "https://kubernetes-charts-incubator.storage.googleapis.com"
+    );
+  }
 }
 
 export default ChartView;
diff --git a/src/shared/types.ts b/src/shared/types.ts
@@ -27,11 +27,12 @@ export interface IChart {
 export interface IChartAttributes {
   name: string;
   description: string;
-  home: string;
-  icon: string;
+  home?: string;
+  icon?: string;
   keywords: string[];
   maintainers: Array<{
     name: string;
+    email?: string;
   }>;
   repo: {
     name: string;