#352 Disable actions that require an internet connection (#368)

* Online check component added

* add reducer & action for online check component.

also included in App.js

* removed sidebar functionality when offline

* removed depedency functionality when offline

* removed functionality from create new project wizard when offline

* fixed tests to align with disabled pattern

* add infoBanner to Z-indexes for future usage.

* removed random {' '}, changed IS_ONLINE_CHECK to SET_ONLINE_STATUS

* pull request requested changes

missed one file.

* updated infobar to be fixed header.

* flow fix

* remove random whitespace

* Pull request changes

remove state type, move styled components to before redux part, change background color of infobar to be transparent.

* enable menu items based on isOnline

package.json

@@ -225,4 +225,4 @@
     "icon": null,
     "createdAt": 1529502079329
   }
-}
+}

src/actions/index.js

@@ -15,6 +15,7 @@ import type {
 //
 // Action Types
 //
+export const SET_ONLINE_STATUS = 'SET_ONLINE_STATUS';
 export const REFRESH_PROJECTS_START = 'REFRESH_PROJECTS_START';
 export const REFRESH_PROJECTS_ERROR = 'REFRESH_PROJECTS_ERROR';
 export const REFRESH_PROJECTS_FINISH = 'REFRESH_PROJECTS_FINISH';
@@ -89,6 +90,11 @@ export const RESET_STATUS_TEXT = 'RESET_STATUS_TEXT';
 //
 // Action Creators
 //
+export const setOnlineStatus = (onlineStatus: boolean) => ({
+  type: SET_ONLINE_STATUS,
+  onlineStatus,
+});
+
 export const addProject = (
   project: ProjectInternal,
   projectHomePath: string,
@@ -447,7 +453,9 @@ export const showResetStatePrompt = () => ({
   type: SHOW_RESET_STATE_PROMPT,
 });
 
-export const resetAllState = () => ({ type: RESET_ALL_STATE });
+export const resetAllState = () => ({
+  type: RESET_ALL_STATE,
+});
 
 // Status text for Loading screen
 // todo: Check if we need a better naming as there are probably more status messages in the future.

src/components/App/App.js

@@ -17,6 +17,7 @@ import AppSettingsModal from '../AppSettingsModal';
 import Initialization from '../Initialization';
 import LoadingScreen from '../LoadingScreen';
 import FeedbackButton from '../FeedbackButton';
+import OnlineChecker from '../OnlineChecker';
 
 import type { Project } from '../../types';
 
@@ -33,6 +34,7 @@ class App extends PureComponent<Props> {
         {wasSuccessfullyInitialized =>
           wasSuccessfullyInitialized && (
             <Fragment>
+              <OnlineChecker />
               <Titlebar />
               <Wrapper>
                 <ApplicationMenu />

src/components/ApplicationMenu/ApplicationMenu.js

@@ -22,6 +22,7 @@ import {
   getProjectsArray,
 } from '../../reducers/projects.reducer';
 import { getDevServerTaskForProjectId } from '../../reducers/tasks.reducer';
+import { getOnlineState } from '../../reducers/app-status.reducer';
 
 import type { Project, Task } from '../../types';
 import type { Dispatch } from '../../actions/types';
@@ -32,6 +33,7 @@ type Props = {
   projects: Array<Project>,
   selectedProject: ?Project,
   devServerTask: ?Task,
+  isOnline: boolean,
   createNewProjectStart: Dispatch<typeof actions.createNewProjectStart>,
   showImportExistingProjectPrompt: Dispatch<
     typeof actions.showImportExistingProjectPrompt
@@ -53,7 +55,10 @@ class ApplicationMenu extends Component<Props> {
   }
 
   componentDidUpdate(prevProps) {
-    if (this.props.selectedProject !== prevProps.selectedProject) {
+    if (
+      this.props.selectedProject !== prevProps.selectedProject ||
+      this.props.isOnline !== prevProps.isOnline
+    ) {
       this.buildMenu(this.props);
     }
   }
@@ -76,6 +81,7 @@ class ApplicationMenu extends Component<Props> {
       selectProject,
       projects,
       reinstallDependencies,
+      isOnline,
     } = props;
 
     const template = [
@@ -87,13 +93,15 @@ class ApplicationMenu extends Component<Props> {
             label: isMac ? 'Create New Project' : 'Create &new project',
             click: createNewProjectStart,
             accelerator: 'CmdOrCtrl+N',
+            enabled: isOnline,
           },
           {
             label: isMac
               ? 'Import Existing Project...'
               : '&Import existing project...',
             click: showImportExistingProjectPrompt,
             accelerator: 'CmdOrCtrl+I',
+            enabled: isOnline,
           },
         ],
       },
@@ -233,6 +241,7 @@ class ApplicationMenu extends Component<Props> {
           label: isMac ? 'Reinstall Dependencies' : 'Reinstall dependencies',
           click: () => reinstallDependencies(selectedProject.id),
           accelerator: 'CmdOrCtrl+alt+R',
+          enabled: isOnline,
         },
         { type: 'separator' },
       ];
@@ -308,7 +317,12 @@ const mapStateToProps = state => {
     : null;
 
   const projects = getProjectsArray(state);
-  return { selectedProject, devServerTask, projects };
+  return {
+    selectedProject,
+    devServerTask,
+    projects,
+    isOnline: getOnlineState(state),
+  };
 };
 
 const mapDispatchToProps = {

src/components/Button/ButtonBase.js

@@ -84,6 +84,7 @@ const ButtonBaseStyles = styled.button`
   &:disabled {
     filter: grayscale(100%);
     opacity: 0.75;
+    cursor: initial;
   }
 
   &:not(:disabled):active {

src/components/Button/FillButton.js

@@ -10,6 +10,7 @@ type Props = {
   hoverColors?: Array<string>,
   textColor: string,
   children: React$Node,
+  disabled?: boolean,
 };
 
 export const wrapColorsInGradient = (colors?: Array<string> | string) => {

src/components/Button/__snapshots__/ButtonBase.test.js.snap

@@ -27,6 +27,7 @@ exports[`ButtonBase component Button with size prop should render button for lar
   -webkit-filter: grayscale(100%);
   filter: grayscale(100%);
   opacity: 0.75;
+  cursor: initial;
 }
 
 .c1:not(:disabled):active {
@@ -91,6 +92,7 @@ exports[`ButtonBase component Button with size prop should render button for lar
   -webkit-filter: grayscale(100%);
   filter: grayscale(100%);
   opacity: 0.75;
+  cursor: initial;
 }
 
 .c1:not(:disabled):active {
@@ -158,6 +160,7 @@ exports[`ButtonBase component Button with size prop should render button for med
   -webkit-filter: grayscale(100%);
   filter: grayscale(100%);
   opacity: 0.75;
+  cursor: initial;
 }
 
 .c1:not(:disabled):active {
@@ -222,6 +225,7 @@ exports[`ButtonBase component Button with size prop should render button for med
   -webkit-filter: grayscale(100%);
   filter: grayscale(100%);
   opacity: 0.75;
+  cursor: initial;
 }
 
 .c1:not(:disabled):active {
@@ -289,6 +293,7 @@ exports[`ButtonBase component Button with size prop should render button for sma
   -webkit-filter: grayscale(100%);
   filter: grayscale(100%);
   opacity: 0.75;
+  cursor: initial;
 }
 
 .c1:not(:disabled):active {
@@ -353,6 +358,7 @@ exports[`ButtonBase component Button with size prop should render button for sma
   -webkit-filter: grayscale(100%);
   filter: grayscale(100%);
   opacity: 0.75;
+  cursor: initial;
 }
 
 .c1:not(:disabled):active {
@@ -420,6 +426,7 @@ exports[`ButtonBase component Button with size prop should render button for xsm
   -webkit-filter: grayscale(100%);
   filter: grayscale(100%);
   opacity: 0.75;
+  cursor: initial;
 }
 
 .c1:not(:disabled):active {
@@ -484,6 +491,7 @@ exports[`ButtonBase component Button with size prop should render button for xsm
   -webkit-filter: grayscale(100%);
   filter: grayscale(100%);
   opacity: 0.75;
+  cursor: initial;
 }
 
 .c1:not(:disabled):active {

src/components/Button/__snapshots__/FillButton.test.js.snap

@@ -31,6 +31,7 @@ exports[`FillButton component should render button filled 1`] = `
   -webkit-filter: grayscale(100%);
   filter: grayscale(100%);
   opacity: 0.75;
+  cursor: initial;
 }
 
 .c1:not(:disabled):active {

src/components/Button/__snapshots__/StrokeButton.test.js.snap

@@ -57,6 +57,7 @@ exports[`StrokeButton component should render button with stroke outline 1`] = `
   -webkit-filter: grayscale(100%);
   filter: grayscale(100%);
   opacity: 0.75;
+  cursor: initial;
 }
 
 .c3:not(:disabled):active {

src/components/ButtonWithIcon/__snapshots__/ButtonWithIcon.test.js.snap

@@ -27,6 +27,7 @@ exports[`ButtonWithIcon component should render button with icon 1`] = `
   -webkit-filter: grayscale(100%);
   filter: grayscale(100%);
   opacity: 0.75;
+  cursor: initial;
 }
 
 .c3:not(:disabled):active {

src/components/CreateNewProjectWizard/CreateNewProjectWizard.js

@@ -10,6 +10,7 @@ import {
   getDefaultProjectPath,
 } from '../../reducers/app-settings.reducer';
 import { getById } from '../../reducers/projects.reducer';
+import { getOnlineState } from '../../reducers/app-status.reducer';
 import { getOnboardingCompleted } from '../../reducers/onboarding-status.reducer';
 import { getProjectNameSlug } from '../../services/create-project.service';
 import { checkIfProjectExists } from '../../services/create-project.service';
@@ -38,13 +39,16 @@ const { dialog } = remote;
 
 type Props = {
   settings: AppSettings,
-  projects: { [projectId: string]: ProjectInternal },
+  projects: {
+    [projectId: string]: ProjectInternal,
+  },
   projectHomePath: string,
   isVisible: boolean,
   isOnboardingCompleted: boolean,
   addProject: Dispatch<typeof actions.addProject>,
   createNewProjectCancel: Dispatch<typeof actions.createNewProjectCancel>,
   createNewProjectFinish: Dispatch<typeof actions.createNewProjectFinish>,
+  isOnline: boolean,
 };
 
 type State = {
@@ -84,15 +88,20 @@ class CreateNewProjectWizard extends PureComponent<Props, State> {
   }
 
   updateFieldValue = (field: Field, value: any) => {
-    this.setState({ [field]: value, activeField: field });
+    this.setState({
+      [field]: value,
+      activeField: field,
+    });
 
     if (field === 'projectName') {
       this.verifyProjectNameUniqueness(value);
     }
   };
 
   focusField = (field: ?Field) => {
-    this.setState({ activeField: field });
+    this.setState({
+      activeField: field,
+    });
   };
 
   verifyProjectNameUniqueness = (name: string) => {
@@ -105,13 +114,17 @@ class CreateNewProjectWizard extends PureComponent<Props, State> {
     );
 
     if (isAlreadyTaken) {
-      this.setState({ isProjectNameTaken: true });
+      this.setState({
+        isProjectNameTaken: true,
+      });
       return;
     }
 
     // If this update fixes the problem, unset the error status
     if (!isAlreadyTaken && this.state.isProjectNameTaken) {
-      this.setState({ isProjectNameTaken: false });
+      this.setState({
+        isProjectNameTaken: false,
+      });
     }
   };
 
@@ -226,7 +239,12 @@ class CreateNewProjectWizard extends PureComponent<Props, State> {
   };
 
   render() {
-    const { isVisible, createNewProjectCancel, projectHomePath } = this.props;
+    const {
+      isVisible,
+      createNewProjectCancel,
+      projectHomePath,
+      isOnline,
+    } = this.props;
     const {
       projectName,
       projectType,
@@ -238,7 +256,12 @@ class CreateNewProjectWizard extends PureComponent<Props, State> {
       isProjectNameTaken,
     } = this.state;
 
-    const project = { projectName, projectType, projectIcon, projectStarter };
+    const project = {
+      projectName,
+      projectType,
+      projectIcon,
+      projectStarter,
+    };
 
     const readyToBeBuilt = status !== 'filling-in-form';
 
@@ -271,6 +294,7 @@ class CreateNewProjectWizard extends PureComponent<Props, State> {
                   handleSubmit={this.handleSubmit}
                   hasBeenSubmitted={status !== 'filling-in-form'}
                   isProjectNameTaken={isProjectNameTaken}
+                  isOnline={isOnline}
                 />
               }
               backface={
@@ -295,6 +319,7 @@ const mapStateToProps = state => ({
   isVisible: state.modal === 'new-project-wizard',
   isOnboardingCompleted: getOnboardingCompleted(state),
   settings: getAppSettings(state),
+  isOnline: getOnlineState(state),
 });
 
 const mapDispatchToProps = {

src/components/CreateNewProjectWizard/MainPane.js

@@ -29,6 +29,7 @@ type Props = {
   updateFieldValue: (field: Field, value: any) => void,
   focusField: (field: ?Field) => void,
   handleSubmit: () => Promise<any> | void,
+  isOnline: boolean,
 };
 
 class MainPane extends PureComponent<Props> {
@@ -141,14 +142,19 @@ class MainPane extends PureComponent<Props> {
       hasBeenSubmitted,
       isProjectNameTaken,
       handleSubmit,
+      isOnline,
     } = this.props;
 
     const { lastIndex, steps } = this.renderConditionalSteps(currentStepIndex);
     return (
       <Fragment>
         <Spring
-          from={{ offset: currentStepIndex === 0 ? 0 : 50 }}
-          to={{ offset: currentStepIndex === 0 ? 50 : 0 }}
+          from={{
+            offset: currentStepIndex === 0 ? 0 : 50,
+          }}
+          to={{
+            offset: currentStepIndex === 0 ? 50 : 0,
+          }}
           native
         >
           {({ offset }) => (
@@ -163,7 +169,6 @@ class MainPane extends PureComponent<Props> {
                 isProjectNameTaken={isProjectNameTaken}
               />
               <ProjectPath projectName={projectName} />
-
               {steps}
             </Wrapper>
           )}
@@ -175,6 +180,7 @@ class MainPane extends PureComponent<Props> {
               !projectName ||
               this.isSubmitDisabled(currentStepIndex, lastIndex)
             }
+            isOnline={isOnline}
             readyToBeSubmitted={currentStepIndex >= lastIndex}
             hasBeenSubmitted={hasBeenSubmitted}
             onSubmit={handleSubmit}