Fixes #83: Clean up webview styling

src/webviews/configureJobSubmission/index.ts

@@ -155,7 +155,7 @@ export default class ConfigureJobSubmissionWebviewPanel extends BaseWebviewPanel
                 // Re-create the webview
                 ConfigureJobSubmissionWebviewPanel.createOrShow(this._context, this._properties);
             }
-        }, 3000);
+        }, 5000);
     }
 
     protected receiveMessage(): void {

src/webviews/configureJobSubmission/resources/components/App.js

@@ -1,44 +1,40 @@
 /* eslint-disable no-undef */
-import ListItem from 'carbon-components-react/es/components/ListItem';
-import UnorderedList from 'carbon-components-react/es/components/UnorderedList';
-import * as React from 'react';
+import React, { useState } from 'react';
+import HeaderContainer from './HeaderContainer';
+import JobInfoModal from './JobInfoModal';
 import SubmitJobContainer from './SubmitJobContainer';
 
-// submitJobParams is defined when setting the webview HTML content
-const App = () => (
-  <div className="app-container">
-    <div className="bx--grid bx--grid--no-gutter">
-      <div className="bx--row app-container__row">
-        <div className="bx--col">
-          <h1 className="app-container__heading">
-            {`Configure job for ${submitJobParams.name}`}
-          </h1>
-          {submitJobParams.details && Object.keys(submitJobParams.details).length
-            ? (
-              <UnorderedList className="app-container__list">
-                {Object.keys(submitJobParams.details).map((label) => (
-                  <ListItem key={label}>
-                    {`${label}: ${submitJobParams.details[label]}`}
-                  </ListItem>
-                ))}
-                <ListItem>{`Instance: ${submitJobParams.targetInstance.instanceName}`}</ListItem>
-              </UnorderedList>
-            )
-            : (
-              <div>
-                {`Instance: ${submitJobParams.targetInstance.instanceName}`}
-              </div>
-            )
-          }
+/**
+ * Note: `submitJobParams` is defined when setting the webview HTML content
+ */
+const App = () => {
+  const [isJobInfoModalOpen, setIsJobInfoModalOpen] = useState(false);
+
+  return (
+    <div className="app-container">
+      <JobInfoModal
+        isOpen={isJobInfoModalOpen}
+        close={() => setIsJobInfoModalOpen(false)}
+        instanceName={submitJobParams.targetInstance.instanceName}
+        jobDetails={submitJobParams.details || null}
+      />
+      <div className="bx--grid bx--grid--no-gutter">
+        <div className="bx--row app-container__header-container">
+          <div className="bx--col">
+            <HeaderContainer
+              bundleName={submitJobParams.name}
+              setIsJobInfoModalOpen={setIsJobInfoModalOpen}
+            />
+          </div>
         </div>
-      </div>
-      <div className="bx--row app-container__row app-container__main-container">
-        <div className="bx--col">
-          <SubmitJobContainer params={submitJobParams} />
+        <div className="bx--row app-container__main-container">
+          <div className="bx--col">
+            <SubmitJobContainer params={submitJobParams} />
+          </div>
         </div>
       </div>
     </div>
-  </div>
-);
+  );
+};
 
 export default App;

src/webviews/configureJobSubmission/resources/components/HeaderContainer.js

@@ -0,0 +1,31 @@
+import InfoIcon16 from '@carbon/icons-react/es/information/16';
+import Button from 'carbon-components-react/es/components/Button';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+const HeaderContainer = ({ bundleName, setIsJobInfoModalOpen }) => {
+  return (
+    <div className="header-container--flex">
+      <h1 className="header-container__header">
+        {`Configure job for ${bundleName}`}
+      </h1>
+      <Button
+        hasIconOnly
+        kind="ghost"
+        renderIcon={InfoIcon16}
+        iconDescription="Show job submission details"
+        tooltipAlignment="center"
+        tooltipPosition="bottom"
+        onClick={() => setIsJobInfoModalOpen(true)}
+        className="header-container__info-button"
+      />
+    </div>
+  );
+};
+
+HeaderContainer.propTypes = {
+  bundleName: PropTypes.string.isRequired,
+  setIsJobInfoModalOpen: PropTypes.func.isRequired
+};
+
+export default HeaderContainer;

src/webviews/configureJobSubmission/resources/components/JobInfoModal.js

@@ -0,0 +1,55 @@
+import Modal from 'carbon-components-react/es/components/Modal';
+import {
+  StructuredListBody,
+  StructuredListCell,
+  StructuredListRow,
+  StructuredListWrapper
+} from 'carbon-components-react/es/components/StructuredList';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+const JobInfoModal = ({
+ isOpen, close, instanceName, jobDetails
+}) => {
+  return (
+    <Modal
+      iconDescription="Close"
+      modalAriaLabel="Job submission details modal"
+      modalHeading="Job submission details"
+      open={isOpen}
+      size="lg"
+      passiveModal
+      onRequestClose={close}
+    >
+      <div className="job-details-container">
+        <StructuredListWrapper className="job-details-container__list">
+          <StructuredListBody>
+            {jobDetails && Object.keys(jobDetails).length && Object.keys(jobDetails).map((label) => (
+              <StructuredListRow className="structured-row" key={label}>
+                <StructuredListCell noWrap>{label}</StructuredListCell>
+                <StructuredListCell className="job-details-container__list-value">{jobDetails[label]}</StructuredListCell>
+              </StructuredListRow>
+            ))}
+            <StructuredListRow className="structured-row">
+              <StructuredListCell noWrap>Instance</StructuredListCell>
+              <StructuredListCell className="job-details-container__list-value">{instanceName}</StructuredListCell>
+            </StructuredListRow>
+          </StructuredListBody>
+        </StructuredListWrapper>
+      </div>
+    </Modal>
+  );
+};
+
+JobInfoModal.defaultProps = {
+  jobDetails: null
+};
+
+JobInfoModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  close: PropTypes.func.isRequired,
+  instanceName: PropTypes.string.isRequired,
+  jobDetails: PropTypes.objectOf(PropTypes.string)
+};
+
+export default JobInfoModal;

