tweak styling, refactor update all summary dialog

web/src/components/catalog.css

@@ -24,8 +24,7 @@
   margin: 0 0 4px 0;
 }
 
-.catalog-installedLabel {
-  font-style: italic;
+.catalog-installed-label {
   font-family: monospace;
   width: 10em;
   text-align: center;

web/src/components/catalog.js

@@ -23,14 +23,14 @@ const Catalog = (props) => {
       <ProjectControl>
         <ProjectInfo project={e} />
         {(installedProjects || []).indexOf(projectName) === -1 ? (
-          <TextButton color="hsl(0, 0%, 59%)"
+          <TextButton color="hsl(0, 0%, 45%)"
             action={() => props.installAction(catalogURL, projectName)}
           >
             install
           </TextButton>
         ) : (
-          <div className='catalog-installedLabel'>
-              already installed
+          <div className='catalog-installed-label'>
+              installed
           </div>
         )}
       </ProjectControl>
@@ -48,7 +48,7 @@ const Catalog = (props) => {
           icon={ICONS['loop2']}
           size='12'
           padding='1'
-          color='hsl(0, 0%, 59%)'
+          color='hsl(0, 0%, 45%)'
           dark={true}
           action={() => props.refreshAction(catalogURL)}
         />

web/src/components/project-list.css

@@ -15,7 +15,7 @@
   margin: 0 0 4px 0;
 }
 
-.project-updateAllButton {
+.project-update-all-button {
   color: rgb(150, 150, 150);
   background: rgb(249, 249, 249);
   padding: 15px;

web/src/components/project-list.js

@@ -25,13 +25,13 @@ const ProjectList = props => {
           <ProjectControl>
             <ProjectInfo project={composed} />
             <TextButton
-              color='hsl(0, 0%, 59%)' 
+              color='hsl(0, 0%, 45%)'
               action={() => updateAction(url, name)}
             >
               update
             </TextButton>
             <TextButton
-              color='hsl(0, 0%, 59%)' 
+              color='hsl(0, 0%, 45%)'
               action={() => removeAction(url, name)}
             >
               remove
@@ -45,8 +45,8 @@ const ProjectList = props => {
   return (
     <div className='project-list-container'>
       {projectList.length ? (<TextButton
-        classes='project-updateAllButton'
-        color='hsl(0, 0%, 59%)' 
+        classes='project-update-all-button'
+        color='hsl(0, 0%, 45%)'
         action={() => updateAllAction(projectList)}
       >update all</TextButton>) : ''}
       <ul className='project-listing'>

web/src/model/project-actions.js

@@ -27,8 +27,7 @@ export const PROJECT_INSTALL_REQUEST = 'PROJECT_INSTALL_REQUEST';
 export const PROJECT_INSTALL_SUCCESS = 'PROJECT_INSTALL_SUCCESS';
 export const PROJECT_INSTALL_FAILURE = 'PROJECT_INSTALL_FAILURE';
 
-export const PROJECT_UPDATE_ALL_SUCCESS = 'PROJECT_UPDATE_ALL_SUCCESS';
-export const PROJECT_UPDATE_ALL_FAILURE = 'PROJECT_UPDATE_ALL_FAILURE';
+export const PROJECT_UPDATE_ALL_COMPLETE = 'PROJECT_UPDATE_ALL_COMPLETE';
 
 export const PROJECT_UPDATE_REQUEST = 'PROJECT_UPDATE_REQUEST';
 export const PROJECT_UPDATE_SUCCESS = 'PROJECT_UPDATE_SUCCESS';
@@ -68,8 +67,7 @@ export const projectInstallRequest = (catalog, name) => ({ type: PROJECT_INSTALL
 export const projectInstallSuccess = (project, catalog, name) => ({ type: PROJECT_INSTALL_SUCCESS, project, catalog, name });
 export const projectInstallFailure = (error, catalog, name) => ({ type: PROJECT_INSTALL_FAILURE, error, catalog, name });
 
-export const projectUpdateAllSuccess = (successArr) => ({ type: PROJECT_UPDATE_ALL_SUCCESS, successArr });
-export const projectUpdateAllFailure = (successArr, failureArr) => ({ type: PROJECT_UPDATE_ALL_FAILURE, successArr, failureArr });
+export const projectUpdateAllComplete = (successArr, failureArr) => ({ type: PROJECT_UPDATE_ALL_COMPLETE, successArr, failureArr });
 
 export const projectUpdateRequest = (project, name) => ({ type: PROJECT_UPDATE_REQUEST, project, name });
 export const projectUpdateSuccess = (project, name) => ({ type: PROJECT_UPDATE_SUCCESS, project, name });
@@ -96,7 +94,7 @@ export const getCatalogSummary = cb => dispatch => {
 
 export const getCatalogByURL = (url, onSuccess, onFailure) => dispatch => {
   dispatch(catalogRequest(url));
-  return API.getCatalogByURL(url, 
+  return API.getCatalogByURL(url,
     successResponse => {
       const c = fromJS(successResponse);
       dispatch(catalogSuccess(url, c));
@@ -114,7 +112,7 @@ export const getCatalogByURL = (url, onSuccess, onFailure) => dispatch => {
 
 export const getCatalog = (name, onSuccess, onFailure) => dispatch => {
   dispatch(catalogRequest(name));
-  return API.getCatalog(name, 
+  return API.getCatalog(name,
     successResponse => {
       const c = fromJS(successResponse);
       dispatch(catalogSuccess(name, c));
@@ -132,7 +130,7 @@ export const getCatalog = (name, onSuccess, onFailure) => dispatch => {
 
 export const updateCatalog = (url, onSuccess, onFailure) => dispatch => {
   dispatch(catalogUpdateRequest(url));
-  return API.updateCatalog(url, 
+  return API.updateCatalog(url,
     successResponse => {
       const catalog = fromJS(successResponse);
       dispatch(catalogUpdateSuccess(url, catalog))
@@ -187,45 +185,38 @@ export const installProject = (catalog, name, onSuccess, onFailure) => dispatch
     });
 };
 
-export const updateAllProjects = (projects, onSuccess, onFailure) => dispatch => {
+export const orderResultsByProjectName = (a, b) => a.name < b.name ? -1 : a.name > b.name ? 1 : 0;
+
+export const updateAllProjects = (projects, onComplete) => dispatch => {
   const successArr = [];
   const failureArr = [];
   const requestsArr = [];
   projects.forEach(({url,name}) => {
     dispatch(projectUpdateRequest(url, name));
     const promise = new Promise((resolve) => {
-      API.updateProject(url, 
+      API.updateProject(url,
         successResult => {
           successArr.push({successResult, url, name});
           resolve('resolved');
         },
         failureResult => {
-          console.log("got here")
           failureArr.push({failureResult, url, name});
           resolve('resolved');
         });
     });
-    console.log(promise);
     requestsArr.push(promise);
   });
   Promise.all(requestsArr).then(_ => {
-    if (failureArr.length) {
-      dispatch(projectUpdateAllFailure(successArr, failureArr));
-      if (onFailure) {
-        onFailure(successArr, failureArr);
-      }
-    } else {
-      dispatch(projectUpdateAllSuccess(successArr));
-      if (onSuccess) {
-        onSuccess(successArr);
-      }
+    dispatch(projectUpdateAllComplete(successArr, failureArr));
+    if (onComplete) {
+      onComplete(successArr, failureArr);
     }
   });
 };
 
 export const updateProject = (project, name, onSuccess, onFailure) => dispatch => {
   dispatch(projectUpdateRequest(project, name));
-  return API.updateProject(project, 
+  return API.updateProject(project,
     successResult => {
       dispatch(projectUpdateSuccess(successResult, project, name));
       if (onSuccess) {

web/src/project-activity.css

@@ -4,8 +4,7 @@
   /* overflow: scroll; */
 }
 
-/*
-.project-activity-child {
-  overflow: scroll;
-}
-*/
+.project-activity-update-modal-section-header {
+  font-weight: bolder;
+  font-size: 16px;
+}

web/src/project-activity.js

@@ -8,6 +8,8 @@ import ModalContent from './modal-content';
 //import IconButton from './icon-button';
 //import { ICONS } from './svg-icons';
 
+import { orderResultsByProjectName } from './model/project-actions';
+
 import './project-activity.css';
 import ModalProgress from './modal-progress';
 
@@ -93,35 +95,69 @@ class ProjectActivity extends Component {
     return(content);
   };
 
+  updateSummaryModalContent = (successArr, failureArr) => {
+    let success = undefined;
+    if (successArr && successArr.length) {
+      success = (
+        <div>
+          <span className='project-activity-update-modal-section-header'>Updated</span>
+          <br /><br />
+          <table>
+            <tbody>
+              {successArr.map(e => (<tr><td>{e.name}</td></tr>))}
+            </tbody>
+          </table><br /><br />
+        </div>
+      );
+    }
+
+    let failure = undefined;
+    if (failureArr && failureArr.length) {
+      failure = (
+        <div>
+          <span className='project-activity-update-modal-section-header'>Failed</span>
+          <br /><br />
+          <table>
+            <tbody>
+              {failureArr.map(e => (
+                <tr>
+                  <td style={{ width: '100px' }}>{e.name}</td>
+                  <td style={{ width: 'auto' }}>{e.failureResult.error}</td>
+                </tr>))}
+            </tbody>
+          </table>
+        </div>
+      );
+    }
+
+    return (
+      <ModalContent
+        buttonAction={this.modalDismiss}
+        confirmOnly={true}
+      >
+        {success}
+        {failure}
+      </ModalContent>
+    )
+  };
+
   handleUpdateAllAction = (projectList) => {
     const modalCompletion = choice => {
       if (choice === 'ok') {
         this.props.updateAllProjects(projectList,
-          successArr => {
-            successArr = successArr.sort((a, b) => a.name < b.name ? -1 : a.name > b.name ? 1 : 0);
-            this.props.getProjectSummary();
-            this.props.refreshCodeDir();
-            this.props.showModal(<ModalContent
-              message='Updating all projects succeeded.'
-              supporting={`${successArr.length ? `The following projects were updated:\n\n${successArr.map(e => e.name).join('\n')}.` : ''}`}
-              style={{whiteSpace: 'pre-line'}}
-              buttonAction={this.modalDismiss}
-              confirmOnly={true}
-            />)
-          },
+          // completion callback
           (successArr, failureArr) => {
-            successArr = successArr.sort((a, b) => a.name < b.name ? -1 : a.name > b.name ? 1 : 0);
-            failureArr = failureArr.sort((a, b) => a.name < b.name ? -1 : a.name > b.name ? 1 : 0);
+            if (successArr) {
+              successArr = successArr.sort(orderResultsByProjectName);
+            }
+            if (failureArr) {
+              failureArr = failureArr.sort(orderResultsByProjectName);
+            }
             this.props.getProjectSummary();
             this.props.refreshCodeDir();
-            this.props.showModal(<ModalContent
-              message='Updating all projects failed.'
-              supporting={<span>{successArr.length ? (<div>The following projects were updated:<br /><br /><table><tbody>{successArr.map(e => (<tr><td>{e.name}</td></tr>))}</tbody></table><br /><br /></div>) : ''}
-              <div>The following errors happened:<br /><br /><table><tbody>{failureArr.map(e => (<tr><td style={{ width: '100px' }}>{e.name}</td><td style={{ width: 'auto' }}>{e.failureResult.error}</td></tr>))}</tbody></table></div></span>}
-              buttonAction={this.modalDismiss}
-              confirmOnly={true}
-            />)
+            this.props.showModal(this.updateSummaryModalContent(successArr, failureArr));
           });
+
         this.props.showModal(
           <ModalContent
             message='Updating all projects'
@@ -133,31 +169,18 @@ class ProjectActivity extends Component {
       } else {
         // update request canceled
         this.props.hideModal();
-        <table>
-    <thead>
-        <tr>
-            <th colspan="2">The table header</th>
-        </tr>
-    </thead>
-    <tbody>
-        <tr>
-            <td>The table body</td>
-            <td>with two columns</td>
-        </tr>
-    </tbody>
-</table>
       }
     };
 
-    const modalContent = (
+    const confirmUpdateAllModalContent = (
       <ModalContent
         message={`Update all projects?`}
         supporting="Local modifications will be overwritten"
         buttonAction={modalCompletion}
       />
     );
 
-    this.props.showModal(modalContent);
+    this.props.showModal(confirmUpdateAllModalContent);
   };