Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

DBZ-8388: Add Transform Edit and Delete #26

Merged
merged 2 commits into from
Nov 12, 2024
Merged

DBZ-8388: Add Transform Edit and Delete #26

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
858b927
DBZ-8388: Add Transfrom Edit
indraraj Nov 11, 2024
3ddacea
DBZ-8388: Add Transform Edit and Delete functionality
indraraj Nov 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 6 additions & 3 deletions src/appLayout/AppHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import {
ToolbarContent,
ToolbarGroup,
ToolbarItem,
Avatar,
// Avatar,
NotificationBadge,
NotificationBadgeVariant,
PageToggleButton,
Expand All @@ -19,7 +19,7 @@ import { BarsIcon } from "@patternfly/react-icons";
import React from "react";
import dbz_logo_black from "../assets/color_black_debezium.svg";
import dbz_svg from "../assets/debezium_logo.png";
import imgAvatar from "@patternfly/react-core/src/components/assets/avatarImg.svg";
// import imgAvatar from "@patternfly/react-core/src/components/assets/avatarImg.svg";
import { useNavigate } from "react-router-dom";
import { useData } from "./AppContext";
import { NotificationProps } from "./AppNotificationContext";
Expand Down Expand Up @@ -95,11 +95,14 @@ const AppHeader: React.FC<AppHeaderProps> = ({
></NotificationBadge>
</ToolbarItem>
</ToolbarGroup>

{/*
// TODO: Add user avatar when multi tenancy is implemented
<ToolbarItem variant="separator" />

<ToolbarItem>
<Avatar src={imgAvatar} alt="user avatar" />
</ToolbarItem>
</ToolbarItem> */}
</ToolbarContent>
</Toolbar>
</MastheadContent>
Expand Down
8 changes: 1 addition & 7 deletions src/pages/Destination/CreateDestination.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,6 @@ import _ from "lodash";
import { createPost, Destination } from "../../apis/apis";
import { API_URL } from "../../utils/constants";
import { convertMapToObject } from "../../utils/helpers";
import { useData } from "../../appLayout/AppContext";
import { useNotification } from "../../appLayout/AppNotificationContext";
import PageHeader from "@components/PageHeader";
import SourceSinkForm from "@components/SourceSinkForm";
Expand Down Expand Up @@ -50,8 +49,6 @@ const CreateDestination: React.FunctionComponent<CreateDestinationProps> = ({
navigate(url);
};

const { navigationCollapsed } = useData();

const { addNotification } = useNotification();

const [editorSelected, setEditorSelected] = React.useState("form-editor");
Expand Down Expand Up @@ -192,10 +189,7 @@ const CreateDestination: React.FunctionComponent<CreateDestinationProps> = ({
isCenterAligned
isFilled
className={
(modelLoaded && editorSelected === "form-editor") ||
(!modelLoaded &&
navigationCollapsed &&
editorSelected === "form-editor")
editorSelected === "form-editor"
? "custom-page-section create_destination-page_section"
: "create_destination-page_section"
}
Expand Down
2 changes: 1 addition & 1 deletion src/pages/Destination/EditDestination.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -273,7 +273,7 @@ const EditDestination: React.FunctionComponent = () => {
}
}}
>
Save change
Save changes
</Button>
<Button
variant="link"
Expand Down
16 changes: 6 additions & 10 deletions src/pages/Pipeline/ConfigurePipeline.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,9 +44,8 @@ import {
Source,
} from "../../apis/apis";
import { API_URL } from "../../utils/constants";
import { useData } from "../../appLayout/AppContext";
import PageHeader from "@components/PageHeader";
import { useAtom } from 'jotai';
import { useAtom } from "jotai";
import { selectedTransformAtom } from "./PipelineDesigner";

const ConfigurePipeline: React.FunctionComponent = () => {
Expand All @@ -58,7 +57,7 @@ const ConfigurePipeline: React.FunctionComponent = () => {

const [selectedTransform] = useAtom(selectedTransformAtom);

console.log("selectedTransform", selectedTransform)
console.log("selectedTransform", selectedTransform);

const navigateTo = (url: string) => {
navigate(url);
Expand All @@ -68,10 +67,6 @@ const ConfigurePipeline: React.FunctionComponent = () => {
navigate(-1);
};



const { navigationCollapsed } = useData();

const [editorSelected, setEditorSelected] = useState("form-editor");

const [isLoading, setIsLoading] = useState(false);
Expand Down Expand Up @@ -226,11 +221,12 @@ const ConfigurePipeline: React.FunctionComponent = () => {
{({ setValue, getValue, setError, values, errors }) => (
<>
<PageSection
isWidthLimited={editorSelected === "form-editor"}
isWidthLimited={true}
isCenterAligned
isFilled
// To do: Add custom class to the pf-v6-c-page__main-body for center alignment in collapsed navigation
className={navigationCollapsed ? "pipeline-page-section" : ""}
className={
editorSelected === "form-editor" ? "pipeline-page-section" : ""
}
>
{editorSelected === "form-editor" ? (
<Card className="pipeline-card-body">
Expand Down
39 changes: 17 additions & 22 deletions src/pages/Source/CreateSource.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,6 @@ import { API_URL } from "../../utils/constants";
import { convertMapToObject } from "../../utils/helpers";
import sourceCatalog from "../../__mocks__/data/SourceCatalog.json";
import _ from "lodash";
import { useData } from "../../appLayout/AppContext";
import { useNotification } from "../../appLayout/AppNotificationContext";
import SourceSinkForm from "@components/SourceSinkForm";
import PageHeader from "@components/PageHeader";
Expand All @@ -34,7 +33,7 @@ interface CreateSourceProps {
onSelection?: (selection: Source) => void;
}

const CreateSource: React.FunctionComponent<CreateSourceProps> = ({
const CreateSource: React.FunctionComponent<CreateSourceProps> = ({
modelLoaded,
selectedId,
selectSource,
Expand All @@ -44,16 +43,12 @@ const CreateSource: React.FunctionComponent<CreateSourceProps> = ({

const sourceIdParam = useParams<{ sourceId: string }>();
const sourceIdModel = selectedId;
const sourceId = modelLoaded
? sourceIdModel
: sourceIdParam.sourceId;
const sourceId = modelLoaded ? sourceIdModel : sourceIdParam.sourceId;

const navigateTo = (url: string) => {
navigate(url);
};

const { navigationCollapsed } = useData();

const { addNotification } = useNotification();

const [editorSelected, setEditorSelected] = React.useState("form-editor");
Expand Down Expand Up @@ -146,17 +141,18 @@ const CreateSource: React.FunctionComponent<CreateSourceProps> = ({

return (
<>
{ !modelLoaded && <PageHeader
{!modelLoaded && (
<PageHeader
title="Create source"
description="To configure and create a connector fill out the below form or use the
smart editor to setup a new source connector. If you already have a
configuration file, you can setup a new source connector by uploading
it in the smart editor."
/>}
/>
)}
<PageSection className="create_source-toolbar">

<Toolbar id="create-editor-toggle">
<ToolbarContent >
<ToolbarContent>
<ToolbarItem>
<ToggleGroup aria-label="Toggle between form editor and smart editor">
<ToggleGroupItem
Expand Down Expand Up @@ -193,10 +189,7 @@ const CreateSource: React.FunctionComponent<CreateSourceProps> = ({
isCenterAligned
isFilled
className={
(modelLoaded && editorSelected === "form-editor") ||
(!modelLoaded &&
navigationCollapsed &&
editorSelected === "form-editor")
editorSelected === "form-editor"
? "custom-page-section create_source-page_section"
: "create_source-page_section"
}
Expand Down Expand Up @@ -246,18 +239,20 @@ const CreateSource: React.FunctionComponent<CreateSourceProps> = ({
Create source
</Button>
{modelLoaded ? (
<Button variant="link" onClick={() => selectSource && selectSource("")}>
<Button
variant="link"
onClick={() => selectSource && selectSource("")}
>
Back
</Button>
) : (
<Button
variant="link"
onClick={() => navigateTo("/source/catalog")}
>
Back to catalog
</Button>
variant="link"
onClick={() => navigateTo("/source/catalog")}
>
Back to catalog
</Button>
)}

</ActionGroup>
</PageSection>
</>
Expand Down
5 changes: 2 additions & 3 deletions src/pages/Source/EditSource.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -254,10 +254,9 @@ const EditSource: React.FunctionComponent = () => {
)}
</PageSection>
<PageSection className="pf-m-sticky-bottom" isFilled={false}>
<ActionGroup>
<ActionGroup className="create_destination-footer">
<Button
variant="primary"
// onClick={handleCreateSource}
isLoading={isLoading}
isDisabled={isLoading}
type={ButtonType.submit}
Expand All @@ -271,7 +270,7 @@ const EditSource: React.FunctionComponent = () => {
}
}}
>
Save change
Save changes
</Button>
<Button variant="link" onClick={() => navigateTo("/source")}>
Cancel
Expand Down
55 changes: 33 additions & 22 deletions src/pages/Transforms/CreateTransforms.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@ import { useNavigate } from "react-router-dom";
import { createPost, TransformData } from "src/apis";
import { API_URL } from "@utils/constants";
import { useNotification } from "@appContext/AppNotificationContext";
import { find } from "lodash";

export interface ICreateTransformsProps {
modelLoaded?: boolean;
Expand Down Expand Up @@ -126,7 +127,6 @@ const CreateTransforms: React.FunctionComponent<ICreateTransformsProps> = ({
setIsOpen(true);
}
}

setSelectOptions(newSelectOptions);
}, [filterValue, isOpen]);

Expand Down Expand Up @@ -192,23 +192,19 @@ const CreateTransforms: React.FunctionComponent<ICreateTransformsProps> = ({

const handleMenuArrowKeys = (key: string) => {
let indexToFocus = 0;

if (!isOpen) {
setIsOpen(true);
}

if (selectOptions!.every((option) => option.isDisabled)) {
return;
}

if (key === "ArrowUp") {
// When no index is set or at the first index, focus to the last, otherwise decrement focus index
if (focusedItemIndex === null || focusedItemIndex === 0) {
indexToFocus = selectOptions!.length - 1;
} else {
indexToFocus = focusedItemIndex - 1;
}

// Skip disabled options
while (selectOptions![indexToFocus].isDisabled) {
indexToFocus--;
Expand All @@ -217,7 +213,6 @@ const CreateTransforms: React.FunctionComponent<ICreateTransformsProps> = ({
}
}
}

if (key === "ArrowDown") {
// When no index is set or at the last index, focus to the first, otherwise increment focus index
if (
Expand All @@ -236,14 +231,12 @@ const CreateTransforms: React.FunctionComponent<ICreateTransformsProps> = ({
}
}
}

setActiveAndFocusedItem(indexToFocus);
};

const onInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
const focusedItem =
focusedItemIndex !== null ? selectOptions![focusedItemIndex] : null;

switch (event.key) {
case "Enter":
if (
Expand All @@ -254,11 +247,9 @@ const CreateTransforms: React.FunctionComponent<ICreateTransformsProps> = ({
) {
selectOption(focusedItem.value, focusedItem.children as string);
}

if (!isOpen) {
setIsOpen(true);
}

break;
case "ArrowUp":
case "ArrowDown":
Expand Down Expand Up @@ -305,7 +296,6 @@ const CreateTransforms: React.FunctionComponent<ICreateTransformsProps> = ({
isExpanded={isOpen}
aria-controls="select-typeahead-listbox"
/>

<TextInputGroupUtilities
{...(!inputValue ? { style: { display: "none" } } : {})}
>
Expand Down Expand Up @@ -335,7 +325,6 @@ const CreateTransforms: React.FunctionComponent<ICreateTransformsProps> = ({
name: transformName,
};
const response = await createPost(`${API_URL}/api/transforms`, payload);

if (response.error) {
addNotification(
"danger",
Expand All @@ -353,6 +342,21 @@ const CreateTransforms: React.FunctionComponent<ICreateTransformsProps> = ({
}
};

const dynamicFormDefaultValues = Object.entries(
find(transforms, { transform: selected })?.properties || {}
).reduce((acc: Record<string, string>, [key, value]) => {
if (value.defaultValue) {
acc[`debezium.transforms.transform-name.${key}`] = value.defaultValue;
}
return acc;
}, {});

const initialValues = {
"transform-name": "",
description: "",
...dynamicFormDefaultValues,
};

const handleItemClick = (
event:
| MouseEvent
Expand Down Expand Up @@ -398,16 +402,16 @@ const CreateTransforms: React.FunctionComponent<ICreateTransformsProps> = ({
</ToolbarContent>
</Toolbar>
</PageSection>

<FormContextProvider initialValues={{}}>
<FormContextProvider initialValues={initialValues}>
{({ setValue, getValue, setError, values, errors }) => (
<>
<PageSection
isWidthLimited={editorSelected === "form-editor"}
isWidthLimited={true}
isCenterAligned
isFilled
// To do: Add custom class to the pf-v6-c-page__main-body for center alignment in collapsed navigation
className={"pipeline-page-section"}
className={
editorSelected === "form-editor" ? "pipeline-page-section" : ""
}
>
{editorSelected === "form-editor" ? (
<Card className="pipeline-card-body">
Expand Down Expand Up @@ -524,11 +528,18 @@ const CreateTransforms: React.FunctionComponent<ICreateTransformsProps> = ({
id: `field-group-${selected}-id`,
}}
titleDescription={
<>
Configuration properties passed to the
transformation with name{" "}
<i>"{values["transform-name"]}"</i>
</>
!values["transform-name"] ? (
<>
Enter <i>transform name</i> to enable
configuration properties.
</>
) : (
<>
Configuration properties passed to the
transformation with name
<i>"{values["transform-name"]}"</i>
</>
)
}
/>
}
Expand Down
Loading