From e39b90f70f63a82af9c6413c5eef42c098f57921 Mon Sep 17 00:00:00 2001
From: Joe Reuter <joe@airbyte.io>
Date: Mon, 6 Feb 2023 08:40:45 -0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=AA=9F=F0=9F=90=9B=20Make=20modal=20scrol?=
 =?UTF-8?q?lable=20(#21973)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* make modal scrollable

* remove unnecessary prop

* fix

* fix common case

* add overflow to confirmation module content

---------

Co-authored-by: lmossman <lake@airbyte.io>
---
 .../ConfirmationModal.module.scss             |   1 +
 .../Builder/InputsForm.module.scss            |   2 +-
 .../connectorBuilder/Builder/InputsForm.tsx   | 207 ++++++++-------
 .../src/components/ui/Modal/Modal.module.scss |   6 +-
 .../src/components/ui/Modal/Modal.tsx         |  11 +-
 .../components/CreateConnectorModal.tsx       | 246 +++++++++---------
 .../RequestConnectorModal.module.scss         |   1 -
 7 files changed, 240 insertions(+), 234 deletions(-)

diff --git a/airbyte-webapp/src/components/common/ConfirmationModal/ConfirmationModal.module.scss b/airbyte-webapp/src/components/common/ConfirmationModal/ConfirmationModal.module.scss
index 4f7c81dcc15d..5fba7ee3d42e 100644
--- 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
index 7d08c6af8907..8b22bcc4a617 100644
--- 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
index 071596439254..35060995aa0f 100644
--- 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
index 53972d171515..4c0bee56c610 100644
--- 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
index 989db1916537..8e323b010ce8 100644
--- 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>
   );
 };
