Develop

app/cli/npm/uninstall.js

@@ -1,4 +1,3 @@
-/* eslint-disable prefer-promise-reject-errors */
 /* eslint-disable compat/compat */
 
 /**
@@ -12,16 +11,11 @@ const uninstall = options => {
 
   function getNames() {
     if (multiple && Array.isArray(packages)) {
+
       // do not uninstall npm
       return packages.filter(pkgName => pkgName !== 'npm');
     }
 
-    if (!name && !multiple) {
-      return Promise.reject(
-        'npm[uninstall] package name parameter must be given'
-      );
-    }
-
     return name;
   }
 

app/cli/shell.js

@@ -2,6 +2,8 @@
 /* eslint-disable import/prefer-default-export */
 
 import log from 'electron-log';
+import { concat } from 'rxjs'
+import { catchError } from 'rxjs/operators';
 import manager from './manager';
 
 /**
@@ -11,36 +13,21 @@ import manager from './manager';
  */
 
 const runCommand = (options, callback) => {
-  const { cmd, ...rest } = options || {};
+  const { cmd, ...rest } = options;
 
+  // create an array of observables
   const combine = () =>
     cmd.map((command, idx) => {
-      try {
-        const runner = manager[command];
-        const result = runner(rest, idx);
+      const runner = manager[command];
+      const result$ = runner(rest, idx);
 
-        return result; // returns a promise
-      } catch (error) {
-        log.error(error);
-        throw new Error(error);
-      }
+      return result$.pipe(
+        catchError(error => log.error(error))
+      );
     });
 
-  const tasks = combine();
-
-  tasks
-    .reduce(
-      (promiseChain, currentTask) =>
-        promiseChain.then(chainResults =>
-          currentTask.then(currentResult => [...chainResults, currentResult])
-        ),
-      Promise.resolve([])
-    )
-    .then(results => results.map(result => callback(result)))
-    .catch(error => {
-      log.error(error);
-      return Promise.reject(error);
-    });
-};
+  // subscribe to observables in order as previous completes
+  concat(...combine()).subscribe(result => callback(result));
+}
 
 export default runCommand;

app/components/views/notifications/NotificationsList.js~master

@@ -0,0 +1,94 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cn from 'classnames';
+import { withStyles } from '@material-ui/styles';
+import { Table, TableBody, Grid, Paper, Divider } from '@material-ui/core';
+
+import { HelperText } from 'components/common';
+import { iMessage } from 'commons/utils';
+import TableHeader from './Header';
+import NotificationItem from './NotificationItem';
+import ToolbarView from './Toolbar';
+
+import styles from './styles/list';
+
+const NotificationsList = ({
+  classes,
+  notifications,
+  selected,
+  loading,
+  handleSelectAll,
+  handleSelectOne,
+  handleInstall
+}) => {
+  const noNotifications = !notifications || notifications.length === 0;
+
+  return (
+    <Grid container>
+      <Grid
+        item
+        md={10}
+        lg={10}
+        xl={10}
+        className={classes.transition}
+      >
+        {noNotifications && (
+          <HelperText text={iMessage('info', 'noNotifications')} />
+        )}
+        {!noNotifications && (
+          <Paper elevation={2}>
+            <div className={classes.toolbar}>
+              <ToolbarView
+                title={iMessage('title', 'notifications')}
+                total={notifications.length}
+                selected={selected}
+                notifications={notifications}
+                handleInstall={handleInstall}
+              />
+            </div>
+            <Divider />
+            <div className={classes.tableWrapper}>
+              <Table
+                aria-labelledby="notifications-list"
+                className={cn(classes.table, {
+                  [classes.hasFilterBlur]: loading
+                })}
+              >
+                <TableHeader
+                  total={notifications.length}
+                  handleSelectAll={handleSelectAll}
+                  selected={selected}
+                  sortBy="Required"
+                  sortDir="asc"
+                />
+                <TableBody>
+                  {notifications.slice(0, 10).map(notification => (
+                    <NotificationItem
+                      {...notification}
+                      key={notification.id}
+                      selected={selected}
+                      handleSelectOne={handleSelectOne}
+                      handleSelectAll={handleSelectAll}
+                    />
+                  ))}
+                </TableBody>
+              </Table>
+            </div>
+          </Paper>
+        )}
+      </Grid>
+    </Grid>
+  );
+};
+
+NotificationsList.propTypes = {
+  classes: PropTypes.objectOf(PropTypes.string).isRequired,
+  notifications: PropTypes.arrayOf(PropTypes.object).isRequired,
+  selected: PropTypes.arrayOf(PropTypes.string).isRequired,
+  handleSelectAll: PropTypes.func.isRequired,
+  handleSelectOne: PropTypes.func.isRequired,
+  handleInstall: PropTypes.func.isRequired,
+  loading: PropTypes.bool
+};
+
+export default withStyles(styles)(NotificationsList);

app/components/views/sidebar/Sidebar.js~master

@@ -0,0 +1,54 @@
+import React from 'react';
+import { string, objectOf, func, bool, object, arrayOf } from 'prop-types';
+import { withStyles } from '@material-ui/styles';
+
+import { AppTabs, AppLogo } from 'components/common/';
+import {
+  PackagesTab,
+  ActionsTab,
+  HistoryTab
+} from 'components/views/sidebar/tabs';
+import styles from './styles/sidebar';
+
+const Sidebar = ({
+  classes,
+  loading,
+  mode,
+  history,
+  loadDirectory,
+  updatedAt,
+  tabPackagesData,
+  installPackagesFromJson,
+  dedupe
+}) => (
+    <div className={classes.root}>
+      <AppLogo />
+      <AppTabs>
+        <PackagesTab
+          items={tabPackagesData}
+          updatedAt={updatedAt}
+          loading={loading}
+        />
+        <ActionsTab onInstallPackagesFromJson={installPackagesFromJson} onDedupe={dedupe} mode={mode} loading={loading} />
+        <HistoryTab
+          directories={history}
+          onClick={loadDirectory}
+          loading={loading}
+        />
+      </AppTabs>
+    </div>
+  );
+
+Sidebar.propTypes = {
+  classes: objectOf(string).isRequired,
+  mode: string.isRequired,
+  loading: bool,
+  history: arrayOf(object),
+  loadDirectory: func.isRequired,
+  installPackagesFromJson: func.isRequired,
+  dedupe: func.isRequired,
+  updatedAt: string,
+  tabPackagesData: arrayOf(object)
+};
+
+export default withStyles(styles)(Sidebar);

