Merge pull request #526 from rvpanoz/feat/command-log

Feat/command log
rvpanoz · Oct 31, 2020 · 3a2a056 · 3a2a056
2 parents 050250e + 74e1fe4
commit 3a2a056
Show file tree

Hide file tree

Showing 33 changed files with 458 additions and 271 deletions.
diff --git a/app/components/App.js b/app/components/App.js
@@ -7,7 +7,12 @@ import CssBaseline from '@material-ui/core/CssBaseline';
 import Layout from 'components/layout/Layout';
 import { withErrorBoundary } from 'commons/hocs';
 import { setEnv } from 'models/npm/actions';
-import { initActions, updateStatus } from 'models/common/actions';
+import {
+  initActions,
+  updateStatus,
+  updateCommandLog,
+  clearCommandLog,
+} from 'models/common/actions';
 import { setUIException, setSnackbar } from 'models/ui/actions';
 import { iMessage } from 'commons/utils';
 import theme from 'styles/theme';
@@ -51,11 +56,13 @@ const App = () => {
       const { cmd, isTerminated } = data;
       const [command, ...args] = cmd;
 
+      if (isTerminated) {
+        return dispatch(clearCommandLog());
+      }
+
       dispatch(
-        setSnackbar({
-          open: isTerminated === false,
-          type: 'info',
-          message: `npm ${cmd.join(' ')}`,
+        updateCommandLog({
+          command: `npm ${cmd.join(' ')}`,
         })
       );
     });

diff --git a/app/components/packages/details/PackageDependencies.js b/app/components/packages/details/PackageDependencies.js
@@ -10,36 +10,47 @@ import ListItemText from '@material-ui/core/ListItemText';
 
 import styles from './styles';
 
-const PackageDependencies = ({ classes, dependencies }) => (
-  <Paper className={classes.paper}>
-    <div className={classes.header}>
-      <Typography>{`Dependencies (${dependencies.length})`}</Typography>
-    </div>
-    <Divider />
-    <List dense style={{ overflowY: 'scroll', minWidth: 225, maxHeight: 425 }}>
-      {dependencies.map((item) => (
-        <ListItem key={item.name} className={classes.listItem}>
-          <ListItemText
-            primary={
-              <Typography color="textSecondary" variant="body2">
-                {item.name}
-              </Typography>
-            }
-            secondary={
-              <Typography color="textSecondary" variant="body2">
-                {item.version}
-              </Typography>
-            }
-          />
-        </ListItem>
-      ))}
-    </List>
-  </Paper>
-);
+const PackageDependencies = ({ classes, dependencies }) => {
+  const dependenciesNames = Object.keys(dependencies);
+  const enhancedDependencies = dependenciesNames.map((dependency) => ({
+    name: dependency,
+    version: dependencies[dependency],
+  }));
+
+  return (
+    <Paper className={classes.paper}>
+      <div className={classes.header}>
+        <Typography>{`Dependencies (${enhancedDependencies.length})`}</Typography>
+      </div>
+      <Divider />
+      <List
+        dense
+        style={{ overflowY: 'scroll', minWidth: 225, maxHeight: 425 }}
+      >
+        {enhancedDependencies.map((dependency) => (
+          <ListItem key={dependency.name} className={classes.listItem}>
+            <ListItemText
+              primary={
+                <Typography color="textSecondary" variant="body2">
+                  {dependency.name}
+                </Typography>
+              }
+              secondary={
+                <Typography color="textSecondary" variant="body2">
+                  {dependency.version}
+                </Typography>
+              }
+            />
+          </ListItem>
+        ))}
+      </List>
+    </Paper>
+  );
+};
 
 PackageDependencies.propTypes = {
   classes: objectOf(string).isRequired,
-  dependencies: arrayOf(objectOf(string)).isRequired,
+  dependencies: objectOf(string).isRequired,
 };
 
 export default withStyles(styles)(PackageDependencies);
diff --git a/app/components/packages/details/PackageDetails.js b/app/components/packages/details/PackageDetails.js
@@ -338,18 +338,6 @@ const PackageDetails = ({ classes, showInstallationOptions }) => {
     </Grid>
   );
 
-  useEffect(() => {
-    if (active && active.dependencies) {
-      const dependenciesNames = Object.keys(active.dependencies);
-      const dependenciesToArray = dependenciesNames.map((dep) => ({
-        name: dep,
-        version: active.dependencies[dep],
-      }));
-
-      setDependencies(dependenciesToArray);
-    }
-  }, [active]);
-
   return (
     <div className={classes.wrapper}>
       <Loader
@@ -382,7 +370,7 @@ const PackageDetails = ({ classes, showInstallationOptions }) => {
       >
         {({ TransitionProps }) => (
           <Fade {...TransitionProps} timeout={100}>
-            <PackageDependencies dependencies={dependencies} />
+            <PackageDependencies dependencies={active.dependencies} />
           </Fade>
         )}
       </Popper>

diff --git a/app/components/packages/details/styles.js b/app/components/packages/details/styles.js
@@ -11,7 +11,7 @@ const styles = (theme) => ({
   },
   header: {
     ...defaultFont,
-    backgroundColor: lighten(grayColor, 0.75),
+    backgroundColor: lighten(grayColor, 0.85),
     fontSize: 20,
     fontWeight: 400,
     padding: theme.spacing(1),