Move to Updates page automatically when creating custom app/space (#1439

)

package.json

@@ -47,11 +47,11 @@
     "clean-webpack-plugin": "3.0.0",
     "comlink": "4.3.1",
     "command-exists": "1.2.9",
-    "concurrently": "6.1.0",
+    "concurrently": "6.2.0",
     "copy-webpack-plugin": "6.4.1",
     "cross-env": "7.0.3",
     "decompress": "4.2.1",
-    "electron": "12.0.8",
+    "electron": "12.0.9",
     "electron-builder": "22.11.3",
     "electron-context-menu": "3.1.0",
     "electron-notarize": "1.0.0",
@@ -67,7 +67,7 @@
     "eslint-plugin-jsx-a11y": "6.4.1",
     "eslint-plugin-react": "7.23.2",
     "eslint-plugin-react-hooks": "1.7.0",
-    "firebase": "8.6.1",
+    "firebase": "8.6.2",
     "follow-redirects": "1.14.1",
     "fs-extra": "9.1.0",
     "gravatar": "1.8.1",
@@ -79,7 +79,7 @@
     "node-cache": "5.1.2",
     "node-fetch": "2.6.1",
     "node-machine-id": "1.1.12",
-    "notistack": "1.0.8",
+    "notistack": "1.0.9",
     "original-fs": "1.1.0",
     "prop-types": "15.7.2",
     "react": "16.14.0",

src/components/pages/installed/index.js

@@ -21,6 +21,7 @@ import EmptyState from '../../shared/empty-state';
 
 import DefinedAppBar from './defined-app-bar';
 import Toolbar from './toolbar';
+import CreateCustomAppCard from '../../shared/create-custom-app-card';
 
 import { updateScrollOffset } from '../../../state/installed/actions';
 
@@ -97,6 +98,7 @@ const Installed = ({
     }
 
     if (appIds.length > 0) {
+      const totalItems = appIds.length + 1; // 2 more for custom app card
       const rowHeight = 158 + 16;
       const sidebarWidth = innerWidth < 960 ? 80 : 220;
       const innerWidthMinurScrollbar = window.process.platform === 'darwin'
@@ -109,9 +111,17 @@ const Installed = ({
       const Cell = ({ columnIndex, rowIndex, style }) => {
         const index = rowIndex * columnCount + columnIndex;
 
-        if (index >= appIds.length) return <div style={style} />;
+        if (index === 0) {
+          return (
+            <div className={classes.cardContainer} style={style}>
+              <CreateCustomAppCard />
+            </div>
+          );
+        }
 
-        const appId = appIds[index];
+        if (index >= totalItems) return <div style={style} />;
+
+        const appId = appIds[index - 1];
         return (
           <div className={classes.cardContainer} style={style}>
             <AppCard

src/state/app-management/actions.js

@@ -10,10 +10,12 @@ import {
   SORT_APPS,
 } from '../../constants/actions';
 import { INSTALLING, INSTALLED } from '../../constants/app-statuses';
+import { ROUTE_INSTALLED } from '../../constants/routes';
 
 import swiftype from '../../swiftype';
 
 import { open as openDialogLicenseRegistration } from '../dialog-license-registration/actions';
+import { changeRoute } from '../router/actions';
 
 import {
   isNameExisted,
@@ -82,6 +84,12 @@ export const installApp = (id, name, url, icon, opts) => (dispatch, getState) =>
   }
 
   requestInstallApp(id, sanitizedName, url, icon, opts);
+
+  // if user is trying to install a custom app/space, move to "Updates"/installed tab automatically
+  if (id.startsWith('custom-')) {
+    dispatch(changeRoute(ROUTE_INSTALLED));
+  }
+
   return null;
 };