Skip to content

Commit

Permalink
馃獰 馃帀 new streams table edit modal namespace and stream (#19713)
Browse files Browse the repository at this point in the history 
* Update new streams table to edit namespace and stream name options with modals

- Added modal components `Namespace` and `Stream name`
- Fixed bug with Tooltip (block-level element inside inline element)
  • Loading branch information
Mark Berger committed Dec 7, 2022
1 parent f57fcdf commit 8a94f27
Show file tree
Hide file tree
Showing 17 changed files with 860 additions and 127 deletions.
60 changes: 30 additions & 30 deletions ...e-webapp/src/components/CreateConnection/__snapshots__/CreateConnectionForm.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -441,13 +441,13 @@ exports[`CreateConnectionForm should render 1`] = `
class="<removed-for-snapshot-test>"
>
Source
<div
<span
class="<removed-for-snapshot-test>"
>
<div
<span
class="<removed-for-snapshot-test>"
>
<div
<span
class="<removed-for-snapshot-test>"
>
<svg
Expand All @@ -461,9 +461,9 @@ exports[`CreateConnectionForm should render 1`] = `
fill="currentColor"
/>
</svg>
</div>
</div>
</div>
</span>
</span>
</span>
</div>
<div
class="<removed-for-snapshot-test>"
Expand All @@ -472,13 +472,13 @@ exports[`CreateConnectionForm should render 1`] = `
class="<removed-for-snapshot-test>"
>
Sync mode
<div
<span
class="<removed-for-snapshot-test>"
>
<div
<span
class="<removed-for-snapshot-test>"
>
<div
<span
class="<removed-for-snapshot-test>"
>
<svg
Expand All @@ -492,21 +492,21 @@ exports[`CreateConnectionForm should render 1`] = `
fill="currentColor"
/>
</svg>
</div>
</div>
</div>
</span>
</span>
</span>
</div>
<div
class="<removed-for-snapshot-test>"
>
Cursor field
<div
<span
class="<removed-for-snapshot-test>"
>
<div
<span
class="<removed-for-snapshot-test>"
>
<div
<span
class="<removed-for-snapshot-test>"
>
<svg
Expand All @@ -520,21 +520,21 @@ exports[`CreateConnectionForm should render 1`] = `
fill="currentColor"
/>
</svg>
</div>
</div>
</div>
</span>
</span>
</span>
</div>
<div
class="<removed-for-snapshot-test>"
>
Primary key
<div
<span
class="<removed-for-snapshot-test>"
>
<div
<span
class="<removed-for-snapshot-test>"
>
<div
<span
class="<removed-for-snapshot-test>"
>
<svg
Expand All @@ -548,21 +548,21 @@ exports[`CreateConnectionForm should render 1`] = `
fill="currentColor"
/>
</svg>
</div>
</div>
</div>
</span>
</span>
</span>
</div>
<div
class="<removed-for-snapshot-test>"
>
Destination
<div
<span
class="<removed-for-snapshot-test>"
>
<div
<span
class="<removed-for-snapshot-test>"
>
<div
<span
class="<removed-for-snapshot-test>"
>
<svg
Expand All @@ -576,9 +576,9 @@ exports[`CreateConnectionForm should render 1`] = `
fill="currentColor"
/>
</svg>
</div>
</div>
</div>
</span>
</span>
</span>
</div>
<div
class="<removed-for-snapshot-test>"
Expand Down
76 changes: 76 additions & 0 deletions airbyte-webapp/src/components/connection/CatalogTree/next/CatalogTreeTableHeader.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,31 @@
import { faGear } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { useFormikContext } from "formik";
import React from "react";
import { FormattedMessage } from "react-intl";

import { Cell, Header } from "components/SimpleTableComponents";
import { Button } from "components/ui/Button";
import { CheckBox } from "components/ui/CheckBox";
import { Text } from "components/ui/Text";
import { InfoTooltip, TooltipLearnMoreLink } from "components/ui/Tooltip";

import { NamespaceDefinitionType } from "core/request/AirbyteClient";
import { useBulkEditService } from "hooks/services/BulkEdit/BulkEditService";
import { useConnectionFormService } from "hooks/services/ConnectionForm/ConnectionFormService";
import { useModalService } from "hooks/services/Modal";
import { links } from "utils/links";
import { FormikConnectionFormValues } from "views/Connection/ConnectionForm/formConfig";

import {
DestinationNamespaceFormValueType,
DestinationNamespaceModal,
} from "../../DestinationNamespaceModal/DestinationNamespaceModal";
import {
DestinationStreamNamesFormValueType,
DestinationStreamNamesModal,
StreamNameDefinitionValueType,
} from "../../DestinationStreamNamesModal/DestinationStreamNamesModal";
import styles from "./CatalogTreeTableHeader.module.scss";

const TextCell: React.FC<React.PropsWithChildren<{ flex?: number }>> = ({ flex, children }) => {
Expand All @@ -24,7 +40,24 @@ const TextCell: React.FC<React.PropsWithChildren<{ flex?: number }>> = ({ flex,

export const CatalogTreeTableHeader: React.FC = () => {
const { mode } = useConnectionFormService();
const { openModal, closeModal } = useModalService();
const { onCheckAll, selectedBatchNodeIds, allChecked } = useBulkEditService();
const formikProps = useFormikContext<FormikConnectionFormValues>();

const destinationNamespaceChange = (value: DestinationNamespaceFormValueType) => {
formikProps.setFieldValue("namespaceDefinition", value.namespaceDefinition);

if (value.namespaceDefinition === NamespaceDefinitionType.customformat) {
formikProps.setFieldValue("namespaceFormat", value.namespaceFormat);
}
};

const destinationStreamNamesChange = (value: DestinationStreamNamesFormValueType) => {
formikProps.setFieldValue(
"prefix",
value.streamNameDefinition === StreamNameDefinitionValueType.Prefix ? value.prefix : ""
);
};

return (
<Header className={styles.headerContainer}>
Expand Down Expand Up @@ -68,9 +101,52 @@ export const CatalogTreeTableHeader: React.FC = () => {
<div className={styles.arrowPlaceholder} />
<TextCell flex={1}>
<FormattedMessage id="form.namespace" />
<Button
type="button"
variant="clear"
onClick={() =>
openModal({
size: "lg",
title: <FormattedMessage id="connectionForm.modal.destinationNamespace.title" />,
content: () => (
<DestinationNamespaceModal
initialValues={{
namespaceDefinition: formikProps.values.namespaceDefinition,
namespaceFormat: formikProps.values.namespaceFormat,
}}
onCloseModal={closeModal}
onSubmit={destinationNamespaceChange}
/>
),
})
}
>
<FontAwesomeIcon icon={faGear} />
</Button>
</TextCell>
<TextCell flex={1}>
<FormattedMessage id="form.streamName" />
<Button
type="button"
variant="clear"
onClick={() =>
openModal({
size: "sm",
title: <FormattedMessage id="connectionForm.modal.destinationStreamNames.title" />,
content: () => (
<DestinationStreamNamesModal
initialValues={{
prefix: formikProps.values.prefix,
}}
onCloseModal={closeModal}
onSubmit={destinationStreamNamesChange}
/>
),
})
}
>
<FontAwesomeIcon icon={faGear} />
</Button>
</TextCell>
</Header>
);
Expand Down
12 changes: 6 additions & 6 deletions ...bapp/src/components/connection/CatalogTree/next/__snapshots__/BulkEditPanel.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ exports[`<BulkEditPanel /> should render 1`] = `
class="<removed-for-snapshot-test>"
/>
<div>
<div
<span
class="<removed-for-snapshot-test>"
>
<button
Expand All @@ -97,7 +97,7 @@ exports[`<BulkEditPanel /> should render 1`] = `
/>
</svg>
</button>
</div>
</span>
</div>
</div>
</div>
Expand Down Expand Up @@ -128,7 +128,7 @@ exports[`<BulkEditPanel /> should render 1`] = `
class="<removed-for-snapshot-test>"
/>
<div>
<div
<span
class="<removed-for-snapshot-test>"
>
<button
Expand All @@ -155,7 +155,7 @@ exports[`<BulkEditPanel /> should render 1`] = `
/>
</svg>
</button>
</div>
</span>
</div>
</div>
</div>
Expand Down Expand Up @@ -186,7 +186,7 @@ exports[`<BulkEditPanel /> should render 1`] = `
class="<removed-for-snapshot-test>"
/>
<div>
<div
<span
class="<removed-for-snapshot-test>"
>
<button
Expand All @@ -213,7 +213,7 @@ exports[`<BulkEditPanel /> should render 1`] = `
/>
</svg>
</button>
</div>
</span>
</div>
</div>
</div>
Expand Down
44 changes: 44 additions & 0 deletions ...src/components/connection/DestinationNamespaceModal/DestinationNamespaceModal.module.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
@use "scss/colors";
@use "scss/variables";

.content {
display: flex;
height: 340px;
}

.actions, .description {
display: flex;
flex-direction: column;
padding: variables.$spacing-xl;
}

.actions {
flex: 0 0 300px;

.radioButton + .radioButton {
margin-top: variables.$spacing-xl;
}

.input {
position: relative;
margin: variables.$spacing-xl 0 0 variables.$spacing-xl;

.errorMessage {
position: absolute;
bottom: -16px;
left: 0;
color: colors.$red-600;
}
}
}

.description {
overflow: auto;
flex: 1 0 0;
background-color: colors.$grey-50;

.generalInfo {
color: colors.$grey;
margin: variables.$spacing-lg 0;
}
}
Loading

0 comments on commit 8a94f27

Please sign in to comment.