105832 update new pipeline job page

src/components/breadcrumb/index.js

@@ -1,32 +1,30 @@
-import { NavLink } from 'react-router-dom';
+import { List } from '@equinor/eds-core-react';
 import PropTypes from 'prop-types';
 import React from 'react';
+import { NavLink } from 'react-router-dom';
 
 import './style.css';
 
-const BreadcrumbLink = (link) => {
-  if (link.to) {
-    return (
-      <NavLink className="breadcrumb__link" to={link.to}>
-        {link.label}
-      </NavLink>
-    );
-  }
-
-  return <span>{link.label}</span>;
-};
-
-export const Breadcrumb = ({ links }) => {
-  const linksRender = links.map((link, idx) => (
-    <li key={link.to || idx}>{BreadcrumbLink(link)}</li>
-  ));
-
-  return (
-    <nav className="breadcrumb" role="navigation" aria-label="Page hierarchy">
-      <ul>{linksRender}</ul>
-    </nav>
+const BreadcrumbLink = (link) =>
+  link.to ? (
+    <NavLink className="breadcrumb__link" to={link.to}>
+      {link.label}
+    </NavLink>
+  ) : (
+    <span className="breadcrumb__text">{link.label}</span>
   );
-};
+
+export const Breadcrumb = ({ links }) => (
+  <nav className="breadcrumb" role="navigation" aria-label="Page hierarchy">
+    <List>
+      {links.map((link, idx) => (
+        <List.Item className="breadcrumb__item" key={link.to || idx}>
+          {BreadcrumbLink(link)}
+        </List.Item>
+      ))}
+    </List>
+  </nav>
+);
 
 Breadcrumb.propTypes = {
   links: PropTypes.arrayOf(

src/components/breadcrumb/style.css

@@ -1,17 +1,22 @@
 .breadcrumb {
-  font-size: 1.25rem;
+  font-size: 1.000rem;
 }
 
 .breadcrumb li {
   display: inline-block;
 }
 
-.breadcrumb li::after {
-  content: '/';
-  padding-left: var(--space-3);
-  padding-right: var(--space-3);
+:not(:last-child).breadcrumb__item::after {
+  content: "/";
+  color: var(--eds_text__static_icons__tertiary, rgba(111,111,111,1));
+  padding-left: var(--eds_spacing_medium);
+  padding-right: var(--eds_spacing_medium);
 }
 
-.breadcrumb li:last-child::after {
-  content: none;
+.breadcrumb__text {
+  color: var(--eds_text__static_icons__tertiary, rgba(111,111,111,1));
+}
+
+.breadcrumb__link {
+  color: var(--eds_interactive_primary__resting);
 }

src/components/create-job-form/index.js

@@ -1,33 +1,33 @@
-import { connect } from 'react-redux';
+import {
+  Button,
+  CircularProgress,
+  NativeSelect,
+} from '@equinor/eds-core-react';
+import pick from 'lodash/pick';
 import PropTypes from 'prop-types';
 import React from 'react';
-import pick from 'lodash/pick';
+import { connect } from 'react-redux';
+
+import PipelineFormBuild from './pipeline-form-build';
+import PipelineFormBuildDeploy from './pipeline-form-build-deploy';
+import PipelineFormPromote from './pipeline-form-promote';
 
 import Alert from '../alert';
-import Button from '../button';
 import FormField from '../form-field';
-import Spinner from '../spinner';
-
-import requestStates from '../../state/state-utils/request-states';
-
-import jobActions from '../../state/job-creation/action-creators';
-import { getCreationError, getCreationState } from '../../state/job-creation';
+import DeploymentSummaryModel from '../../models/deployment-summary';
+import EnvironmentSummaryModel from '../../models/environment-summary';
 import {
   getEnvironmentBranches,
   getEnvironmentSummaries,
 } from '../../state/application';
 import { getDeployments } from '../../state/deployments';
+import { getCreationError, getCreationState } from '../../state/job-creation';
+import jobActions from '../../state/job-creation/action-creators';
+import requestStates from '../../state/state-utils/request-states';
 import * as subscriptionActions from '../../state/subscriptions/action-creators';
-
-import DeploymentSummaryModel from '../../models/deployment-summary';
-import EnvironmentSummaryModel from '../../models/environment-summary';
 import configHandler from '../../utils/config';
 import { keys as configKeys } from '../../utils/config/keys';
 
-import PipelineFormBuild from './pipeline-form-build';
-import PipelineFormBuildDeploy from './pipeline-form-build-deploy';
-import PipelineFormPromote from './pipeline-form-promote';
-
 const pipelines = {
   build: {
     component: PipelineFormBuild,
@@ -142,7 +142,7 @@ class CreateJobForm extends React.Component {
               pipelines[this.state.pipelineName].description
             }
           >
-            <select
+            <NativeSelect
               value={this.state.pipelineName}
               onChange={this.handleChangePipeline}
             >
@@ -152,25 +152,26 @@ class CreateJobForm extends React.Component {
                   {pipeline}
                 </option>
               ))}
-            </select>
+            </NativeSelect>
           </FormField>
           {this.renderPipelineForm()}
           <div className="o-action-bar">
             {this.props.creationState === requestStates.IN_PROGRESS && (
-              <Spinner>Creating…</Spinner>
+              <div>
+                <CircularProgress size="16"></CircularProgress>
+                {'  '}Creating…
+              </div>
             )}
             {this.props.creationState === requestStates.FAILURE && (
               <Alert type="danger">
                 Failed to create job. {this.props.creationError}
               </Alert>
             )}
-            <Button
-              btnType="primary"
-              disabled={!this.state.isValid}
-              type="submit"
-            >
-              Create job
-            </Button>
+            <div>
+              <Button disabled={!this.state.isValid} type="submit">
+                Create job
+              </Button>
+            </div>
           </div>
         </fieldset>
       </form>

src/components/create-job-form/pipeline-form-build-deploy.js

@@ -1,3 +1,4 @@
+import { NativeSelect } from '@equinor/eds-core-react';
 import PropTypes from 'prop-types';
 import React from 'react';
 
@@ -52,14 +53,14 @@ export const PipelineFormBuildDeploy = ({ onChange, branch, branches }) => {
 
   return (
     <FormField label="Git branch to build">
-      <select value={branch} onChange={handleChange}>
+      <NativeSelect value={branch} onChange={handleChange}>
         <option value="">— Please select —</option>
         {Object.keys(branches).map((branch) => (
           <option key={branch} value={branch}>
             {branch}
           </option>
         ))}
-      </select>
+      </NativeSelect>
       {branch && (
         <p>
           <TargetEnvs branch={branch} branches={branches} />

src/components/create-job-form/pipeline-form-build.js

@@ -1,3 +1,4 @@
+import { NativeSelect } from '@equinor/eds-core-react';
 import PropTypes from 'prop-types';
 import React from 'react';
 
@@ -9,14 +10,14 @@ export const PipelineFormBuild = ({ onChange, branch, branches }) => {
 
   return (
     <FormField label="Git branch to build">
-      <select value={branch} onChange={handleChange}>
+      <NativeSelect value={branch} onChange={handleChange}>
         <option value="">— Please select —</option>
         {Object.keys(branches).map((branch) => (
           <option key={branch} value={branch}>
             {branch}
           </option>
         ))}
-      </select>
+      </NativeSelect>
     </FormField>
   );
 };

src/components/create-job-form/pipeline-form-promote.js

@@ -1,16 +1,14 @@
+import { NativeSelect } from '@equinor/eds-core-react';
 import PropTypes from 'prop-types';
 import React from 'react';
 
 import EnvironmentBadge from '../environment-badge';
+import FormField from '../form-field';
 import RelativeToNow from '../time/relative-to-now';
-
 import DeploymentSummaryModel from '../../models/deployment-summary';
 import EnvironmentSummaryModel from '../../models/environment-summary';
-
-import { smallDeploymentName } from '../../utils/string';
 import { formatDateTime } from '../../utils/datetime';
-
-import FormField from '../form-field';
+import { smallDeploymentName } from '../../utils/string';
 
 export const PipelineFormPromote = ({
   onChange,
@@ -22,27 +20,23 @@ export const PipelineFormPromote = ({
   const handleChange = (ev) => {
     const newValue = ev.target.value;
     const newState = { [ev.target.name]: newValue };
-    let isValid = false;
+    let isValid;
 
     if (ev.target.name === 'toEnvironment') {
       isValid = deploymentName && newValue;
     } else {
-      isValid = toEnvironment && newValue;
-
       // Account for having selected an environment first; if it is the target
       // of the newly-selected deployment then we invalidate the form
       const selectedEnv = environments.find((e) => e.name === toEnvironment);
-      if (
+      isValid =
         selectedEnv &&
         selectedEnv.activeDeployment &&
         selectedEnv.activeDeployment.name === newValue
-      ) {
-        isValid = false;
-      }
+          ? false
+          : toEnvironment && newValue;
 
       // When selecting a deployment to promote we need to add its environment
       // to the state that is sent to the API (the "fromEnvironment" argument)
-
       const selectedDeployment = deployments.find((d) => d.name === newValue);
       newState.fromEnvironment = selectedDeployment.environment;
     }
@@ -89,7 +83,7 @@ export const PipelineFormPromote = ({
   return (
     <React.Fragment>
       <FormField help={getDeploymentHelp()} label="Deployment to promote">
-        <select
+        <NativeSelect
           onChange={handleChange}
           name="deploymentName"
           value={deploymentName}
@@ -107,10 +101,10 @@ export const PipelineFormPromote = ({
               ))}
             </optgroup>
           ))}
-        </select>
+        </NativeSelect>
       </FormField>
       <FormField label="Target environment">
-        <select
+        <NativeSelect
           name="toEnvironment"
           onChange={handleChange}
           value={toEnvironment}
@@ -128,7 +122,7 @@ export const PipelineFormPromote = ({
               {env.name}
             </option>
           ))}
-        </select>
+        </NativeSelect>
       </FormField>
     </React.Fragment>
   );

src/components/page-pipeline-job-new/index.js

@@ -1,21 +1,19 @@
-import { connect } from 'react-redux';
-import { Link } from 'react-router-dom';
+import { Typography } from '@equinor/eds-core-react';
 import PropTypes from 'prop-types';
 import React from 'react';
+import { connect } from 'react-redux';
+import { Link } from 'react-router-dom';
 
 import Alert from '../alert';
 import Breadcrumb from '../breadcrumb';
 import CreateJobForm from '../create-job-form';
 import DocumentTitle from '../document-title';
-import Panel from '../panel';
-
-import { routeWithParams } from '../../utils/string';
-import { mapRouteParamsToProps } from '../../utils/routing';
-import requestStates from '../../state/state-utils/request-states';
 import routes from '../../routes';
-
-import jobActions from '../../state/job-creation/action-creators';
 import { getCreationResult, getCreationState } from '../../state/job-creation';
+import jobActions from '../../state/job-creation/action-creators';
+import requestStates from '../../state/state-utils/request-states';
+import { mapRouteParamsToProps } from '../../utils/routing';
+import { routeWithParams } from '../../utils/string';
 
 class PagePipelineJobNew extends React.Component {
   componentWillUnmount() {
@@ -39,21 +37,23 @@ class PagePipelineJobNew extends React.Component {
           ]}
         />
         <main className="o-layout-constrained">
-          <div className="o-body-text">
-            <h1 className="o-heading-section">New pipeline job</h1>
+          <div>
+            <Typography variant="h1">New pipeline job</Typography>
             <p>
-              Pipeline jobs perform different actions in Radix. The pipeline of
-              the job defines what action to take, and it may require specific
-              parameters.
+              <Typography variant="h6" as="span">
+                Pipeline jobs perform different actions in Radix. The pipeline
+                of the job defines what action to take, and it may require
+                specific parameters.
+              </Typography>
             </p>
           </div>
-          <Panel>
-            {this.props.creationState !== requestStates.SUCCESS && (
+          <div className="panel grid grid--gap-small">
+            {this.props.creationState === requestStates.SUCCESS ? (
+              this.renderSuccess()
+            ) : (
               <CreateJobForm appName={appName} />
             )}
-            {this.props.creationState === requestStates.SUCCESS &&
-              this.renderSuccess()}
-          </Panel>
+          </div>
         </main>
       </React.Fragment>
     );
@@ -86,11 +86,13 @@ class PagePipelineJobNew extends React.Component {
     return (
       <div>
         <Alert>
-          The pipeline job "{this.props.creationResult.name}" has been created
+          <Typography variant="h6">
+            The pipeline job "{this.props.creationResult.name}" has been created
+          </Typography>
         </Alert>
-        <p>
+        <Typography variant="h6">
           View {jobLink} or all {jobsLink}
-        </p>
+        </Typography>
       </div>
     );
   }