<Callout /> component (#21273)

* genericize alert component * add className prop to alert * rename infobox "callout", swap in place for scss module * fix imports * use callout in place of alert * add blue variant, remove icon prop * remove font-size (this is already the default) * remove single use prop, use a classname instead * use semantic names, remove empty line * cleanup from rebase
airbytehq · Jan 13, 2023 · fbb317d · fbb317d
1 parent fd9fe9a
commit fbb317d
Show file tree

Hide file tree

Showing 17 changed files with 117 additions and 91 deletions.
diff --git a/airbyte-webapp/src/components/connectorBuilder/Builder/InputsForm.module.scss b/airbyte-webapp/src/components/connectorBuilder/Builder/InputsForm.module.scss
@@ -10,3 +10,7 @@
 .deleteButtonContainer {
   flex-grow: 1;
 }
+
+.calloutContainer {
+  padding: variables.$spacing-md variables.$spacing-lg;
+}
diff --git a/airbyte-webapp/src/components/connectorBuilder/Builder/InputsForm.tsx b/airbyte-webapp/src/components/connectorBuilder/Builder/InputsForm.tsx
@@ -6,7 +6,7 @@ import { useEffectOnce } from "react-use";
 import * as yup from "yup";
 
 import { Button } from "components/ui/Button";
-import { InfoBox } from "components/ui/InfoBox";
+import { Callout } from "components/ui/Callout";
 import { Modal, ModalBody, ModalFooter } from "components/ui/Modal";
 
 import { FormikPatch } from "core/form/FormikPatch";
@@ -251,13 +251,13 @@ const InputModal = ({
               />
             </>
           ) : (
-            <InfoBox>
+            <Callout className={styles.calloutContainer}>
               {isInferredInputOverride ? (
                 <FormattedMessage id="connectorBuilder.inputModal.inferredInputMessage" />
               ) : (
                 <FormattedMessage id="connectorBuilder.inputModal.unsupportedInput" />
               )}
-            </InfoBox>
+            </Callout>
           )}
         </ModalBody>
         <ModalFooter>

diff --git a/airbyte-webapp/src/components/connectorBuilder/StreamTestingPanel/ConfigMenu.tsx b/airbyte-webapp/src/components/connectorBuilder/StreamTestingPanel/ConfigMenu.tsx
@@ -5,7 +5,7 @@ import { FormattedMessage, useIntl } from "react-intl";
 import { useLocalStorage } from "react-use";
 
 import { Button } from "components/ui/Button";
-import { InfoBox } from "components/ui/InfoBox";
+import { Callout } from "components/ui/Callout";
 import { Modal, ModalBody } from "components/ui/Modal";
 import { NumberBadge } from "components/ui/NumberBadge";
 import { Tooltip } from "components/ui/Tooltip";
@@ -94,7 +94,7 @@ export const ConfigMenu: React.FC<ConfigMenuProps> = ({ className, testInputJson
             <ConfigMenuErrorBoundaryComponent currentView={editorView} closeAndSwitchToYaml={switchToYaml}>
               <>
                 {showInputsWarning && (
-                  <InfoBox className={styles.warningBox}>
+                  <Callout className={styles.warningBox}>
                     <div className={styles.warningBoxContainer}>
                       <div>
                         <FormattedMessage id="connectorBuilder.inputsFormWarning" />
@@ -107,7 +107,7 @@ export const ConfigMenu: React.FC<ConfigMenuProps> = ({ className, testInputJson
                         icon={<FontAwesomeIcon icon={faClose} />}
                       />
                     </div>
-                  </InfoBox>
+                  </Callout>
                 )}
                 <ConnectorForm
                   formType="source"

diff --git a/...yte-webapp/src/components/connectorBuilder/StreamTestingPanel/ConfigMenuErrorBoundary.tsx b/...yte-webapp/src/components/connectorBuilder/StreamTestingPanel/ConfigMenuErrorBoundary.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { FormattedMessage } from "react-intl";
 
 import { Button } from "components/ui/Button";
-import { InfoBox } from "components/ui/InfoBox";
+import { Callout } from "components/ui/Callout";
 
 import { FormBuildError, isFormBuildError } from "core/form/FormBuildError";
 import { EditorView } from "services/connectorBuilder/ConnectorBuilderStateService";
@@ -40,7 +40,7 @@ export class ConfigMenuErrorBoundaryComponent extends React.Component<
     }
     return (
       <div className={styles.errorContent}>
-        <InfoBox>
+        <Callout>
           <FormattedMessage
             id="connectorBuilder.inputsError"
             values={{ error: typeof error === "string" ? error : <FormattedMessage id={error.message} /> }}
@@ -52,7 +52,7 @@ export class ConfigMenuErrorBoundaryComponent extends React.Component<
           >
             <FormattedMessage id="connectorBuilder.inputsErrorDocumentation" />
           </a>
-        </InfoBox>
+        </Callout>
         <Button onClick={closeAndSwitchToYaml}>
           {currentView === "ui" ? (
             <FormattedMessage id="connectorBuilder.goToYaml" />

diff --git a/airbyte-webapp/src/components/connectorBuilder/StreamTestingPanel/SchemaDiffView.tsx b/airbyte-webapp/src/components/connectorBuilder/StreamTestingPanel/SchemaDiffView.tsx
@@ -1,4 +1,5 @@
 import { faWarning } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import classNames from "classnames";
 import { diffJson, Change } from "diff";
 import { useField } from "formik";
@@ -8,8 +9,8 @@ import { FormattedMessage } from "react-intl";
 import { useDebounce } from "react-use";
 
 import { Button } from "components/ui/Button";
+import { Callout } from "components/ui/Callout";
 import { FlexContainer, FlexItem } from "components/ui/Flex";
-import { InfoBox } from "components/ui/InfoBox";
 import { Tooltip } from "components/ui/Tooltip";
 
 import { StreamReadInferredSchema } from "core/request/ConnectorBuilderClient";
@@ -83,7 +84,8 @@ export const SchemaDiffView: React.FC<SchemaDiffViewProps> = ({ inferredSchema }
   return (
     <FlexContainer direction="column">
       {editorView === "ui" && field.value && field.value !== formattedSchema && (
-        <InfoBox icon={faWarning} className={styles.infoBox}>
+        <Callout className={styles.infoBox}>
+          <FontAwesomeIcon icon={faWarning} size="lg" />
           <FlexItem grow>
             <FlexContainer direction="column">
               <FormattedMessage id="connectorBuilder.differentSchemaDescription" />
@@ -128,7 +130,7 @@ export const SchemaDiffView: React.FC<SchemaDiffViewProps> = ({ inferredSchema }
               </FlexContainer>
             </FlexContainer>
           </FlexItem>
-        </InfoBox>
+        </Callout>
       )}
       {editorView === "ui" && !field.value && (
         <Button

diff --git a/airbyte-webapp/src/components/ui/Callout/Callout.module.scss b/airbyte-webapp/src/components/ui/Callout/Callout.module.scss
@@ -0,0 +1,22 @@
+@use "scss/colors";
+@use "scss/variables";
+
+.container {
+  border-radius: variables.$border-radius-md;
+  padding: variables.$spacing-lg variables.$spacing-xl;
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.default {
+  background-color: colors.$yellow-100;
+}
+
+.error {
+  background-color: colors.$red-50;
+}
+
+.info {
+  background-color: colors.$blue-50;
+}
diff --git a/airbyte-webapp/src/components/ui/Callout/Callout.tsx b/airbyte-webapp/src/components/ui/Callout/Callout.tsx
@@ -0,0 +1,22 @@
+import classNames from "classnames";
+
+import styles from "./Callout.module.scss";
+
+interface CalloutProps {
+  className?: string;
+  variant?: "default" | "error" | "info";
+}
+
+export const Callout: React.FC<React.PropsWithChildren<CalloutProps>> = ({
+  children,
+  className,
+  variant = "default",
+}) => {
+  const containerStyles = classNames(styles.container, className, {
+    [styles.default]: variant === "default",
+    [styles.error]: variant === "error",
+    [styles.info]: variant === "info",
+  });
+
+  return <div className={containerStyles}>{children}</div>;
+};
diff --git a/airbyte-webapp/src/components/ui/Callout/index.stories.tsx b/airbyte-webapp/src/components/ui/Callout/index.stories.tsx
@@ -0,0 +1,25 @@
+import { faEnvelope } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import { Text } from "../Text";
+import { Callout } from "./Callout";
+
+export default {
+  title: "UI/Callout",
+  component: Callout,
+  argTypes: {
+    children: { type: "string", required: true },
+  },
+} as ComponentMeta<typeof Callout>;
+
+const Template: ComponentStory<typeof Callout> = (args) => <Callout {...args} />;
+export const Primary = Template.bind({});
+Primary.args = {
+  children: (
+    <>
+      <FontAwesomeIcon icon={faEnvelope} size="lg" />
+      <Text>"Here is some info."</Text>
+    </>
+  ),
+};
diff --git a/airbyte-webapp/src/components/ui/Callout/index.ts b/airbyte-webapp/src/components/ui/Callout/index.ts
@@ -0,0 +1 @@
+export { Callout } from "./Callout";
diff --git a/airbyte-webapp/src/components/ui/InfoBox/InfoBox.tsx b/airbyte-webapp/src/components/ui/InfoBox/InfoBox.tsx
diff --git a/airbyte-webapp/src/components/ui/InfoBox/index.stories.tsx b/airbyte-webapp/src/components/ui/InfoBox/index.stories.tsx
diff --git a/airbyte-webapp/src/components/ui/InfoBox/index.ts b/airbyte-webapp/src/components/ui/InfoBox/index.ts
diff --git a/...-webapp/src/packages/cloud/views/credits/CreditsPage/components/EmailVerificationHint.tsx b/...-webapp/src/packages/cloud/views/credits/CreditsPage/components/EmailVerificationHint.tsx
@@ -1,10 +1,11 @@
 import { faEnvelope } from "@fortawesome/free-regular-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { AuthErrorCodes } from "firebase/auth";
 import { useState } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 import styled from "styled-components";
 
-import { InfoBox } from "components/ui/InfoBox";
+import { Callout } from "components/ui/Callout";
 import { ToastType } from "components/ui/Toast";
 
 import { useNotificationService } from "hooks/services/Notification";
@@ -76,7 +77,8 @@ export const EmailVerificationHint: React.FC<Props> = ({ className }) => {
   };
 
   return (
-    <InfoBox icon={faEnvelope} className={className}>
+    <Callout className={className}>
+      <FontAwesomeIcon icon={faEnvelope} size="lg" />
       <FormattedMessage id="credits.emailVerificationRequired" />{" "}
       {isEmailResend ? (
         <FormattedMessage id="credits.emailVerification.resendConfirmation" />
@@ -85,6 +87,6 @@ export const EmailVerificationHint: React.FC<Props> = ({ className }) => {
           <FormattedMessage id="credits.emailVerification.resend" />
         </ResendEmailLink>
       )}
-    </InfoBox>
+    </Callout>
   );
 };
diff --git a/.../cloud/views/credits/CreditsPage/components/LowCreditBalanceHint/LowCreditBalanceHint.tsx b/.../cloud/views/credits/CreditsPage/components/LowCreditBalanceHint/LowCreditBalanceHint.tsx
@@ -1,7 +1,8 @@
 import { faCreditCard, faWarning } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { FormattedMessage } from "react-intl";
 
-import { InfoBox } from "components/ui/InfoBox";
+import { Callout } from "components/ui/Callout";
 
 import { CreditStatus } from "packages/cloud/lib/domain/cloudWorkspaces/types";
 import { useGetCloudWorkspace } from "packages/cloud/services/workspaces/CloudWorkspacesService";
@@ -24,16 +25,17 @@ export const LowCreditBalanceHint: React.FC<React.PropsWithChildren<unknown>> =
   const status = cloudWorkspace.remainingCredits <= 0 ? "zeroBalance" : "lowBalance";
   const variant = status === "zeroBalance" ? "error" : "default";
 
-  const ICONS = {
+  const Icons = {
     lowBalance: faCreditCard,
     zeroBalance: faWarning,
   };
   return (
-    <InfoBox className={styles.container} icon={ICONS[status]} variant={variant}>
+    <Callout className={styles.container} variant={variant}>
+      <FontAwesomeIcon icon={Icons[status]} size="lg" />
       <div className={styles.wrapper}>
         <FormattedMessage id={`credits.${status}`} />
         {children}
       </div>
-    </InfoBox>
+    </Callout>
   );
 };
diff --git a/airbyte-webapp/src/pages/connections/ConnectionPage/ConnectionPageTitle.tsx b/airbyte-webapp/src/pages/connections/ConnectionPage/ConnectionPageTitle.tsx
@@ -1,11 +1,12 @@
 import { faTrash } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import React, { useCallback, useMemo } from "react";
 import { FormattedMessage } from "react-intl";
 import { useNavigate, useParams } from "react-router-dom";
 
 import { ConnectionInfoCard } from "components/connection/ConnectionInfoCard";
 import { ConnectionName } from "components/connection/ConnectionName";
-import { InfoBox } from "components/ui/InfoBox";
+import { Callout } from "components/ui/Callout";
 import { StepsMenu } from "components/ui/StepsMenu";
 import { Text } from "components/ui/Text";
 
@@ -61,9 +62,10 @@ export const ConnectionPageTitle: React.FC = () => {
   return (
     <div className={styles.container}>
       {connection.status === ConnectionStatus.deprecated && (
-        <InfoBox className={styles.connectionDeleted} icon={faTrash}>
+        <Callout className={styles.connectionDeleted}>
+          <FontAwesomeIcon icon={faTrash} size="lg" />
           <FormattedMessage id="connection.connectionDeletedView" />
-        </InfoBox>
+        </Callout>
       )}
       <Text as="div" centered bold className={styles.connectionTitle}>
         <FormattedMessage id="connection.title" />

diff --git a/airbyte-webapp/src/views/Connector/ConnectorForm/components/WarningMessage.module.scss b/airbyte-webapp/src/views/Connector/ConnectorForm/components/WarningMessage.module.scss
@@ -1,19 +1,15 @@
-@use "../../../../scss/colors";
-@use "../../../../scss/variables" as vars;
+@use "scss/colors";
+@use "scss/variables";
 
-.container {
-  padding: vars.$spacing-md vars.$spacing-lg;
-  background: colors.$yellow-100;
-  border-radius: vars.$border-radius-lg;
-  white-space: break-spaces;
-  margin-top: vars.$spacing-lg;
-}
+.calloutContainer {
+  margin-top: variables.$spacing-lg;
 
-.link {
-  color: colors.$dark-blue;
+  .link {
+    color: colors.$dark-blue;
 
-  &:hover,
-  &:focus {
-    color: colors.$blue-400;
+    &:hover,
+    &:focus {
+      color: colors.$blue-400;
+    }
   }
 }
diff --git a/airbyte-webapp/src/views/Connector/ConnectorForm/components/WarningMessage.tsx b/airbyte-webapp/src/views/Connector/ConnectorForm/components/WarningMessage.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import { FormattedMessage } from "react-intl";
 
+import { Callout } from "components/ui/Callout";
 import { Text } from "components/ui/Text";
 
 import { ReleaseStage } from "core/request/AirbyteClient";
@@ -14,7 +15,7 @@ interface WarningMessageProps {
 
 export const WarningMessage: React.FC<WarningMessageProps> = ({ stage }) => {
   return (
-    <div className={styles.container}>
+    <Callout className={styles.calloutContainer}>
       <Text size="sm">
         <FormattedMessage id={`connector.releaseStage.${stage}.description`} />{" "}
         <FormattedMessage
@@ -28,6 +29,6 @@ export const WarningMessage: React.FC<WarningMessageProps> = ({ stage }) => {
           }}
         />
       </Text>
-    </div>
+    </Callout>
   );
 };