🪟🐛 Make modal scrollable (#21973)

* make modal scrollable * remove unnecessary prop * fix * fix common case * add overflow to confirmation module content --------- Co-authored-by: lmossman <lake@airbyte.io>
airbytehq · Feb 6, 2023 · e39b90f · e39b90f
1 parent f3c94fb
commit e39b90f
Show file tree

Hide file tree

Showing 7 changed files with 240 additions and 234 deletions.
diff --git a/airbyte-webapp/src/components/common/ConfirmationModal/ConfirmationModal.module.scss b/airbyte-webapp/src/components/common/ConfirmationModal/ConfirmationModal.module.scss
@@ -7,6 +7,7 @@
   font-size: 14px;
   padding: 25px;
   white-space: pre-line;
+  overflow: auto;
 }
 
 .buttonContent {

diff --git a/airbyte-webapp/src/components/connectorBuilder/Builder/InputsForm.module.scss b/airbyte-webapp/src/components/connectorBuilder/Builder/InputsForm.module.scss
@@ -1,7 +1,7 @@
 @use "scss/variables";
 @use "scss/colors";
 
-.inputForm {
+.inputFormBody {
   gap: variables.$spacing-lg;
   display: flex;
   flex-direction: column;

diff --git a/airbyte-webapp/src/components/connectorBuilder/Builder/InputsForm.tsx b/airbyte-webapp/src/components/connectorBuilder/Builder/InputsForm.tsx
@@ -181,118 +181,117 @@ const InputModal = ({
           id={inputInEditing.isNew ? "connectorBuilder.inputModal.newTitle" : "connectorBuilder.inputModal.editTitle"}
         />
       }
+      wrapIn={Form}
       onClose={onClose}
     >
-      <Form>
-        <ModalBody className={styles.inputForm}>
-          <BuilderField
-            path="definition.title"
-            type="string"
-            onChange={(newValue) => {
-              if (!isInferredInputOverride) {
-                setFieldValue("key", sluggify(newValue || ""), true);
-              }
-            }}
-            label={formatMessage({ id: "connectorBuilder.inputModal.inputName" })}
-            tooltip={formatMessage({ id: "connectorBuilder.inputModal.inputNameTooltip" })}
-          />
-          <BuilderField
-            path="key"
-            type="string"
-            readOnly
-            label={formatMessage({ id: "connectorBuilder.inputModal.fieldId" })}
-            tooltip={formatMessage(
-              { id: "connectorBuilder.inputModal.fieldIdTooltip" },
-              {
-                syntaxExample: `{{config['${values.key || "my_input"}']}}`,
-              }
-            )}
-          />
-          <BuilderField
-            path="definition.description"
-            optional
-            type="string"
-            label={formatMessage({ id: "connectorBuilder.inputModal.description" })}
-            tooltip={formatMessage({ id: "connectorBuilder.inputModal.descriptionTooltip" })}
-          />
-          {values.type !== "unknown" && !isInferredInputOverride ? (
-            <>
-              <BuilderField
-                path="type"
-                type="enum"
-                options={["string", "number", "integer", "array", "boolean", "enum"]}
-                onChange={() => {
-                  setFieldValue("definition.default", undefined);
-                }}
-                label={formatMessage({ id: "connectorBuilder.inputModal.type" })}
-                tooltip={formatMessage({ id: "connectorBuilder.inputModal.typeTooltip" })}
-              />
-              {values.type === "enum" && (
-                <BuilderField
-                  path="definition.enum"
-                  type="array"
-                  optional
-                  label={formatMessage({ id: "connectorBuilder.inputModal.enum" })}
-                  tooltip={formatMessage({ id: "connectorBuilder.inputModal.enumTooltip" })}
-                />
-              )}
-              <BuilderField
-                path="definition.airbyte_secret"
-                type="boolean"
-                optional
-                label={formatMessage({ id: "connectorBuilder.inputModal.secret" })}
-                tooltip={formatMessage({ id: "connectorBuilder.inputModal.secretTooltip" })}
-              />
+      <ModalBody className={styles.inputFormBody}>
+        <BuilderField
+          path="definition.title"
+          type="string"
+          onChange={(newValue) => {
+            if (!isInferredInputOverride) {
+              setFieldValue("key", sluggify(newValue || ""), true);
+            }
+          }}
+          label={formatMessage({ id: "connectorBuilder.inputModal.inputName" })}
+          tooltip={formatMessage({ id: "connectorBuilder.inputModal.inputNameTooltip" })}
+        />
+        <BuilderField
+          path="key"
+          type="string"
+          readOnly
+          label={formatMessage({ id: "connectorBuilder.inputModal.fieldId" })}
+          tooltip={formatMessage(
+            { id: "connectorBuilder.inputModal.fieldIdTooltip" },
+            {
+              syntaxExample: `{{config['${values.key || "my_input"}']}}`,
+            }
+          )}
+        />
+        <BuilderField
+          path="definition.description"
+          optional
+          type="string"
+          label={formatMessage({ id: "connectorBuilder.inputModal.description" })}
+          tooltip={formatMessage({ id: "connectorBuilder.inputModal.descriptionTooltip" })}
+        />
+        {values.type !== "unknown" && !isInferredInputOverride ? (
+          <>
+            <BuilderField
+              path="type"
+              type="enum"
+              options={["string", "number", "integer", "array", "boolean", "enum"]}
+              onChange={() => {
+                setFieldValue("definition.default", undefined);
+              }}
+              label={formatMessage({ id: "connectorBuilder.inputModal.type" })}
+              tooltip={formatMessage({ id: "connectorBuilder.inputModal.typeTooltip" })}
+            />
+            {values.type === "enum" && (
               <BuilderField
-                path="required"
-                type="boolean"
+                path="definition.enum"
+                type="array"
                 optional
-                label={formatMessage({ id: "connectorBuilder.inputModal.required" })}
-                tooltip={formatMessage({ id: "connectorBuilder.inputModal.requiredTooltip" })}
+                label={formatMessage({ id: "connectorBuilder.inputModal.enum" })}
+                tooltip={formatMessage({ id: "connectorBuilder.inputModal.enumTooltip" })}
               />
+            )}
+            <BuilderField
+              path="definition.airbyte_secret"
+              type="boolean"
+              optional
+              label={formatMessage({ id: "connectorBuilder.inputModal.secret" })}
+              tooltip={formatMessage({ id: "connectorBuilder.inputModal.secretTooltip" })}
+            />
+            <BuilderField
+              path="required"
+              type="boolean"
+              optional
+              label={formatMessage({ id: "connectorBuilder.inputModal.required" })}
+              tooltip={formatMessage({ id: "connectorBuilder.inputModal.requiredTooltip" })}
+            />
+            <BuilderField
+              path="showDefaultValueField"
+              type="boolean"
+              optional
+              label={formatMessage({ id: "connectorBuilder.inputModal.showDefaultValueField" })}
+              tooltip={formatMessage({ id: "connectorBuilder.inputModal.showDefaultValueFieldTooltip" })}
+            />
+            {values.showDefaultValueField && (
               <BuilderField
-                path="showDefaultValueField"
-                type="boolean"
+                path="definition.default"
+                type={values.type}
+                options={(values.definition.enum || []) as string[]}
                 optional
-                label={formatMessage({ id: "connectorBuilder.inputModal.showDefaultValueField" })}
-                tooltip={formatMessage({ id: "connectorBuilder.inputModal.showDefaultValueFieldTooltip" })}
+                label={formatMessage({ id: "connectorBuilder.inputModal.default" })}
               />
-              {values.showDefaultValueField && (
-                <BuilderField
-                  path="definition.default"
-                  type={values.type}
-                  options={(values.definition.enum || []) as string[]}
-                  optional
-                  label={formatMessage({ id: "connectorBuilder.inputModal.default" })}
-                />
-              )}
-            </>
-          ) : (
-            <Callout className={styles.calloutContainer}>
-              {isInferredInputOverride ? (
-                <FormattedMessage id="connectorBuilder.inputModal.inferredInputMessage" />
-              ) : (
-                <FormattedMessage id="connectorBuilder.inputModal.unsupportedInput" />
-              )}
-            </Callout>
-          )}
-        </ModalBody>
-        <ModalFooter>
-          {!inputInEditing.isNew && !inputInEditing.isInferredInputOverride && (
-            <div className={styles.deleteButtonContainer}>
-              <Button variant="danger" type="button" onClick={onDelete}>
-                <FormattedMessage id="form.delete" />
-              </Button>
-            </div>
-          )}
-          <Button variant="secondary" type="reset" onClick={onClose}>
-            <FormattedMessage id="form.cancel" />
-          </Button>
-          <Button type="submit" disabled={!isValid}>
-            <FormattedMessage id={inputInEditing.isNew ? "form.create" : "form.saveChanges"} />
-          </Button>
-        </ModalFooter>
-      </Form>
+            )}
+          </>
+        ) : (
+          <Callout className={styles.calloutContainer}>
+            {isInferredInputOverride ? (
+              <FormattedMessage id="connectorBuilder.inputModal.inferredInputMessage" />
+            ) : (
+              <FormattedMessage id="connectorBuilder.inputModal.unsupportedInput" />
+            )}
+          </Callout>
+        )}
+      </ModalBody>
+      <ModalFooter>
+        {!inputInEditing.isNew && !inputInEditing.isInferredInputOverride && (
+          <div className={styles.deleteButtonContainer}>
+            <Button variant="danger" type="button" onClick={onDelete}>
+              <FormattedMessage id="form.delete" />
+            </Button>
+          </div>
+        )}
+        <Button variant="secondary" type="reset" onClick={onClose}>
+          <FormattedMessage id="form.cancel" />
+        </Button>
+        <Button type="submit" disabled={!isValid}>
+          <FormattedMessage id={inputInEditing.isNew ? "form.create" : "form.saveChanges"} />
+        </Button>
+      </ModalFooter>
     </Modal>
   );
 };
diff --git a/airbyte-webapp/src/components/ui/Modal/Modal.module.scss b/airbyte-webapp/src/components/ui/Modal/Modal.module.scss
@@ -26,13 +26,15 @@
 }
 
 .modalPanel {
-  margin-left: auto;
-  margin-right: auto;
+  max-height: 100%;
+  display: flex;
 }
 
 .card {
   margin-left: variables.$width-size-menu;
   max-width: calc(100vw - #{variables.$width-size-menu} - #{variables.$spacing-lg} * 2);
+  display: flex;
+  flex-direction: column;
 
   &.sm {
     width: variables.$width-modal-sm;

diff --git a/airbyte-webapp/src/components/ui/Modal/Modal.tsx b/airbyte-webapp/src/components/ui/Modal/Modal.tsx
@@ -12,6 +12,10 @@ export interface ModalProps {
   cardless?: boolean;
   size?: "sm" | "md" | "lg" | "xl";
   testId?: string;
+  /**
+   * If specified, the full content of the modal including header, body and footer is wrapped in this component (only a class name prop might be set on the component)
+   */
+  wrapIn?: React.FC<React.PropsWithChildren<{ className?: string }>>;
 }
 
 const cardStyleBySize = {
@@ -28,6 +32,7 @@ export const Modal: React.FC<React.PropsWithChildren<ModalProps>> = ({
   onClose,
   cardless,
   testId,
+  wrapIn,
 }) => {
   const [isOpen, setIsOpen] = useState(true);
 
@@ -36,10 +41,12 @@ export const Modal: React.FC<React.PropsWithChildren<ModalProps>> = ({
     onClose?.();
   };
 
+  const Wrapper = wrapIn || "div";
+
   return (
     <Dialog open={isOpen} onClose={onModalClose} data-testid={testId} className={styles.modalPageContainer}>
       <Overlay />
-      <div className={styles.modalContainer}>
+      <Wrapper className={styles.modalContainer}>
         <Dialog.Panel className={styles.modalPanel}>
           {cardless ? (
             children
@@ -49,7 +56,7 @@ export const Modal: React.FC<React.PropsWithChildren<ModalProps>> = ({
             </Card>
           )}
         </Dialog.Panel>
-      </div>
+      </Wrapper>
     </Dialog>
   );
 };