diff --git a/ui/packages/ui/__tests__/pages/connectors/ConnectorOverview.test.tsx b/ui/packages/ui/__tests__/pages/connectors/ConnectorOverview.test.tsx index e3ab6c2f..30defc6e 100644 --- a/ui/packages/ui/__tests__/pages/connectors/ConnectorOverview.test.tsx +++ b/ui/packages/ui/__tests__/pages/connectors/ConnectorOverview.test.tsx @@ -1,13 +1,13 @@ import { IConnectorcOverviewProps, - ConnectorOverview, -} from '../../../src/app/pages/connectors/ConnectorOverview'; + ConnectorExpandView, +} from '../../../src/app/pages/connectors/ConnectorExpandView'; import { render, screen } from '@testing-library/react'; import React from 'react'; describe('', () => { const renderSetup = (props: IConnectorcOverviewProps) => { - return render(); + return render(); }; it('should render ConnectorOverview', () => { diff --git a/ui/packages/ui/src/app/constants/constants.tsx b/ui/packages/ui/src/app/constants/constants.tsx new file mode 100644 index 00000000..db9b6eff --- /dev/null +++ b/ui/packages/ui/src/app/constants/constants.tsx @@ -0,0 +1,5 @@ +export enum CONNECTOR_DETAILS_TABS { + Overview = 'overview', + Configuration = 'configuration', + IncrementalSnapshot = 'incrementalSnapshot', + } \ No newline at end of file diff --git a/ui/packages/ui/src/app/pages/editConnector/EditConnectorComponent.css b/ui/packages/ui/src/app/pages/connectorDetails/ConnectorDetailsPage.css similarity index 68% rename from ui/packages/ui/src/app/pages/editConnector/EditConnectorComponent.css rename to ui/packages/ui/src/app/pages/connectorDetails/ConnectorDetailsPage.css index 76596c3a..112b4a9d 100644 --- a/ui/packages/ui/src/app/pages/editConnector/EditConnectorComponent.css +++ b/ui/packages/ui/src/app/pages/connectorDetails/ConnectorDetailsPage.css @@ -1,9 +1,5 @@ -.edit-footer{ - position: sticky; - bottom: 0; -} - -.edit-connector { +.connector-details-header { + padding-bottom: 5px; &-page_breadcrumb { border-bottom: 1px solid var(--pf-global--BorderColor--100); padding-bottom: 0px; @@ -13,4 +9,7 @@ } } } + .pf-l-level { + padding-top: 10px; + } } \ No newline at end of file diff --git a/ui/packages/ui/src/app/pages/connectorDetails/ConnectorDetailsPage.tsx b/ui/packages/ui/src/app/pages/connectorDetails/ConnectorDetailsPage.tsx new file mode 100644 index 00000000..c664af3e --- /dev/null +++ b/ui/packages/ui/src/app/pages/connectorDetails/ConnectorDetailsPage.tsx @@ -0,0 +1,164 @@ +import { CONNECTOR_DETAILS_TABS } from '../../constants/constants'; +import './ConnectorDetailsPage.css'; +import { EditConnectorComponent } from './EditConnectorComponent'; +import { IncrementalSnapshot } from './incrementalSnapshot/IncrementalSnapshot'; +import { Services } from '@debezium/ui-services'; +import { + Stack, + StackItem, + PageSection, + PageSectionVariants, + Breadcrumb, + BreadcrumbItem, + Level, + LevelItem, + TextContent, + Title, + TitleSizes, + Tab, + TabTitleText, + Tabs, +} from '@patternfly/react-core'; +import { ConnectorIcon } from 'components'; +import { AppLayoutContext } from 'layout'; +import React, { useEffect, useState } from 'react'; +import { useHistory, useLocation } from 'react-router-dom'; +import { ConnectorTypeId, fetch_retry } from 'shared'; + +export const ConnectorDetailsPage = () => { + const { hash, pathname } = useLocation(); + const history = useHistory(); + const actionConnectorName = pathname.replace(/^\/|\/$/g, ''); + + const [activeTabKey, setActiveTabKey] = useState( + getTab(hash) + ); + const [connectorConfig, setConnectorConfig] = React.useState< + Map + >(new Map()); + + /** + * Toggle currently active tab + * @param _event + * @param tabIndex + */ + const handleTabClick = ( + _event: React.MouseEvent, + tabIndex: string | number + ) => { + setActiveTabKey(tabIndex); + history.push(`#${tabIndex}`); + }; + + useEffect(() => { + setActiveTabKey(getTab(hash)); + }, [hash]); + + const connectorService = Services.getConnectorService(); + const appLayoutContext = React.useContext(AppLayoutContext); + const clusterID = appLayoutContext.clusterId; + + useEffect(() => { + fetch_retry(connectorService.getConnectorConfig, connectorService, [ + clusterID, + actionConnectorName, + ]) + .then((cConnector) => { + setConnectorConfig(cConnector); + }) + .catch((err: Error) => console.error('danger', err?.message)); + }, [clusterID, actionConnectorName]); + + return ( + + + + + Connectors + + {actionConnectorName} + + + + + + + + {/* {connectorConfig['connector.id'] && ( + <ConnectorIcon + connectorType={ + connectorConfig['connector.id'] === 'PostgreSQL' + ? ConnectorTypeId.POSTGRES + : connectorConfig['connector.id'] + } + alt={actionConnectorName} + width={30} + height={30} + /> + )} + {` ${actionConnectorName}`} */} + {actionConnectorName} + + + + + + + + + + Overview} + > + Overview + + Configuration} + > + {actionConnectorName && ( + + )} + + Incremental snapshot} + > + {actionConnectorName && connectorConfig['connector.id'] && ( + + )} + + + + + + ); +}; + +/** + * Extract the tab name out of the document hash + * @param hash + * @returns + */ +const getTab = (hash: string): string => { + const answer = hash.includes('&') + ? hash.substring(1, hash.indexOf('&')) + : hash.substring(1); + return answer !== '' ? answer : CONNECTOR_DETAILS_TABS.Overview; +}; diff --git a/ui/packages/ui/src/app/pages/connectorDetails/EditConnectorComponent.css b/ui/packages/ui/src/app/pages/connectorDetails/EditConnectorComponent.css new file mode 100644 index 00000000..13a58df5 --- /dev/null +++ b/ui/packages/ui/src/app/pages/connectorDetails/EditConnectorComponent.css @@ -0,0 +1,4 @@ +.edit-footer{ + position: sticky; + bottom: 0; +} \ No newline at end of file diff --git a/ui/packages/ui/src/app/pages/editConnector/EditConnectorComponent.tsx b/ui/packages/ui/src/app/pages/connectorDetails/EditConnectorComponent.tsx similarity index 98% rename from ui/packages/ui/src/app/pages/editConnector/EditConnectorComponent.tsx rename to ui/packages/ui/src/app/pages/connectorDetails/EditConnectorComponent.tsx index cda4250f..8cee4906 100644 --- a/ui/packages/ui/src/app/pages/editConnector/EditConnectorComponent.tsx +++ b/ui/packages/ui/src/app/pages/connectorDetails/EditConnectorComponent.tsx @@ -17,15 +17,8 @@ import { import { Services } from '@debezium/ui-services'; import { Button, - Breadcrumb, - BreadcrumbItem, - Level, - LevelItem, PageSection, PageSectionVariants, - TextContent, - Title, - TitleSizes, Tabs, Tab, TabTitleText, @@ -43,9 +36,9 @@ import { } from 'components'; import { AppLayoutContext } from 'layout'; import _ from 'lodash'; -import React, { useEffect, Dispatch, SetStateAction } from 'react'; +import React, { useEffect, Dispatch, SetStateAction, FC } from 'react'; import { useTranslation } from 'react-i18next'; -import { useLocation, useHistory } from 'react-router-dom'; +import { useHistory } from 'react-router-dom'; import { fetch_retry, getAdvancedPropertyDefinitions, @@ -69,17 +62,18 @@ import './EditConnectorComponent.css'; interface IValidationRef { validate: () => {}; } -type IOnSuccessCallbackFn = () => void; +// type IOnSuccessCallbackFn = () => void; -type IOnCancelCallbackFn = () => void; +// type IOnCancelCallbackFn = () => void; export interface IEditConnectorComponentProps { - onSuccessCallback: IOnSuccessCallbackFn; - onCancelCallback: IOnCancelCallbackFn; + // onSuccessCallback: IOnSuccessCallbackFn; + // onCancelCallback: IOnCancelCallbackFn; + actionConnectorName: string; } -export const EditConnectorComponent: React.FunctionComponent< +export const EditConnectorComponent: FC< IEditConnectorComponentProps -> = () => { +> = ({actionConnectorName}) => { const { t } = useTranslation(); const history = useHistory(); const [activeTabKey, setActiveTabKey] = React.useState(1); @@ -153,8 +147,8 @@ export const EditConnectorComponent: React.FunctionComponent< [key: string]: string; }>({}); - const { pathname } = useLocation(); - const actionConnectorName = pathname.replace(/^\/|\/$/g, ''); + // const { pathname } = useLocation(); + // const actionConnectorName = pathname.replace(/^\/|\/$/g, ''); const appLayoutContext = React.useContext(AppLayoutContext); const clusterID = appLayoutContext.clusterId; @@ -621,8 +615,9 @@ export const EditConnectorComponent: React.FunctionComponent< }; return ( <> + - + {/* - + */} diff --git a/ui/packages/ui/src/app/pages/editConnector/EditPropertiesStep.tsx b/ui/packages/ui/src/app/pages/connectorDetails/EditPropertiesStep.tsx similarity index 100% rename from ui/packages/ui/src/app/pages/editConnector/EditPropertiesStep.tsx rename to ui/packages/ui/src/app/pages/connectorDetails/EditPropertiesStep.tsx diff --git a/ui/packages/ui/src/app/pages/editConnector/EditTopicCreationStep.tsx b/ui/packages/ui/src/app/pages/connectorDetails/EditTopicCreationStep.tsx similarity index 100% rename from ui/packages/ui/src/app/pages/editConnector/EditTopicCreationStep.tsx rename to ui/packages/ui/src/app/pages/connectorDetails/EditTopicCreationStep.tsx diff --git a/ui/packages/ui/src/app/pages/connectorDetails/incrementalSnapshot/IncrementalSnapshot.css b/ui/packages/ui/src/app/pages/connectorDetails/incrementalSnapshot/IncrementalSnapshot.css new file mode 100644 index 00000000..a9c94366 --- /dev/null +++ b/ui/packages/ui/src/app/pages/connectorDetails/incrementalSnapshot/IncrementalSnapshot.css @@ -0,0 +1,5 @@ +.incremental-snapshot-wizard{ + .pf-c-wizard__nav-list{ + padding-right: 5px; + } +} \ No newline at end of file diff --git a/ui/packages/ui/src/app/pages/connectorDetails/incrementalSnapshot/IncrementalSnapshot.tsx b/ui/packages/ui/src/app/pages/connectorDetails/incrementalSnapshot/IncrementalSnapshot.tsx new file mode 100644 index 00000000..f5655e82 --- /dev/null +++ b/ui/packages/ui/src/app/pages/connectorDetails/incrementalSnapshot/IncrementalSnapshot.tsx @@ -0,0 +1,376 @@ +import './IncrementalSnapshot.css'; +import { DataCollection, FilterValidationResult } from '@debezium/ui-models'; +import { Services } from '@debezium/ui-services'; +import { + ActionGroup, + Text, + Button, + Divider, + EmptyState, + EmptyStateBody, + EmptyStateIcon, + EmptyStateVariant, + Form, + PageSection, + PageSectionVariants, + TextVariants, + Title, + Wizard, + FormGroup, + TextInput, + EmptyStateSecondaryActions, + Level, + LevelItem, + Modal, + ModalVariant, +} from '@patternfly/react-core'; +import { CubesIcon } from '@patternfly/react-icons'; +import { FilterTreeComponent, HelpInfoIcon, JsonViewer } from 'components'; +import { t } from 'i18next'; +import _ from 'lodash'; +import React, { FC, useState } from 'react'; +import { fetch_retry } from 'shared'; + +export type IncrementalSnapshotProps = { + actionConnectorName: string; + connectorConfig: Map; +}; + +const formatResponseData = (data: DataCollection[]) => { + return data.reduce((acc: any, next) => { + const inx = _.findIndex(acc, { name: next.namespace, id: next.namespace }); + if (inx !== -1) { + acc[inx].children.push({ + name: next.name, + id: next.namespace + '_' + next.name, + }); + } else { + const newObj = { + name: next.namespace, + id: next.namespace, + children: [ + { + name: next.name, + id: next.namespace + '_' + next.name, + }, + ], + }; + acc.push(newObj); + } + return acc; + }, []); +}; + +export const IncrementalSnapshot: FC = ({ + actionConnectorName, + connectorConfig, +}) => { + const [setupIncrementalSnapshot, setSetupIncrementalSnapshot] = + useState(false); + const [stepIdReached, setStepIdReached] = useState(1); + + const [IncrementalSnapshotEnabled, setIncrementalSnapshotEnabled] = useState(false); + + const [isEnableModalOpen, setIsEnableModalOpen] = useState(false); + + const [treeData, setTreeData] = React.useState([]); + const [invalidMsg, setInvalidMsg] = React.useState>( + new Map() + ); + const [childNo, setChildNo] = React.useState(0); + const [loading, setLoading] = React.useState(true); + const [apiError, setApiError] = React.useState(false); + const [errorMsg, setErrorMsg] = React.useState(new Error()); + + const startIncrementalSnapshotConfig = () => { + setSetupIncrementalSnapshot(true); + }; + + // const { stepIdReached } = stepIdReached; + + const handleEnableModalToggle = () => { + setIsEnableModalOpen(!isEnableModalOpen); + setIncrementalSnapshotEnabled(true); + } + + const INCREMENTAL_SNAPSHOT = ( +
+ {'Incremental snapshot'}{' '} + + {' '} + * + +
+ ); + + const onNext = ({ id }: any) => { + setStepIdReached(stepIdReached < id ? id : stepIdReached); + }; + const closeWizard = () => { + console.log('close wizard'); + setSetupIncrementalSnapshot(false); + }; + + const connectorService = Services.getConnectorService(); + + const getFilterSchema = () => + // saveFilter: boolean, + // filterExpression: Map = formData + { + setLoading(true); + if (apiError) { + setApiError(false); + setErrorMsg(new Error()); + } + fetch_retry(connectorService.validateFilters, connectorService, [ + connectorConfig['connector.id'], + connectorConfig, + ]) + .then((result: FilterValidationResult) => { + if (result.status === 'INVALID') { + const errorMap = new Map(); + for (const e of result.propertyValidationResults) { + errorMap.set(e.property, e.message); + } + setInvalidMsg(errorMap); + // props.setIsValidFilter(false); + setTreeData([]); + setChildNo(result.matchedCollections.length); + } else { + // saveFilter && props.updateFilterValues(filterExpression); + // props.setIsValidFilter(true); + setInvalidMsg(new Map()); + setChildNo(result.matchedCollections.length); + setTreeData(formatResponseData(result.matchedCollections)); + } + // isColumnOrFieldFilterApplied(filterExpression); + setLoading(false); + }) + .catch((err: React.SetStateAction) => { + setApiError(true); + setErrorMsg(err); + }); + }; + + const applyFilter = () => { + getFilterSchema(); + }; + + React.useEffect(() => { + getFilterSchema(); + }, []); + + const ReviewContent = { + type: 'INCREMENTAL', + 'data-collection': [ + 'databaseName.schemaName.tableName1', + 'databaseName.schemaName.tableName2', + ], + 'additional-collection': '...', + }; + + const steps = [ + { + name: INCREMENTAL_SNAPSHOT, + component: ( + <> + + Select tables for incremental snapshots by entering comma-separated + list of regular expressions. + +
+
+ + } + > + {}} + value={''} + onBlur={() => {}} + aria-label={'tableFilter'} + placeholder="e.g. databaseName.schemaName.tableName1, databaseName.schemaName.tableName1, ..." + // validated={props.validated} + type={'text'} + /> + + + } + > + {}} + value={''} + onBlur={() => {}} + aria-label={'dataFilter'} + placeholder="e.g. LAST_UPDATE_DATE >= STR_TO_DATE('2023-01-01', '%Y-%m-%d')" + // validated={props.validated} + type={'text'} + /> + +
+ + + + +
+ + {}} + i18nApiErrorTitle={t('apiErrorTitle')} + i18nApiErrorMsg={t('apiErrorMsg')} + i18nNoMatchingTables={'No matching tables'} + i18nNoMatchingFilterExpMsg={'No matching filter expression'} + i18nInvalidFilters={'Invalid filters'} + i18nInvalidFilterText={'Invalid filter text'} + i18nMatchingFilterExpMsg={ + 'matching table(s) for incremental snapshots' + } + i18nClearFilterText={'Clear filter text'} + i18nClearFilters={t('clearFilters')} + i18nFilterExpressionResultText={'Filter expression result'} + i18nColumnOrFieldFilter={_.capitalize('Column or field filter')} + i18nInvalidFilterExpText={''} + /> + {/* */} + + ), + }, + + { + name: 'Review', + component: ( + <> + + {' '} + {`Review the signal to be sent to starting the incremental snapshot for connector ${actionConnectorName}. click 'Finish' to send the signal`}{' '} + + + + ), + canJumpTo: stepIdReached >= 2, + nextButtonText: 'Finish', + }, + ]; + const incrementSnapshotHelperText = IncrementalSnapshotEnabled ? `Please click 'Start incremental snapshot' to configure and start a new incremental snapshot for ${actionConnectorName} connector.` : `Incremental snapshot is currently not enabled on ${actionConnectorName} connector. Please enable the Incremental snapshot and then click 'Start incremental snapshot' to configure and start a new incremental snapshot for ${actionConnectorName} connector.` + + return ( + <> + + {!setupIncrementalSnapshot ? ( + + + + {IncrementalSnapshotEnabled ? 'No incremental snapshots available' : 'Incremental snapshot is not enabled'} + + + {/* {`Please click 'Start incremental snapshot' to configure and start a new incremental snapshot for ${actionConnectorName} connector.`} */} + {incrementSnapshotHelperText} + + + + {/* + */} + + {/* + */} + + {/* + */} + + + ) : ( + + )} + + setIsEnableModalOpen(false)} + actions={[ + , + + ]} + > +
+ + + } + > + {}} + value={''} + onBlur={() => {}} + aria-label={'Signaling_data_collection'} + // placeholder="e.g. databaseName.schemaName.tableName1, databaseName.schemaName.tableName1, ..." + // validated={props.validated} + type={'text'} + /> + + + +
+ + + ); +}; diff --git a/ui/packages/ui/src/app/pages/editConnector/index.ts b/ui/packages/ui/src/app/pages/connectorDetails/index.ts similarity index 100% rename from ui/packages/ui/src/app/pages/editConnector/index.ts rename to ui/packages/ui/src/app/pages/connectorDetails/index.ts diff --git a/ui/packages/ui/src/app/pages/connectors/ConnectorDrawer.tsx b/ui/packages/ui/src/app/pages/connectors/ConnectorDrawer.tsx index 45abdcee..a28f9a3b 100644 --- a/ui/packages/ui/src/app/pages/connectors/ConnectorDrawer.tsx +++ b/ui/packages/ui/src/app/pages/connectors/ConnectorDrawer.tsx @@ -126,7 +126,6 @@ export const ConnectorDrawerPanelContent: FunctionComponent< .then((cConnector) => { setLoading(false); setConnector(cConnector); - console.log(cConnector); }) .catch((err: React.SetStateAction) => { setApiError(true); diff --git a/ui/packages/ui/src/app/pages/connectors/ConnectorOverview.css b/ui/packages/ui/src/app/pages/connectors/ConnectorExpandView.css similarity index 100% rename from ui/packages/ui/src/app/pages/connectors/ConnectorOverview.css rename to ui/packages/ui/src/app/pages/connectors/ConnectorExpandView.css diff --git a/ui/packages/ui/src/app/pages/connectors/ConnectorOverview.tsx b/ui/packages/ui/src/app/pages/connectors/ConnectorExpandView.tsx similarity index 97% rename from ui/packages/ui/src/app/pages/connectors/ConnectorOverview.tsx rename to ui/packages/ui/src/app/pages/connectors/ConnectorExpandView.tsx index e1914edb..0587dc41 100644 --- a/ui/packages/ui/src/app/pages/connectors/ConnectorOverview.tsx +++ b/ui/packages/ui/src/app/pages/connectors/ConnectorExpandView.tsx @@ -1,4 +1,4 @@ -import './ConnectorOverview.css'; +import './ConnectorExpandView.css'; import { Metrics } from '@debezium/ui-models'; import { Services } from '@debezium/ui-services'; import { Flex, FlexItem, Skeleton, Title } from '@patternfly/react-core'; @@ -37,7 +37,7 @@ const convertMillisecToTime = (millisec: number) => { /** * Component for display of Connector Overview */ -export const ConnectorOverview: React.FunctionComponent< +export const ConnectorExpandView: React.FunctionComponent< IConnectorcOverviewProps > = (props) => { const { t } = useTranslation(); diff --git a/ui/packages/ui/src/app/pages/connectors/ConnectorsTableComponent.tsx b/ui/packages/ui/src/app/pages/connectors/ConnectorsTableComponent.tsx index 8d6cf306..ea1498d4 100644 --- a/ui/packages/ui/src/app/pages/connectors/ConnectorsTableComponent.tsx +++ b/ui/packages/ui/src/app/pages/connectors/ConnectorsTableComponent.tsx @@ -1,5 +1,5 @@ import { ConnectorDrawer } from './ConnectorDrawer'; -import { ConnectorOverview } from './ConnectorOverview'; +import { ConnectorExpandView } from './ConnectorExpandView'; import { ConnectorStatus } from './ConnectorStatus'; import { ConnectorTask } from './ConnectorTask'; import { ConnectorTaskState } from './ConnectorTaskState'; @@ -133,10 +133,29 @@ export const ConnectorsTableComponent: React.FunctionComponent< setCurrentActionConnector(''); }; + const goToConnectorOverview = useCallback( + (connName: string, connector?: any) => + history.push({ + pathname: `/${connName}`, + hash: '#overview', + }), + [history] + ); + const goToEditConnector = useCallback( (connName: string, connector?: any) => history.push({ pathname: `/${connName}`, + hash: '#configuration', + }), + [history] + ); + + const goToIncrementalSnapshot = useCallback( + (connName: string, connector?: any) => + history.push({ + pathname: `/${connName}`, + hash: '#incrementalSnapshot', }), [history] ); @@ -153,7 +172,6 @@ export const ConnectorsTableComponent: React.FunctionComponent< name: connector.connName, taskStates: {}, }); - console.log(connector); } else { setCurrentAction(action); setCurrentActionConnector(connName); @@ -479,7 +497,7 @@ export const ConnectorsTableComponent: React.FunctionComponent< data-testid={'connector-name'} onClick={() => // onConnectorDrawer(conn) - goToEditConnector(conn.name) + goToConnectorOverview(conn.name) } > {conn.name} @@ -502,7 +520,7 @@ export const ConnectorsTableComponent: React.FunctionComponent< cells: [ { title:
{''}
}, { title: ( - @@ -570,6 +588,9 @@ export const ConnectorsTableComponent: React.FunctionComponent< ? true : false, }, + { + isSeparator: true, + }, { title: t('view'), onClick: (event: any, rowId: any, rowData: any, extra: any) => { @@ -581,12 +602,19 @@ export const ConnectorsTableComponent: React.FunctionComponent< : false, }, { - isSeparator: true, + title: 'Edit connector config', + onClick: (event: any, rowId: any, rowData: any, extra: any) => { + goToEditConnector(rowData.connName, rowData); + }, + isDisabled: + row.connStatus === 'UNASSIGNED' || row.connStatus === 'DESTROYED' + ? true + : false, }, { - title: t('Edit'), + title: 'Incremental snapshot', onClick: (event: any, rowId: any, rowData: any, extra: any) => { - goToEditConnector(rowData.connName, rowData); + goToIncrementalSnapshot(rowData.connName, rowData); }, isDisabled: row.connStatus === 'UNASSIGNED' || row.connStatus === 'DESTROYED' diff --git a/ui/packages/ui/src/app/pages/createConnector/CreateConnectorComponent.tsx b/ui/packages/ui/src/app/pages/createConnector/CreateConnectorComponent.tsx index a5abb1d8..def204f5 100644 --- a/ui/packages/ui/src/app/pages/createConnector/CreateConnectorComponent.tsx +++ b/ui/packages/ui/src/app/pages/createConnector/CreateConnectorComponent.tsx @@ -20,7 +20,12 @@ import { Services } from '@debezium/ui-services'; import { Alert, Button, + Form, + FormGroup, + Modal, + ModalVariant, Spinner, + TextInput, Tooltip, Wizard, WizardContextConsumer, @@ -30,9 +35,10 @@ import { ToastAlertComponent, ConnectionPropertiesError, ConnectorNameTypeHeader, + HelpInfoIcon, } from 'components'; import _ from 'lodash'; -import React, { Dispatch, ReactNode, SetStateAction } from 'react'; +import React, { Dispatch, ReactNode, SetStateAction, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { Prompt } from 'react-router-dom'; import { @@ -53,6 +59,7 @@ import { } from 'shared'; import { getPropertiesDatawithDefaultConfig } from 'src/app/utils/FormatCosProperties'; import { CustomPropertiesStep } from './connectorSteps/CustomPropertiesStep'; +import { use } from 'i18next'; /** * Put the enabled types first, then the disabled types. alpha sort each group @@ -193,6 +200,14 @@ export const CreateConnectorComponent: React.FunctionComponent< const [connectorCreateFailed, setConnectorCreateFailed] = React.useState(false); + + + const [isIncrementalSnapshotModalOpen, setIsIncrementalSnapshotModalOpen] = useState(false); + + const handleIncrementalSnapshotModalToggle = () => { + + } + const connectionPropsRef = React.useRef() as React.MutableRefObject; const dataOptionRef = @@ -1163,6 +1178,11 @@ export const CreateConnectorComponent: React.FunctionComponent< {t('next')} )} + {activeStep.id === REVIEW_STEP_ID && ( + + ) } , + + ]} + > +
+ + + } + > + {}} + value={''} + onBlur={() => {}} + aria-label={'Signaling_data_collection'} + // placeholder="e.g. databaseName.schemaName.tableName1, databaseName.schemaName.tableName1, ..." + // validated={props.validated} + type={'text'} + /> + + + +
+ + ); }; diff --git a/ui/packages/ui/src/app/pages/createConnector/connectorSteps/PropertiesStep.tsx b/ui/packages/ui/src/app/pages/createConnector/connectorSteps/PropertiesStep.tsx index 9c2833c7..c058add7 100644 --- a/ui/packages/ui/src/app/pages/createConnector/connectorSteps/PropertiesStep.tsx +++ b/ui/packages/ui/src/app/pages/createConnector/connectorSteps/PropertiesStep.tsx @@ -54,8 +54,6 @@ const FormSubmit: React.FunctionComponent = React.forwardRef( export const PropertiesStep: React.FC = React.forwardRef((props, ref) => { const basicValidationSchema = {}; - console.log('PropertiesStep props', props.basicPropertyDefinitions); - const namePropertyDefinitions = formatPropertyDefinitions( props.basicPropertyDefinitions.filter( (defn: any) => defn.category === PropertyCategory.CONNECTOR_NAME diff --git a/ui/packages/ui/src/app/pages/index.ts b/ui/packages/ui/src/app/pages/index.ts index 972d41fc..3703ca48 100644 --- a/ui/packages/ui/src/app/pages/index.ts +++ b/ui/packages/ui/src/app/pages/index.ts @@ -1,3 +1,3 @@ export * from './connectors/ConnectorsPage'; export * from './createConnector'; -export * from './editConnector'; +export * from './connectorDetails'; diff --git a/ui/packages/ui/src/app/shared/routes.tsx b/ui/packages/ui/src/app/shared/routes.tsx index 1a04f2b1..a6038e69 100644 --- a/ui/packages/ui/src/app/shared/routes.tsx +++ b/ui/packages/ui/src/app/shared/routes.tsx @@ -1,8 +1,8 @@ import { ConnectorsPage, CreateConnectorPage, - EditConnectorComponent, } from '../pages'; +import { ConnectorDetailsPage } from '../pages/connectorDetails/ConnectorDetailsPage'; import { RenderRoutes } from './RenderRoutes'; export const ROUTES = [ @@ -29,7 +29,7 @@ export const ROUTES = [ path: '/:id/', key: 'CONNECTOR_DETAILS_PAGE', exact: true, - component: EditConnectorComponent, + component: ConnectorDetailsPage, }, ], }, diff --git a/ui/packages/ui/tsconfig.json b/ui/packages/ui/tsconfig.json index 91765241..4d352957 100644 --- a/ui/packages/ui/tsconfig.json +++ b/ui/packages/ui/tsconfig.json @@ -8,6 +8,7 @@ "@pf4-assets/*": ["node_modules/@patternfly/react-core/dist/styles/assets/*"], "shared": ["src/app/shared"], "components": ["src/app/components"], + "constants": ["src/app/constants/*"], "assets": ["assets"], "i18n": ["src/i18n"], "layout":["src/app/layout"],