Add sticky footer to PipelineBuilderForm

openshift · May 15, 2020 · 64de5a6 · 64de5a6
1 parent a94f8cc
commit 64de5a6
Show file tree

Hide file tree

Showing 3 changed files with 99 additions and 110 deletions.
diff --git a/...d/packages/dev-console/src/components/pipelines/pipeline-builder/PipelineBuilderForm.scss b/...d/packages/dev-console/src/components/pipelines/pipeline-builder/PipelineBuilderForm.scss
@@ -5,7 +5,7 @@
 
   &__content {
     overflow: auto;
-    padding: 30px;
+    padding: 30px 30px 0px 30px;
   }
 
   &__short-section {

diff --git a/...nd/packages/dev-console/src/components/pipelines/pipeline-builder/PipelineBuilderForm.tsx b/...nd/packages/dev-console/src/components/pipelines/pipeline-builder/PipelineBuilderForm.tsx
@@ -1,17 +1,8 @@
 import * as React from 'react';
 import * as _ from 'lodash';
 import { FormikProps, FormikValues } from 'formik';
-import {
-  ActionGroup,
-  Button,
-  ButtonVariant,
-  Form,
-  Stack,
-  StackItem,
-  TextInputTypes,
-} from '@patternfly/react-core';
-import { InputField } from '@console/shared';
-import { ButtonBar } from '@console/internal/components/utils';
+import { Form, Stack, StackItem, TextInputTypes } from '@patternfly/react-core';
+import { InputField, FormFooter } from '@console/shared';
 import { Pipeline } from '../../../utils/pipeline-augment';
 import { PipelineParameters, PipelineResources } from '../detail-page-tabs';
 import { UpdateOperationType } from './const';
@@ -90,108 +81,105 @@ const PipelineBuilderForm: React.FC<PipelineBuilderFormProps> = (props) => {
   };
 
   return (
-    <Stack className="odc-pipeline-builder-form">
-      <StackItem>
-        <PipelineBuilderHeader existingPipeline={existingPipeline} namespace={namespace} />
-      </StackItem>
-      <StackItem isFilled className="odc-pipeline-builder-form__content">
-        <Form className="odc-pipeline-builder-form__grid" onSubmit={handleSubmit}>
-          <div className="odc-pipeline-builder-form__short-section">
-            <InputField
-              label="Name"
-              name="name"
-              type={TextInputTypes.text}
-              isDisabled={!!existingPipeline}
-              required
-            />
-          </div>
-
-          <div>
-            <h2>Tasks</h2>
-            <PipelineBuilderVisualization
-              namespace={namespace}
-              tasksInError={status?.tasks || {}}
-              onTaskSelection={(task, resource) => {
-                setSelectedTask({
-                  taskIndex: values.tasks.findIndex(({ name }) => name === task.name),
-                  resource,
-                });
-              }}
-              onUpdateTasks={(updatedTaskGroup, op) =>
-                updateTasks(applyChange(updatedTaskGroup, op))
+    <>
+      <Stack className="odc-pipeline-builder-form">
+        <StackItem>
+          <PipelineBuilderHeader
+            formIsDirty={dirty}
+            existingPipeline={existingPipeline}
+            namespace={namespace}
+          />
+        </StackItem>
+        <StackItem isFilled className="odc-pipeline-builder-form__content">
+          <Form className="odc-pipeline-builder-form__grid" onSubmit={handleSubmit}>
+            <div className="odc-pipeline-builder-form__short-section">
+              <InputField
+                label="Name"
+                name="name"
+                type={TextInputTypes.text}
+                isDisabled={!!existingPipeline}
+                required
+              />
+            </div>
+
+            <div>
+              <h2>Tasks</h2>
+              <PipelineBuilderVisualization
+                namespace={namespace}
+                tasksInError={status?.tasks || {}}
+                onTaskSelection={(task, resource) => {
+                  setSelectedTask({
+                    taskIndex: values.tasks.findIndex(({ name }) => name === task.name),
+                    resource,
+                  });
+                }}
+                onUpdateTasks={(updatedTaskGroup, op) =>
+                  updateTasks(applyChange(updatedTaskGroup, op))
+                }
+                taskGroup={taskGroup}
+              />
+            </div>
+
+            <div>
+              <h2>Parameters</h2>
+              <PipelineParameters addLabel="Add Parameters" fieldName="params" />
+            </div>
+
+            <div>
+              <h2>Resources</h2>
+              <PipelineResources addLabel="Add Resources" fieldName="resources" />
+            </div>
+            <FormFooter
+              handleReset={handleReset}
+              errorMessage={status?.submitError}
+              isSubmitting={isSubmitting}
+              submitLabel={existingPipeline ? 'Save' : 'Create'}
+              disableSubmit={
+                !dirty ||
+                !_.isEmpty(errors) ||
+                !_.isEmpty(status?.tasks) ||
+                values.tasks.length === 0
               }
-              taskGroup={taskGroup}
+              resetLabel="Cancel"
+              sticky
             />
-          </div>
-
-          <div>
-            <h2>Parameters</h2>
-            <PipelineParameters addLabel="Add Parameters" fieldName="params" />
-          </div>
-
-          <div>
-            <h2>Resources</h2>
-            <PipelineResources addLabel="Add Resources" fieldName="resources" />
-          </div>
-
-          <ButtonBar errorMessage={status?.submitError} inProgress={isSubmitting}>
-            <ActionGroup className="pf-c-form">
-              <Button
-                type="submit"
-                variant={ButtonVariant.primary}
-                isDisabled={
-                  !dirty ||
-                  !_.isEmpty(errors) ||
-                  !_.isEmpty(status?.tasks) ||
-                  values.tasks.length === 0
-                }
-                data-test-id="import-git-create-button"
-              >
-                {existingPipeline ? 'Save' : 'Create'}
-              </Button>
-              <Button type="button" variant={ButtonVariant.secondary} onClick={handleReset}>
-                Cancel
-              </Button>
-            </ActionGroup>
-          </ButtonBar>
-          <Sidebar
-            open={!!selectedTask}
-            onRequestClose={() => {
-              if (selectedTask?.taskIndex === selectedTaskRef.current?.taskIndex) {
+          </Form>
+        </StackItem>
+      </Stack>
+      <Sidebar
+        open={!!selectedTask}
+        onRequestClose={() => {
+          if (selectedTask?.taskIndex === selectedTaskRef.current?.taskIndex) {
+            setSelectedTask(null);
+          }
+        }}
+      >
+        {() => (
+          <TaskSidebar
+            // Intentional remount when selection changes
+            key={selectedTask.taskIndex}
+            resourceList={values.resources || []}
+            errorMap={status?.tasks || {}}
+            onUpdateTask={(data: UpdateOperationUpdateTaskData) => {
+              updateTasks(applyChange(taskGroup, { type: UpdateOperationType.UPDATE_TASK, data }));
+            }}
+            onRemoveTask={(taskName) => {
+              removeTaskModal(taskName, () => {
                 setSelectedTask(null);
-              }
+                updateTasks(
+                  applyChange(taskGroup, {
+                    type: UpdateOperationType.REMOVE_TASK,
+                    data: { taskName },
+                  }),
+                );
+              });
             }}
-          >
-            {() => (
-              <TaskSidebar
-                // Intentional remount when selection changes
-                key={selectedTask.taskIndex}
-                resourceList={values.resources || []}
-                errorMap={status?.tasks || {}}
-                onUpdateTask={(data: UpdateOperationUpdateTaskData) => {
-                  updateTasks(
-                    applyChange(taskGroup, { type: UpdateOperationType.UPDATE_TASK, data }),
-                  );
-                }}
-                onRemoveTask={(taskName) => {
-                  removeTaskModal(taskName, () => {
-                    setSelectedTask(null);
-                    updateTasks(
-                      applyChange(taskGroup, {
-                        type: UpdateOperationType.REMOVE_TASK,
-                        data: { taskName },
-                      }),
-                    );
-                  });
-                }}
-                selectedPipelineTaskIndex={selectedTask.taskIndex}
-                taskResource={selectedTask.resource}
-              />
-            )}
-          </Sidebar>
-        </Form>
-      </StackItem>
-    </Stack>
+            selectedPipelineTaskIndex={selectedTask.taskIndex}
+            taskResource={selectedTask.resource}
+          />
+        )}
+      </Sidebar>
+    </>
   );
 };
 

diff --git a/...d/packages/dev-console/src/components/pipelines/pipeline-builder/PipelineBuilderPage.scss b/...d/packages/dev-console/src/components/pipelines/pipeline-builder/PipelineBuilderPage.scss
@@ -1,4 +1,5 @@
 .odc-pipeline-builder-page {
   height: 100%;
   position: relative;
+  overflow-x: hidden;
 }