src/webviews/configureJobSubmission/resources/index.js

@@ -1,5 +1,5 @@
-import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+import React from 'react';
+import ReactDOM from 'react-dom';
 import App from './components/App';
 import './index.scss';
 

src/webviews/configureJobSubmission/resources/index.scss

@@ -6,11 +6,14 @@
 @import '~carbon-components/scss/components/dropdown/dropdown';
 @import '~carbon-components/scss/components/list-box/list-box';
 @import '~carbon-components/scss/components/list/list';
+@import '~carbon-components/scss/components/modal/modal';
+@import '~carbon-components/scss/components/structured-list/structured-list';
 @import '~carbon-components/scss/components/text-input/text-input';
 @import '~carbon-components/scss/components/tooltip/tooltip';
 
 // Webview styling
 @import '../../styles/app.scss';
+@import './styles/_job-info-modal.scss';
 @import './styles/_submit-job-container.scss';
 @import './styles/_submit-params-container.scss';
 @import './styles/_job-config-container.scss';

src/webviews/configureJobSubmission/resources/styles/_job-info-modal.scss

@@ -0,0 +1,9 @@
+.job-details-container {
+  .job-details-container__list {
+    margin-bottom: 0;
+
+    .job-details-container__list-value {
+      word-break: break-all;
+    }
+  }
+}

src/webviews/configureJobSubmission/resources/styles/_submit-job-container.scss

