refactor: adds action bar in pacakge sidebar

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;

src/webui/components/ActionBar/styles.js

@@ -0,0 +1,25 @@
+/**
+ * @prettier
+ * @flow
+ */
+import styled from 'react-emotion';
+import { default as MuiFab } from '@material-ui/core/Fab';
+import ListItem from '@material-ui/core/ListItem/index';
+
+import colors from '../../utils/styles/colors';
+
+export const ActionListItem = styled(ListItem)`
+  && {
+    padding-top: 0;
+    padding-left: 0;
+    padding-right: 0;
+  }
+`;
+
+export const Fab = styled(MuiFab)`
+  && {
+    background-color: ${colors.primary};
+    color: ${colors.white};
+    margin-right: 10px;
+  }
+`;

src/webui/components/DetailSidebar/index.js

@@ -1,25 +1,23 @@
-/* eslint-disable */
 import React, {Component} from 'react';
 
-import Add from '@material-ui/icons/Add';
-import BugReport from '@material-ui/icons/BugReport';
 import Card from '@material-ui/core/Card/index';
 import CardContent from '@material-ui/core/CardContent/index';
-import Home from '@material-ui/icons/Home';
 import List from '@material-ui/core/List/index';
 import ListItemText from '@material-ui/core/ListItemText/index';
-import Tooltip from '@material-ui/core/Tooltip/index';
 
-import Install from '../Install';
+import ActtionBar from '../ActionBar';
 import Author from '../Author';
+import Developers from '../Developers';
+import Dist from '../Dist';
+import Engine from '../Engines';
+import Install from '../Install';
 import License from '../License';
 import Repository from '../Repository';
-import Developers from '../Developers';
-import Engine from '../Engines';
-import Dist from '../Dist';
+
+
 import { DetailContextConsumer } from '../../pages/version/index';
 
-import { TitleListItem, TitleAvatar, Fab } from './styles';
+import { TitleListItem } from './styles';
 
 class DetailSidebar extends Component {
   render() {
@@ -36,6 +34,7 @@ class DetailSidebar extends Component {
         <Card>
           <CardContent>
             {this.renderTitle(packageName, packageMeta)}
+            {this.renderActionBar()}
             {this.renderCopyCLI()}
             {this.renderRepository()}
             {this.renderEngine()}
@@ -54,23 +53,10 @@ class DetailSidebar extends Component {
       return (
         <List>
           <TitleListItem alignItems={"flex-start"}>
-            {/* <TitleAvatar>{packageName[0]}</TitleAvatar> */}
             <ListItemText
               primary={<b>{packageName}</b>}
               secondary={packageMeta.latest.description}
             />
-            
-          </TitleListItem>
-          <TitleListItem alignItems={"flex-start"}>
-            <Tooltip title="Visit Homepage">
-              <Fab size={'small'}><Home /></Fab>
-            </Tooltip>
-            <Tooltip title="Report a bug">
-              <Fab size={'small'}><BugReport/></Fab>
-            </Tooltip>
-            <Tooltip title="Download Tarball">
-              <Fab size={'small'}><Add /></Fab>
-            </Tooltip>
           </TitleListItem>
         </List>
       );
@@ -107,6 +93,10 @@ class DetailSidebar extends Component {
   renderDist = () => {
     return <Dist />;
   }
+
+  renderActionBar = () => {
+    return <ActtionBar />;
+  }
 }
 
 export default DetailSidebar;

src/webui/components/DetailSidebar/styles.js

@@ -5,7 +5,6 @@
 
 import styled from 'react-emotion';
 import Avatar from '@material-ui/core/Avatar/index';
-import { default as MuiFab } from '@material-ui/core/Fab';
 import ListItem from '@material-ui/core/ListItem/index';
 
 import colors from '../../utils/styles/colors';
@@ -14,6 +13,7 @@ export const TitleListItem = styled(ListItem)`
   && {
     padding-left: 0;
     padding-right: 0;
+    padding-bottom: 0;
   }
 `;
 
@@ -24,11 +24,3 @@ export const TitleAvatar = styled(Avatar)`
     text-transform: capitalize;
   }
 `;
-
-export const Fab = styled(MuiFab)`
-  && {
-    background-color: ${colors.primary};
-    color: ${colors.white};
-    margin-right: 10px;
-  }
-`;