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

DBZ-7346: Quick Configure path. #845

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

DBZ-7346: Quick Configure path. #845

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
52 changes: 36 additions & 16 deletions src/app/pages/connectorPlugins/ConnectorPlugins.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,18 +18,21 @@ import {
Toolbar,
ToolbarContent,
ToolbarItem,
Tooltip,
} from "@patternfly/react-core";
import React from "react";
import React, { useEffect } from "react";
import "./ConnectorPlugins.css";
import { useNavigate } from "react-router-dom";
import { useLocation, useNavigate } from "react-router-dom";
import { DatabaseIcon } from "@patternfly/react-icons";

interface ConnectorPluginsProps {
// Add any props you need for the component
}

export const ConnectorPlugins: React.FC<ConnectorPluginsProps> = (props) => {
const [quickStart, setQuickStart] = React.useState<boolean>(false);
const locationData = useLocation().state;

const [showAdvanceProp, setShowAdvanceProp] = React.useState<boolean>(false);
const appLayoutContext = React.useContext(AppLayoutContext);
const { cluster: clusterUrl, addNewNotification } = appLayoutContext;
const connectorService = Services.getConnectorService();
Expand All @@ -56,10 +59,20 @@ export const ConnectorPlugins: React.FC<ConnectorPluginsProps> = (props) => {
const target = event.target as HTMLInputElement;
const name = target.name;
navigate(`/config-connector/${name}`, {
state: { hideAdvance: quickStart },
state: { hideAdvance: showAdvanceProp },
});
};

useEffect(() => {
if (locationData) {
if (!locationData.hideAdvance) {
setShowAdvanceProp(false);
} else {
setShowAdvanceProp(true);
}
}
}, [locationData]);

const toolbarItems = (
<React.Fragment>
<ToolbarItem variant="search-filter">
Expand All @@ -70,16 +83,22 @@ export const ConnectorPlugins: React.FC<ConnectorPluginsProps> = (props) => {
</ToolbarItem>
<ToolbarItem variant="separator" />
<ToolbarItem>
<Button variant="plain">
<Switch
id="quick-start-switch-on"
aria-label="Configure connector with advanced options toggle"
label="Advance configuration options"
isChecked={!quickStart}
hasCheckIcon
onChange={() => setQuickStart(!quickStart)}
/>
</Button>
<Tooltip
content={
showAdvanceProp ? `Hide advanced options` : `Show advanced options`
}
>
<Button variant="plain">
<Switch
id="quick-start-switch-on"
aria-label="Configure connector with advanced options toggle"
label="Advance configuration"
isChecked={showAdvanceProp}
hasCheckIcon
onChange={() => setShowAdvanceProp(!showAdvanceProp)}
/>
</Button>
</Tooltip>
</ToolbarItem>
</React.Fragment>
);
Expand All @@ -90,8 +109,9 @@ export const ConnectorPlugins: React.FC<ConnectorPluginsProps> = (props) => {
<Text component="h1">Connector plugins</Text>
<Text component="p">
List of available connector plugin type. To quickly create a connector
with just basic properties toggle off the switch for &quot;Advance
configuration options&quot; below before clicking on connector plugin type.{" "}
with just basic properties toggle off the switch for &quot;Advance
configuration options&quot; below before clicking on connector plugin
type.{" "}
</Text>
</TextContent>
<Toolbar id="toolbar-group-types">
Expand Down
125 changes: 100 additions & 25 deletions src/app/pages/createConnector/CreateConnectorWizard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,14 @@ import {
Skeleton,
Split,
SplitItem,
Switch,
Text,
TextContent,
ToolbarItem,
Tooltip,
Wizard,
WizardFooterWrapper,
WizardHeader,
WizardStep,
useWizardContext,
} from "@patternfly/react-core";
Expand Down Expand Up @@ -89,8 +92,26 @@ export const CreateConnectorWizard: React.FunctionComponent = () => {
const [connectionValidationMessage, setConnectionValidationMessage] =
useState<string>("");

const [showAdvanceProp, setShowAdvanceProp] = React.useState<boolean>(false);

const ref = useRef<HTMLInputElement>(null);

useEffect(() => {
if (locationData) {
if (!locationData.hideAdvance) {
setShowAdvanceProp(false);
} else {
setShowAdvanceProp(true);
}
}
}, [locationData]);

const connectorPluginPage = () => {
navigate("/plugins", {
state: { hideAdvance: showAdvanceProp },
});
};

const updateFormData = useCallback(
(key: string, value: any, formStep: FormStep) => {
switch (formStep) {
Expand Down Expand Up @@ -353,17 +374,27 @@ export const CreateConnectorWizard: React.FunctionComponent = () => {
</Text>
</TextContent>
</SplitItem>
{/* <SplitItem isFilled></SplitItem>
<SplitItem isFilled></SplitItem>
<SplitItem>
<Switch
label="Skip additional properties"
labelOff="Configure additional properties"
isChecked={isAdvanceChecked}
onChange={handleAdvanceChange}
id="Advance-config-switch"
name="Toggle Hide and Show Advanced Configuration steps"
/>
</SplitItem> */}
<Tooltip
content={
showAdvanceProp
? `Hide advanced options`
: `Show advanced options`
}
>
<Button variant="plain">
<Switch
id="quick-start-switch-on"
aria-label="Configure connector with advanced options toggle"
label="Advance configuration"
isChecked={showAdvanceProp}
hasCheckIcon
onChange={() => setShowAdvanceProp(!showAdvanceProp)}
/>
</Button>
</Tooltip>
</SplitItem>
</Split>
</PageSection>
);
Expand All @@ -386,7 +417,6 @@ export const CreateConnectorWizard: React.FunctionComponent = () => {
const ConnectionStepFooter = () => {
const { goToNextStep, goToPrevStep, close } = useWizardContext();
const [isLoading, setIsLoading] = useState(false);
const connectorPluginPage = () => navigate("/plugins");

async function onValidate() {
setIsLoading(true);
Expand Down Expand Up @@ -539,7 +569,18 @@ export const CreateConnectorWizard: React.FunctionComponent = () => {
<Wizard
className="connector-config-wizard"
onClose={() => setIsCancelModalOpen(true)}
isVisitRequired
header={
!showAdvanceProp ? (
<Alert
variant="info"
isInline
title='Advance properties steps are hidden, to configure the advance properties enable the "Advance configuration" toggle.'
/>
) : (
<></>
)
}
// isVisitRequired
>
<WizardStep
name="Connection"
Expand Down Expand Up @@ -609,14 +650,16 @@ export const CreateConnectorWizard: React.FunctionComponent = () => {
<WizardStep
name="Additional properties"
id="wizard-step-2-additional"
isExpandable
isHidden={locationData.hideAdvance || false}
// isExpandable
// isHidden={!showAdvanceProp}
isDisabled={!connectionFilled}
steps={[
<WizardStep
name="Filter definition"
id="wizard-step-2-filter"
key="wizard-step-2-filter"
isHidden={locationData.hideAdvance || false}
// isHidden={!showAdvanceProp}
isDisabled={!connectionFilled}
>
<FilterStep
filterProperties={[...filterProperties]}
Expand All @@ -631,32 +674,49 @@ export const CreateConnectorWizard: React.FunctionComponent = () => {
/>
</WizardStep>,
<WizardStep
name="Transformation"
name={
<>
Transformation <sup style={{color: "#0066CC"}}>Adv.</sup>
</>
}
id="wizard-step-2-transform"
key="wizard-step-2-smt"
isHidden={locationData.hideAdvance || false}
isHidden={!showAdvanceProp}
isDisabled={!connectionFilled}
>
<TransformsStep
formData={transformFormData}
updateFormData={updateTransFormData}
/>
</WizardStep>,
<WizardStep
name="Topic creation"
name={
<>
Topic creation <sup style={{color: "#0066CC"}}>Adv.</sup>
</>
}

id="wizard-step-2-topic"
key="wizard-step-2-topic-creation"
isHidden={!topicCreationEnabled || locationData.hideAdvance}
isHidden={!topicCreationEnabled || !showAdvanceProp}
isDisabled={!connectionFilled}
>
<TopicCreationStep
formData={topicGroupFormData}
updateFormData={updateTopicGroupFormData}
/>
</WizardStep>,
<WizardStep
name="Data options"
name={
<>
Data options <sup style={{color: "#0066CC"}}>Adv.</sup>
</>
}

id="wizard-step-2-data"
key="wizard-step-2-data-options"
isHidden={locationData.hideAdvance || false}
isHidden={!showAdvanceProp}
isDisabled={!connectionFilled}
>
<DataOptionStep
dataOptionProperties={[...dataOptionProperties]}
Expand All @@ -670,10 +730,17 @@ export const CreateConnectorWizard: React.FunctionComponent = () => {
/>
</WizardStep>,
<WizardStep
name="Runtime options"
// name={
// <>
// Runtime options <sup style={{color: "#0066CC"}}>Adv.</sup>
// </>
// }
name="Runtime options"

id="wizard-step-2-runtime"
key="wizard-step-2-runtime-options"
isHidden={locationData.hideAdvance || false}
// isHidden={!showAdvanceProp}
isDisabled={!connectionFilled}
>
<RuntimeOptionStep
runtimeOptionEngineProperties={[
Expand All @@ -688,10 +755,17 @@ export const CreateConnectorWizard: React.FunctionComponent = () => {
/>
</WizardStep>,
<WizardStep
name="Custom properties"
// name={
// <>
// Custom properties <sup style={{color: "#0066CC"}}>Adv.</sup>
// </>
// }
name="Custom properties"

id="wizard-step-2-custom"
key="wizard-step-2-custom-property"
isHidden={locationData.hideAdvance || false}
// isHidden={!showAdvanceProp}
isDisabled={!connectionFilled}
>
<CustomPropertiesStep
formData={customPropFormData}
Expand All @@ -714,6 +788,7 @@ export const CreateConnectorWizard: React.FunctionComponent = () => {
name="Review"
id="wizard-step-3-review"
footer={<ReviewStepFooter />}
isDisabled={!connectionFilled}
>
<ReviewStep
connectorName={connectorName}
Expand Down
Loading