app/components/views/topBar/TopBar.js~master

@@ -0,0 +1,145 @@
+import React from 'react';
+import { objectOf, func, bool, arrayOf, object, string } from 'prop-types';
+import { withStyles } from '@material-ui/styles';
+import { AppBar, Toolbar, Tooltip, Badge, IconButton } from '@material-ui/core';
+
+import NotificationsActiveIcon from '@material-ui/icons/NotificationsActiveOutlined';
+import NotificationsIcon from '@material-ui/icons/NotificationsOutlined';
+import SettingsIcon from '@material-ui/icons/SettingsOutlined';
+import AddIcon from '@material-ui/icons/AddOutlined';
+import ArchiveIcon from '@material-ui/icons/ArchiveOutlined';
+import SecurityIcon from '@material-ui/icons/SecurityOutlined';
+import LocalHospitalIcon from '@material-ui/icons/LocalHospitalOutlined';
+
+import { SearchBox } from 'components/common';
+import { iMessage } from 'commons/utils';
+import styles from './styles/topBar';
+
+const Topbar = ({
+  classes,
+  notifications,
+  mode,
+  loading,
+  onLoadDirectory,
+  onInitFlow,
+  onShowSettings,
+  setActivePage
+}) => (
+    <AppBar
+      className={classes.root}
+      position="static"
+      elevation={0}
+      color="inherit"
+    >
+      <Toolbar disableGutters>
+        <div className={classes.actions}>
+          <Toolbar
+            disableGutters
+            classes={{
+              root: classes.root
+            }}
+          >
+            <Tooltip title={iMessage('title', 'loadDirectory')}>
+              <div>
+                <IconButton
+                  classes={{
+                    root: classes.button
+                  }}
+                  disableRipple
+                  disabled={loading}
+                  onClick={onLoadDirectory}
+                  color="inherit"
+                >
+                  <ArchiveIcon className={classes.icon} />
+                </IconButton>
+              </div>
+            </Tooltip>
+            <Tooltip title={iMessage('title', 'createPackageJson')}>
+              <div>
+                <IconButton
+                  classes={{
+                    root: classes.button
+                  }}
+                  disableRipple
+                  color="inherit"
+                  disabled={loading}
+                  onClick={onInitFlow}
+                >
+                  <AddIcon className={classes.icon} />
+                </IconButton>
+              </div>
+            </Tooltip>
+            <Tooltip title={iMessage('info', 'npmAuditInfo')}>
+              <div>
+                <IconButton
+                  classes={{
+                    root: classes.button
+                  }}
+                  color="inherit"
+                  disableRipple
+                  onClick={() => setActivePage('audit')}
+                  disabled={loading || mode === 'global'}
+                >
+                  <SecurityIcon className={classes.icon} />
+                </IconButton>
+              </div>
+            </Tooltip>
+            <Tooltip title={iMessage('info', 'npmDoctorInfo')}>
+              <div>
+                <IconButton
+                  color="inherit"
+                  classes={{
+                    root: classes.button
+                  }}
+                  disableRipple
+                  disabled={loading}
+                  onClick={() => setActivePage('doctor')}
+                >
+                  <LocalHospitalIcon className={classes.icon} />
+                </IconButton>
+              </div>
+            </Tooltip>
+            <Tooltip title={iMessage('title', 'notifications')}>
+              <div>
+                <IconButton
+                  color="inherit"
+                  classes={{
+                    root: classes.button
+                  }}
+                  disableRipple
+                  disabled={loading}
+                  onClick={() => setActivePage('notifications')}
+                >
+                  <Badge
+                    badgeContent={notifications ? notifications.length : 0}
+                    showZero
+                    color="secondary"
+                  >
+                    {notifications && notifications.length ? <NotificationsActiveIcon /> : <NotificationsIcon />}
+                  </Badge>
+                </IconButton>
+              </div>
+            </Tooltip>
+          </Toolbar>
+        </div>
+        <div className={classes.flexGrow} />
+        <SearchBox />
+        <IconButton className={classes.button} color="inherit" onClick={onShowSettings}>
+          <SettingsIcon />
+        </IconButton>
+      </Toolbar>
+    </AppBar>
+  );
+
+Topbar.propTypes = {
+  classes: objectOf(string).isRequired,
+  mode: string.isRequired,
+  loading: bool,
+  notifications: arrayOf(object),
+  onLoadDirectory: func,
+  setActivePage: func,
+  onInitFlow: func,
+  onShowSettings: func
+};
+
+export default withStyles(styles)(Topbar);

app/components/views/topBar/styles/topBar.js~master

@@ -0,0 +1,17 @@
+const styles = theme => ({
+  root: {
+    zIndex: 'auto',
+    boxShadow: 'none'
+  },
+  actions: {
+    paddingLeft: theme.spacing(1) / 2
+  },
+  flexGrow: {
+    flexGrow: 1
+  },
+  button: {
+    marginLeft: theme.spacing(1)
+  }
+});
+
+export default styles;