chore: sync with verdaccio master

src/webui/components/ActionBar/index.js

@@ -0,0 +1,109 @@
+/* eslint-disable react/jsx-max-depth */
+/**
+ * @prettier
+ */
+
+import React, { Component } from 'react';
+
+import { DetailContextConsumer } from '../../pages/version/index';
+import List from '@material-ui/core/List/index';
+
+import DownloadIcon from '@material-ui/icons/CloudDownload';
+import BugReportIcon from '@material-ui/icons/BugReport';
+import HomeIcon from '@material-ui/icons/Home';
+import Tooltip from '@material-ui/core/Tooltip/index';
+
+import { Fab, ActionListItem } from './styles';
+
+const ACTIONS = {
+  homepage: {
+    icon: <HomeIcon />,
+    title: 'Visit homepage',
+  },
+  issue: {
+    icon: <BugReportIcon />,
+    title: 'Open an issue',
+  },
+  tarball: {
+    icon: <DownloadIcon />,
+    title: 'Download tarball',
+  },
+};
+
+class ActionBar extends Component<any, any> {
+  render() {
+    return (
+      <DetailContextConsumer>
+        {context => {
+          return this.renderActionBar(context);
+        }}
+      </DetailContextConsumer>
+    );
+  }
+
+  renderIconsWithLink(link, component) {
+    if (!link) {
+      return null;
+    }
+    return (
+      <a href={link} target={"_blank"}>
+        {component}
+      </a>
+    );
+  }
+
+  renderActionBarListItems = (packageMeta) => {
+    const {
+        latest: {
+            bugs: {
+              url: issue,
+            } = {},
+            homepage,
+            dist: {
+              tarball,
+            } = {},
+        } = {},
+    } = packageMeta;
+
+    const actionsMap = {
+      homepage,
+      issue,
+      tarball,
+    };
+
+    const renderList = Object.keys(actionsMap).reduce((component, value, key) => {
+      const link = actionsMap[value];
+      if (link) {
+        const fab = (
+          <Fab size={'small'}>
+            {ACTIONS[value]['icon']}
+          </Fab>
+        );
+        component.push(
+          <Tooltip key={key} title={ACTIONS[value]['title']}>
+            {this.renderIconsWithLink(link, fab)}
+          </Tooltip>
+        );
+      }
+      return component;
+    }, []);
+
+    return (
+      <>
+        <ActionListItem alignItems={'flex-start'}>
+          {renderList}
+        </ActionListItem>
+      </>
+    );
+  };
+
+  renderActionBar = ({ packageMeta = {} }) => {
+    return (
+      <List>
+        {this.renderActionBarListItems(packageMeta)}
+      </List>
+    );
+  };
+}
+
+export default ActionBar;