@@ -1,21 +1,21 @@
 .submit-job-container {
   .submit-job-container__accordion {
-    padding-top: $layout-03;
     padding-bottom: $layout-03;
   }
-  
+
   .submit-job-container__accordion_title {
     @include carbon--type-style('productive-heading-02');
   }
 
   .submit-job-container__button-container {
     flex-flow: row-reverse wrap;
+    justify-content: flex-end;
 
     @include carbon--breakpoint-down(700px) {
       flex-flow: column wrap;
       align-content: flex-end;
     }
-  
+
     .submit-job-container__button-container__button {
       flex: 1;
     }

src/webviews/instanceSelection/resources/components/App.js

@@ -1,21 +1,26 @@
 /* eslint-disable no-undef */
-import * as React from 'react';
+import React from 'react';
 import SelectInstanceContainer from './SelectInstanceContainer';
 import FilePathsContainer from './FilePathsContainer';
 
-// selectInstancePanelTitle and SelectInstanceContainerParams is defined when setting the webview HTML content
+/**
+ * Note: `selectInstancePanelTitle` and `selectInstanceContainerParams` are defined when
+ * setting the webview HTML content
+ */
 const App = () => (
   <div className="app-container">
     <div className="bx--grid bx--grid--no-gutter">
-      <div className="bx--row app-container__row">
+      <div className="bx--row app-container__header-container">
         <div className="bx--col">
-          <h1 className="app-container__heading">
-            {selectInstancePanelTitle}
+          <div>
+            <h1 className="header-container__header">
+              {selectInstancePanelTitle}
+            </h1>
             <FilePathsContainer params={filePathsContainerParams} />
-          </h1>
+          </div>
         </div>
       </div>
-      <div className="bx--row app-container__row app-container__main-container">
+      <div className="bx--row app-container__main-container">
         <div className="bx--col">
           <SelectInstanceContainer params={selectInstanceContainerParams} />
         </div>

src/webviews/instanceSelection/resources/components/FilePathsContainer.js

@@ -20,7 +20,7 @@ const FilePathsContainer = (props) => {
   const fileList = () => {
     const filePaths = files.map((file, i) => {
       return (
-        files.length > 1 ? <ListItem key={file}>{file}</ListItem> : <div key={file}>{file}</div>
+        files.length > 1 ? <ListItem key={file}>{file}</ListItem> : <div key={file} className="file-name">{file}</div>
       );
     });
     return filePaths;
@@ -34,7 +34,7 @@ const FilePathsContainer = (props) => {
           {fileList()}
         </UnorderedList>
       ) : (
-        <div className="file-list">
+        <div>
           {fileList()}
         </div>
       )}

src/webviews/instanceSelection/resources/components/SelectInstanceContainer.js

@@ -52,14 +52,12 @@ export default class SelectInstanceContainer extends Component {
 
   getButtonContainer = () => {
     const { selectedInstance } = this.state;
-    const { params: { storedInstances, action, postBuildAction } } = this.props;
+    const { params: { storedInstances, action } } = this.props;
     const inst = storedInstances.find((type) => type.connectionId === selectedInstance.id);
-    const actionCapitalized = this.capitalizeFirstLetter(action);
-    const labelTitle = postBuildAction === 1 ? `${actionCapitalized} and submit` : actionCapitalized;
     return (
       <ButtonContainer
         primaryBtn={{
-          label: labelTitle,
+          label: 'Select',
           isValid: true,
           onClick: () => {
             this.messageHandler.postMessage({
@@ -141,11 +139,6 @@ export default class SelectInstanceContainer extends Component {
     this.messageHandler.postMessage({ command: 'close-panel' });
   }
 
-  capitalizeFirstLetter = (string) => {
-    const action = string === 'build-make' ? 'build' : string;
-    return action.charAt(0).toUpperCase() + action.slice(1);
-  }
-
   render() {
     return (
       <div className="bx--grid select-instance-container">

src/webviews/instanceSelection/resources/index.js

@@ -1,5 +1,5 @@
-import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+import React from 'react';
+import ReactDOM from 'react-dom';
 import App from './components/App';
 import './index.scss';
 

src/webviews/instanceSelection/resources/styles/_buttonContainer.scss

@@ -1,5 +1,6 @@
 .button-container {
   flex-flow: row-reverse wrap;
+  justify-content: flex-end;
 
   @include carbon--breakpoint-down(500px) {
     flex-flow: column wrap;

src/webviews/instanceSelection/resources/styles/_filePathsContainer.scss

@@ -13,11 +13,18 @@
 .file-list {
   display: flex;
   flex-direction: column;
+  padding-top: $spacing-02;
   padding-left: $layout-01;
-  font-size: 1rem;
-  word-break: break-word;
+  word-break: break-all;
+  @include carbon--type-style('body-short-01');
+}
+
+.file-name {
+  padding-left: $spacing-02;
+  word-break: break-all;
+  @include carbon--type-style('body-short-01');
 }
 
 .file-path-subtitle {
-  font-size: 1rem;
+  @include carbon--type-style('body-short-01');
 }

src/webviews/jobGraph/resources/containers/App.js

@@ -1,8 +1,10 @@
 /* eslint-disable no-undef */
-import * as React from 'react';
+import React from 'react';
 import StreamsJobGraphContainer from './StreamsJobGraphContainer';
 
-// jobGraphContainerParams is defined when setting the webview HTML content
+/**
+ * Note: `jobGraphContainerParams` is defined when setting the webview HTML content
+ */
 const App = () => (
   <div className="app-container">
     <StreamsJobGraphContainer params={jobGraphContainerParams} />

src/webviews/jobGraph/resources/index.js

@@ -1,5 +1,5 @@
-import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+import React from 'react';
+import ReactDOM from 'react-dom';
 import { IntlProvider } from 'react-intl';
 import App from './containers/App';
 import './index.scss';