Add link to report an issue with a package (#1605)

Closes #1575

Signed-off-by: Sergio Castaño Arteaga <tegioz@icloud.com>
Signed-off-by: Cintia Sanchez Garcia <cynthiasg@icloud.com>
Co-authored-by: Sergio Castaño Arteaga <tegioz@icloud.com>
Co-authored-by: Cintia Sanchez Garcia <cynthiasg@icloud.com>

charts/artifact-hub/Chart.yaml

@@ -2,7 +2,7 @@ apiVersion: v2
 name: artifact-hub
 description: Artifact Hub is a web-based application that enables finding, installing, and publishing Kubernetes packages.
 type: application
-version: 1.3.0
+version: 1.3.1-0
 appVersion: 1.3.0
 kubeVersion: ">= 1.14.0-0"
 home: https://artifacthub.io
@@ -73,6 +73,11 @@ annotations:
       image: artifacthub/scanner:v1.3.0
     - name: trivy
       image: aquasec/trivy:0.20.0
+  artifacthub.io/links: |
+    - name: source
+      url: https://github.com/artifacthub/hub
+    - name: support
+      url: https://github.com/artifacthub/hub/issues
   artifacthub.io/screenshots: |
     - title: Home page
       url: https://artifacthub.github.io/hub/screenshots/screenshot1.jpg

docs/helm_annotations.md

@@ -38,6 +38,10 @@ Use this annotation to indicate the chart's license. By default, Artifact Hub tr
 
 This annotation allows including named links, which will be rendered nicely in Artifact Hub. You can use this annotation to include links not included previously in the Chart.yaml file, or you can use it to name links already present (in the sources section, for example).
 
+Some links names have a special meaning for Artifact Hub:
+
+**support**: when a link named *support* is provided, a link to report an issue will be displayed highlighted on the package view.
+
 - **artifacthub.io/maintainers** *(yaml string, see example below)*
 
 This annotation can be used if you want to display a different name for a given user in Artifact Hub than the one used in the Chart.yaml file. If the email used matches, the name used in the annotations entry will be displayed in Artifact Hub. It's also possible to include maintainers that should only be listed in Artifact Hub by adding additional entries.

docs/krew_annotations.md

@@ -28,6 +28,10 @@ Use this annotation to indicate the plugin's license. It must be a valid [SPDX i
 
 This annotation allows including named links, which will be rendered nicely in Artifact Hub.
 
+Some links names have a special meaning for Artifact Hub:
+
+**support**: when a link named *support* is provided, a link to report an issue will be displayed highlighted on the package view.
+
 - **artifacthub.io/maintainers** *(yaml string, see example below)*
 
 Use this annotation to list the maintainers of this package. Please note that the `email` field is *required* and entries that do not contain it will be silently ignored.

docs/tekton_annotations.md

@@ -20,6 +20,10 @@ Use this annotation to indicate the package's license. It must be a valid [SPDX
 
 This annotation allows including named links, which will be rendered nicely in Artifact Hub. By default, a link pointing to the source code of the package will be automatically added.
 
+Some links names have a special meaning for Artifact Hub:
+
+**support**: when a link named *support* is provided, a link to report an issue will be displayed highlighted on the package view.
+
 - **artifacthub.io/maintainers** *(yaml string, see example below)*
 
 Use this annotation to list the maintainers of this package. Please note that the `email` field is *required* and entries that do not contain it will be silently ignored.

web/src/layout/package/Links.tsx

@@ -2,6 +2,7 @@ import isNull from 'lodash/isNull';
 import isUndefined from 'lodash/isUndefined';
 import React from 'react';
 import { IconType } from 'react-icons';
+import { BsFlagFill } from 'react-icons/bs';
 import { FaGithub, FaLink } from 'react-icons/fa';
 import { TiHome } from 'react-icons/ti';
 
@@ -22,6 +23,7 @@ interface IconTypeList {
 const ICONS: IconTypeList = {
   homepage: TiHome,
   source: FaGithub,
+  support: BsFlagFill,
   default: FaLink,
 };
 

web/src/layout/package/index.tsx

@@ -21,6 +21,7 @@ import {
   FileModalItem,
   FileModalKind,
   Package,
+  PackageLink,
   RepositoryKind,
   SearchFiltersURL,
   Version,
@@ -417,6 +418,19 @@ const PackageView = (props: Props) => {
     [props.hash, props.searchUrlReferer, props.fromStarredPage, history]
   );
 
+  const getSupportLink = (): string | undefined => {
+    if (detail && detail.links) {
+      const support = detail.links.find((link: PackageLink) => link.name.toLowerCase() === 'support');
+      if (support) {
+        return support.url;
+      } else {
+        return undefined;
+      }
+    }
+
+    return undefined;
+  };
+
   const getAdditionalPkgContent = (): { content: JSX.Element; titles: string } | null => {
     if (isNull(detail) || isUndefined(detail)) return null;
     let additionalTitles = '';
@@ -476,6 +490,8 @@ const PackageView = (props: Props) => {
     return { content: additionalContent, titles: additionalTitles };
   };
 
+  const supportLink: string | undefined = getSupportLink();
+
   const additionalInfo = getAdditionalPkgContent();
 
   return (
@@ -942,6 +958,7 @@ const PackageView = (props: Props) => {
                           ) : (
                             <ReadmeWrapper
                               packageName={detail.displayName || detail.name}
+                              supportLink={supportLink}
                               markdownContent={detail.readme}
                               scrollIntoView={scrollIntoView}
                               additionalTitles={isNull(additionalInfo) ? '' : additionalInfo.titles}

web/src/layout/package/readme/TOC.module.css

@@ -34,15 +34,27 @@
   font-size: 1.85rem;
 }
 
+.minWidth {
+  width: 1%;
+}
+
 .title p {
   margin-bottom: 0;
 }
 
+.supportLinkWrapper {
+  margin-top: 0.6rem;
+}
+
 @media only screen and (max-width: 575.98px) {
   .title {
     font-size: 1.35rem;
   }
 
+  .supportLinkWrapper {
+    margin-top: 0.25rem;
+  }
+
   /* .toc {
     margin-left: 15px;
   } */

web/src/layout/package/readme/TOC.test.tsx

@@ -93,6 +93,11 @@ describe('TOC', () => {
       expect(screen.queryByRole('listbox')).toBeNull();
     });
 
+    it('renders support button', () => {
+      render(<TOC {...defaultProps} supportLink="http://link.test" />);
+      expect(screen.getByRole('button', { name: 'Open support link' })).toBeInTheDocument();
+    });
+
     it('does not render component when list is empty', () => {
       const { container } = render(<TOC {...defaultProps} toc={[]} />);
       expect(container).toBeEmptyDOMElement();

web/src/layout/package/readme/TOC.tsx

@@ -1,16 +1,19 @@
 import React, { useRef, useState } from 'react';
+import { BsFlagFill } from 'react-icons/bs';
 import { FaListUl } from 'react-icons/fa';
 import ReactMarkdown from 'react-markdown';
 
 import useOutsideClick from '../../../hooks/useOutsideClick';
 import { TOCEntryItem } from '../../../types';
 import cleanTOCEntry from '../../../utils/cleanTOCEntry';
+import ExternalLink from '../../common/ExternalLink';
 import styles from './TOC.module.css';
 import TOCList from './TOCList';
 
 interface Props {
   title: string;
   toc: TOCEntryItem[];
+  supportLink?: string;
   scrollIntoView: (id?: string) => void;
 }
 
@@ -42,11 +45,21 @@ const TOC = (props: Props) => {
             <FaListUl className={`position-relative ${styles.icon}`} />
           </button>
         </div>
-        <div className="flex-grow-1">
+        <div className={`flex-grow-1 ${styles.minWidth}`}>
           <h1 className={`mb-0 ${styles.title}`}>
             <ReactMarkdown children={cleanTOCEntry(props.title)} linkTarget="_blank" skipHtml />
           </h1>
         </div>
+        {props.supportLink && (
+          <div className={`ml-2 ${styles.supportLinkWrapper}`}>
+            <ExternalLink href={props.supportLink} className="mr-0" label="Open support link">
+              <small className="d-flex flex-row align-items-center text-nowrap text-primary">
+                <BsFlagFill className="mr-1" />
+                Report issue
+              </small>
+            </ExternalLink>
+          </div>
+        )}
       </div>
 
       {visibleTOC && (

web/src/layout/package/readme/__snapshots__/TOC.test.tsx.snap

@@ -36,7 +36,7 @@ exports[`TOC creates snapshot 1`] = `
         </button>
       </div>
       <div
-        class="flex-grow-1"
+        class="flex-grow-1 minWidth"
       >
         <h1
           class="mb-0 title"

web/src/layout/package/readme/index.tsx

@@ -9,6 +9,7 @@ import TOC from './TOC';
 interface Props {
   packageName: string;
   markdownContent: string;
+  supportLink?: string;
   additionalTitles?: string;
   scrollIntoView: (id?: string) => void;
 }
@@ -66,7 +67,7 @@ const ReadmeWrapper = (props: Props) => {
       message="Something went wrong rendering the README file of this package."
     >
       <span data-testid="readme">
-        <TOC title={mainTitle} toc={toc} scrollIntoView={props.scrollIntoView} />
+        <TOC title={mainTitle} toc={toc} scrollIntoView={props.scrollIntoView} supportLink={props.supportLink} />
         <Readme readme={readme} scrollIntoView={props.scrollIntoView} />
       </span>
     </ErrorBoundary>