use NativeSelect for select dropdowns

equinor · Aug 3, 2021 · fb2f90a · fb2f90a
1 parent e8d0e28
commit fb2f90a
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 21 deletions.
diff --git a/src/components/create-job-form/pipeline-form-build-deploy.js b/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} />

diff --git a/src/components/create-job-form/pipeline-form-build.js b/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>
   );
 };

diff --git a/src/components/create-job-form/pipeline-form-promote.js b/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>
   );