diff --git a/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/CreateConnectorModal.tsx b/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/CreateConnectorModal.tsx
index e3219209729d..4378779822c1 100644
--- a/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/CreateConnectorModal.tsx
+++ b/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/CreateConnectorModal.tsx
@@ -57,132 +57,130 @@ const CreateConnectorModal: React.FC<CreateConnectorModalProps> = ({ onClose, on
       }}
     >
       {({ isSubmitting, isValid, dirty }) => (
-        <Modal onClose={onClose} title={<FormattedMessage id="admin.addNewConnector" />}>
-          <Form>
-            <ModalBody>
-              <FlexContainer direction="column" gap="xl">
-                <Text>
-                  <FormattedMessage
-                    id="admin.learnMore"
-                    values={{
-                      lnk: (lnk: React.ReactNode) => (
-                        <a className={styles.docLink} target="_blank" href={links.docsLink} rel="noreferrer">
-                          {lnk}
-                        </a>
-                      ),
-                    }}
-                  />
-                </Text>
-                <FlexContainer direction="column">
-                  <Field name="name">
-                    {({ field, meta }: FieldProps<string>) => (
-                      <LabeledInput
-                        {...field}
-                        type="text"
-                        placeholder={formatMessage({
-                          id: "admin.connectorName.placeholder",
-                        })}
-                        label={
-                          <Label>
-                            <FormattedMessage id="admin.connectorName" />
-                          </Label>
-                        }
-                        error={meta.touched && !!meta.error}
-                        message={
-                          meta.touched && meta.error ? (
-                            <FormattedMessage id={meta.error} />
-                          ) : (
-                            <FormattedMessage id="form.empty.error" />
-                          )
-                        }
-                      />
-                    )}
-                  </Field>
-                  <Field name="dockerRepository">
-                    {({ field, meta }: FieldProps<string>) => (
-                      <LabeledInput
-                        {...field}
-                        type="text"
-                        autoComplete="off"
-                        placeholder={formatMessage({
-                          id: "admin.dockerRepository.placeholder",
-                        })}
-                        label={
-                          <Label>
-                            <FormattedMessage
-                              id={isCloudApp() ? "admin.dockerFullImageName" : "admin.dockerRepository"}
-                            />
-                          </Label>
-                        }
-                        error={meta.touched && !!meta.error}
-                        message={
-                          meta.touched && meta.error ? (
-                            <FormattedMessage id={meta.error} />
-                          ) : (
-                            <FormattedMessage id="form.empty.error" />
-                          )
-                        }
-                      />
-                    )}
-                  </Field>
-                  <Field name="dockerImageTag">
-                    {({ field, meta }: FieldProps<string>) => (
-                      <LabeledInput
-                        {...field}
-                        type="text"
-                        autoComplete="off"
-                        placeholder={formatMessage({
-                          id: "admin.dockerImageTag.placeholder",
-                        })}
-                        label={
-                          <Label>
-                            <FormattedMessage id="admin.dockerImageTag" />
-                          </Label>
-                        }
-                        error={!!meta.error && meta.touched}
-                        message={
-                          meta.touched && meta.error ? (
-                            <FormattedMessage id={meta.error} />
-                          ) : (
-                            <FormattedMessage id="form.empty.error" />
-                          )
-                        }
-                      />
-                    )}
-                  </Field>
-                  <Field name="documentationUrl">
-                    {({ field, meta }: FieldProps<string>) => (
-                      <LabeledInput
-                        {...field}
-                        type="text"
-                        autoComplete="off"
-                        placeholder={formatMessage({
-                          id: "admin.documentationUrl.placeholder",
-                        })}
-                        label={
-                          <Label>
-                            <FormattedMessage id="admin.documentationUrl" />
-                          </Label>
-                        }
-                        error={meta.touched && !!meta.error}
-                        message={meta.error && <FormattedMessage id={meta.error} />}
-                      />
-                    )}
-                  </Field>
+        <Modal onClose={onClose} title={<FormattedMessage id="admin.addNewConnector" />} wrapIn={Form}>
+          <ModalBody>
+            <FlexContainer direction="column" gap="xl">
+              <Text>
+                <FormattedMessage
+                  id="admin.learnMore"
+                  values={{
+                    lnk: (lnk: React.ReactNode) => (
+                      <a className={styles.docLink} target="_blank" href={links.docsLink} rel="noreferrer">
+                        {lnk}
+                      </a>
+                    ),
+                  }}
+                />
+              </Text>
+              <FlexContainer direction="column">
+                <Field name="name">
+                  {({ field, meta }: FieldProps<string>) => (
+                    <LabeledInput
+                      {...field}
+                      type="text"
+                      placeholder={formatMessage({
+                        id: "admin.connectorName.placeholder",
+                      })}
+                      label={
+                        <Label>
+                          <FormattedMessage id="admin.connectorName" />
+                        </Label>
+                      }
+                      error={meta.touched && !!meta.error}
+                      message={
+                        meta.touched && meta.error ? (
+                          <FormattedMessage id={meta.error} />
+                        ) : (
+                          <FormattedMessage id="form.empty.error" />
+                        )
+                      }
+                    />
+                  )}
+                </Field>
+                <Field name="dockerRepository">
+                  {({ field, meta }: FieldProps<string>) => (
+                    <LabeledInput
+                      {...field}
+                      type="text"
+                      autoComplete="off"
+                      placeholder={formatMessage({
+                        id: "admin.dockerRepository.placeholder",
+                      })}
+                      label={
+                        <Label>
+                          <FormattedMessage
+                            id={isCloudApp() ? "admin.dockerFullImageName" : "admin.dockerRepository"}
+                          />
+                        </Label>
+                      }
+                      error={meta.touched && !!meta.error}
+                      message={
+                        meta.touched && meta.error ? (
+                          <FormattedMessage id={meta.error} />
+                        ) : (
+                          <FormattedMessage id="form.empty.error" />
+                        )
+                      }
+                    />
+                  )}
+                </Field>
+                <Field name="dockerImageTag">
+                  {({ field, meta }: FieldProps<string>) => (
+                    <LabeledInput
+                      {...field}
+                      type="text"
+                      autoComplete="off"
+                      placeholder={formatMessage({
+                        id: "admin.dockerImageTag.placeholder",
+                      })}
+                      label={
+                        <Label>
+                          <FormattedMessage id="admin.dockerImageTag" />
+                        </Label>
+                      }
+                      error={!!meta.error && meta.touched}
+                      message={
+                        meta.touched && meta.error ? (
+                          <FormattedMessage id={meta.error} />
+                        ) : (
+                          <FormattedMessage id="form.empty.error" />
+                        )
+                      }
+                    />
+                  )}
+                </Field>
+                <Field name="documentationUrl">
+                  {({ field, meta }: FieldProps<string>) => (
+                    <LabeledInput
+                      {...field}
+                      type="text"
+                      autoComplete="off"
+                      placeholder={formatMessage({
+                        id: "admin.documentationUrl.placeholder",
+                      })}
+                      label={
+                        <Label>
+                          <FormattedMessage id="admin.documentationUrl" />
+                        </Label>
+                      }
+                      error={meta.touched && !!meta.error}
+                      message={meta.error && <FormattedMessage id={meta.error} />}
+                    />
+                  )}
+                </Field>
 
-                  {errorMessage && <div className={styles.errorMessage}>{errorMessage}</div>}
-                </FlexContainer>
+                {errorMessage && <div className={styles.errorMessage}>{errorMessage}</div>}
               </FlexContainer>
-            </ModalBody>
-            <ModalFooter>
-              <Button onClick={onClose} type="button" variant="secondary" disabled={isSubmitting}>
-                <FormattedMessage id="form.cancel" />
-              </Button>
-              <Button type="submit" disabled={isSubmitting || !dirty || !isValid} isLoading={isSubmitting}>
-                <FormattedMessage id="form.add" />
-              </Button>
-            </ModalFooter>
-          </Form>
+            </FlexContainer>
+          </ModalBody>
+          <ModalFooter>
+            <Button onClick={onClose} type="button" variant="secondary" disabled={isSubmitting}>
+              <FormattedMessage id="form.cancel" />
+            </Button>
+            <Button type="submit" disabled={isSubmitting || !dirty || !isValid} isLoading={isSubmitting}>
+              <FormattedMessage id="form.add" />
+            </Button>
+          </ModalFooter>
         </Modal>
       )}
     </Formik>
diff --git a/airbyte-webapp/src/views/Connector/RequestConnectorModal/RequestConnectorModal.module.scss b/airbyte-webapp/src/views/Connector/RequestConnectorModal/RequestConnectorModal.module.scss
index f1a18c3460ef..f92ba4407e92 100644
--- a/airbyte-webapp/src/views/Connector/RequestConnectorModal/RequestConnectorModal.module.scss
+++ b/airbyte-webapp/src/views/Connector/RequestConnectorModal/RequestConnectorModal.module.scss
@@ -1,7 +1,6 @@
 @use "scss/variables";
 
 .modalBody {
-  overflow: unset;
   min-width: 500px;
 }