From 72138c5982909b34be54620dc6b17dd1c3821fbd Mon Sep 17 00:00:00 2001 From: Indra Date: Mon, 4 Sep 2023 21:56:57 +0530 Subject: [PATCH] DBZ-6856: Added overview tab & update to connector detail page. (#801) * DBZ-6856:Initial commit(adding overview tab) * DBZ-6856: cleanup and nav fix --- ...t.tsx => ConnectorExpandableView.test.tsx} | 8 +- .../app/components/KafkaConnectCluster.tsx | 3 + .../ui/src/app/constants/constants.tsx | 5 + .../connectorDetails/ConnectorDetailsPage.css | 23 +++ .../connectorDetails/ConnectorDetailsPage.tsx | 172 ++++++++++++++++++ .../connectorDetails/ConnectorOverview.tsx | 81 +++++++++ .../EditConnectorComponent.css | 4 + .../EditConnectorComponent.tsx | 71 ++------ .../EditPropertiesStep.tsx | 0 .../EditTopicCreationStep.tsx | 0 .../index.ts | 1 + .../app/pages/connectors/ConnectorDrawer.tsx | 1 - ...erview.css => ConnectorExpandableView.css} | 0 ...erview.tsx => ConnectorExpandableView.tsx} | 12 +- .../connectors/ConnectorsTableComponent.tsx | 49 +++-- .../CreateConnectorComponent.css | 11 +- .../createConnector/CreateConnectorPage.tsx | 22 ++- .../connectorSteps/CustomPropertiesStep.tsx | 9 +- .../connectorSteps/PropertiesStep.tsx | 3 - .../editConnector/EditConnectorComponent.css | 16 -- ui/packages/ui/src/app/pages/index.ts | 2 +- ui/packages/ui/src/app/shared/routes.tsx | 4 +- ui/packages/ui/src/locales/en/public.json | 4 +- ui/packages/ui/src/locales/it/public.json | 2 +- ui/packages/ui/src/locales/zh/public.json | 2 +- ui/packages/ui/tsconfig.json | 1 + 26 files changed, 382 insertions(+), 124 deletions(-) rename ui/packages/ui/__tests__/pages/connectors/{ConnectorOverview.test.tsx => ConnectorExpandableView.test.tsx} (63%) create mode 100644 ui/packages/ui/src/app/constants/constants.tsx create mode 100644 ui/packages/ui/src/app/pages/connectorDetails/ConnectorDetailsPage.css create mode 100644 ui/packages/ui/src/app/pages/connectorDetails/ConnectorDetailsPage.tsx create mode 100644 ui/packages/ui/src/app/pages/connectorDetails/ConnectorOverview.tsx create mode 100644 ui/packages/ui/src/app/pages/connectorDetails/EditConnectorComponent.css rename ui/packages/ui/src/app/pages/{editConnector => connectorDetails}/EditConnectorComponent.tsx (95%) rename ui/packages/ui/src/app/pages/{editConnector => connectorDetails}/EditPropertiesStep.tsx (100%) rename ui/packages/ui/src/app/pages/{editConnector => connectorDetails}/EditTopicCreationStep.tsx (100%) rename ui/packages/ui/src/app/pages/{editConnector => connectorDetails}/index.ts (66%) rename ui/packages/ui/src/app/pages/connectors/{ConnectorOverview.css => ConnectorExpandableView.css} (100%) rename ui/packages/ui/src/app/pages/connectors/{ConnectorOverview.tsx => ConnectorExpandableView.tsx} (91%) delete mode 100644 ui/packages/ui/src/app/pages/editConnector/EditConnectorComponent.css diff --git a/ui/packages/ui/__tests__/pages/connectors/ConnectorOverview.test.tsx b/ui/packages/ui/__tests__/pages/connectors/ConnectorExpandableView.test.tsx similarity index 63% rename from ui/packages/ui/__tests__/pages/connectors/ConnectorOverview.test.tsx rename to ui/packages/ui/__tests__/pages/connectors/ConnectorExpandableView.test.tsx index e3ab6c2f..8e1e1e55 100644 --- a/ui/packages/ui/__tests__/pages/connectors/ConnectorOverview.test.tsx +++ b/ui/packages/ui/__tests__/pages/connectors/ConnectorExpandableView.test.tsx @@ -1,13 +1,13 @@ import { IConnectorcOverviewProps, - ConnectorOverview, -} from '../../../src/app/pages/connectors/ConnectorOverview'; + ConnectorExpandableView, +} from '../../../src/app/pages/connectors/ConnectorExpandableView'; import { render, screen } from '@testing-library/react'; import React from 'react'; describe('', () => { const renderSetup = (props: IConnectorcOverviewProps) => { - return render(); + return render(); }; it('should render ConnectorOverview', () => { @@ -18,6 +18,6 @@ describe('', () => { renderSetup(props); - expect(screen.getByText('metrics')).toBeInTheDocument(); + expect(screen.getAllByText('Loading connector metrics')[0]).toBeInTheDocument(); }); }); diff --git a/ui/packages/ui/src/app/components/KafkaConnectCluster.tsx b/ui/packages/ui/src/app/components/KafkaConnectCluster.tsx index 4e00d356..58deadc5 100644 --- a/ui/packages/ui/src/app/components/KafkaConnectCluster.tsx +++ b/ui/packages/ui/src/app/components/KafkaConnectCluster.tsx @@ -21,6 +21,9 @@ export const KafkaConnectCluster: React.FC = (props) => { fetch_retry(globalsService.getConnectCluster, globalsService) .then((cClusters: string[]) => { setConnectClusters([...cClusters]); + if(cClusters.length > 0) { + props.handleChange(1); + } }) .catch((err: React.SetStateAction) => { alert(err); 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..48ca4ffd --- /dev/null +++ b/ui/packages/ui/src/app/constants/constants.tsx @@ -0,0 +1,5 @@ +export enum CONNECTOR_DETAILS_TABS { + Overview = 'overview', + Configuration = 'editConnectorConfig', + IncrementalSnapshot = 'incrementalSnapshot', + } \ No newline at end of file diff --git a/ui/packages/ui/src/app/pages/connectorDetails/ConnectorDetailsPage.css b/ui/packages/ui/src/app/pages/connectorDetails/ConnectorDetailsPage.css new file mode 100644 index 00000000..0674dde6 --- /dev/null +++ b/ui/packages/ui/src/app/pages/connectorDetails/ConnectorDetailsPage.css @@ -0,0 +1,23 @@ +.connector-details-header { + padding-bottom: 5px; + &-page_breadcrumb { + border-bottom: 1px solid var(--pf-global--BorderColor--100); + padding-bottom: 0px; + .pf-l-level { + .pf-c-content { + padding: 15px 0px; + } + } + } + .pf-l-level { + padding-top: 10px; + } + } +.connector-details-content{ + padding: 5px 5px 0 5px; + height: 100%; + .pf-c-tab-content{ + height: 100%; + } + +} \ 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..4af602ac --- /dev/null +++ b/ui/packages/ui/src/app/pages/connectorDetails/ConnectorDetailsPage.tsx @@ -0,0 +1,172 @@ +import { CONNECTOR_DETAILS_TABS } from '../../constants/constants'; +import './ConnectorDetailsPage.css'; +import { ConnectorOverview } from './ConnectorOverview'; +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 { AppLayoutContext } from 'layout'; +import React, { useEffect, useState } from 'react'; +import { useHistory, useLocation } from 'react-router-dom'; +import { 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} + > + + + Edit connector config} + > + {actionConnectorName && ( + + )} + + {/* Incremental snapshot} + > + {actionConnectorName && connectorConfig['connector.id'] && ( + // + + + Coming soon + + + + )} + */} + + + + + ); +}; + +/** + * 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/ConnectorOverview.tsx b/ui/packages/ui/src/app/pages/connectorDetails/ConnectorOverview.tsx new file mode 100644 index 00000000..bae1a183 --- /dev/null +++ b/ui/packages/ui/src/app/pages/connectorDetails/ConnectorOverview.tsx @@ -0,0 +1,81 @@ +import { ConnectorExpandableView } from '../connectors/ConnectorExpandableView'; +import { + Card, + CardBody, + CardTitle, + Grid, + GridItem, + PageSection, + TextContent, + TextList, + TextListItem, + TextListItemVariants, + TextListVariants, +} from '@patternfly/react-core'; +import { AppLayoutContext } from 'layout'; +import React, { FC, Fragment } from 'react'; + +export type ConnectorOverviewProps = { + connectorConfiguration: Map; + connectorName: string; +}; +export const ConnectorOverview: FC = ({ + connectorConfiguration, + connectorName, +}) => { + const appLayoutContext = React.useContext(AppLayoutContext); + const clusterID = appLayoutContext.clusterId; + + + const textListItem = (title: string, value?: any) => ( + + {value && ( + <> + + {title} + + + {value} + + + )} + + ); + + return ( + + + + + Metrics + + + + + + Task + Coming soon + + + + + + Config + + + + {Object.entries(connectorConfiguration).map((list) => { + return textListItem(list[0], list[1]); + })} + + + + + + + + ); +}; 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 95% rename from ui/packages/ui/src/app/pages/editConnector/EditConnectorComponent.tsx rename to ui/packages/ui/src/app/pages/connectorDetails/EditConnectorComponent.tsx index cda4250f..32fedb45 100644 --- a/ui/packages/ui/src/app/pages/editConnector/EditConnectorComponent.tsx +++ b/ui/packages/ui/src/app/pages/connectorDetails/EditConnectorComponent.tsx @@ -6,6 +6,7 @@ import { FilterConfigStep, CustomPropertiesStep, } from '../createConnector/connectorSteps'; +import './EditConnectorComponent.css'; import { EditPropertiesStep } from './EditPropertiesStep'; import { EditTopicCreationStep } from './EditTopicCreationStep'; import { @@ -17,15 +18,8 @@ import { import { Services } from '@debezium/ui-services'; import { Button, - Breadcrumb, - BreadcrumbItem, - Level, - LevelItem, PageSection, PageSectionVariants, - TextContent, - Title, - TitleSizes, Tabs, Tab, TabTitleText, @@ -43,9 +37,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, @@ -64,22 +58,19 @@ import { } from 'shared'; import { getPropertiesDatawithDefaultConfig } from 'src/app/utils/FormatCosProperties'; -import './EditConnectorComponent.css'; - interface IValidationRef { validate: () => {}; } -type IOnSuccessCallbackFn = () => void; -type IOnCancelCallbackFn = () => void; export interface IEditConnectorComponentProps { - onSuccessCallback: IOnSuccessCallbackFn; - onCancelCallback: IOnCancelCallbackFn; + actionConnectorName: string; + connectorConfiguration: Map; } -export const EditConnectorComponent: React.FunctionComponent< - IEditConnectorComponentProps -> = () => { +export const EditConnectorComponent: FC = ({ + actionConnectorName, + connectorConfiguration, +}) => { const { t } = useTranslation(); const history = useHistory(); const [activeTabKey, setActiveTabKey] = React.useState(1); @@ -153,9 +144,6 @@ export const EditConnectorComponent: React.FunctionComponent< [key: string]: string; }>({}); - const { pathname } = useLocation(); - const actionConnectorName = pathname.replace(/^\/|\/$/g, ''); - const appLayoutContext = React.useContext(AppLayoutContext); const clusterID = appLayoutContext.clusterId; @@ -208,16 +196,9 @@ export const EditConnectorComponent: React.FunctionComponent< }, [alerts]); useEffect(() => { - const connectorService = Services.getConnectorService(); - fetch_retry(connectorService.getConnectorConfig, connectorService, [ - clusterID, - actionConnectorName, - ]) - .then((cConnector) => { - setConnectorConfig(cConnector); - }) - .catch((err: Error) => addAlert('danger', err?.message)); - }, [clusterID, actionConnectorName]); + !_.isEmpty(connectorConfiguration) && + setConnectorConfig(_.cloneDeep(connectorConfiguration)); + }, [clusterID, actionConnectorName, connectorConfiguration]); useEffect(() => { if (!_.isEmpty(connectorConfig)) { @@ -622,32 +603,10 @@ export const EditConnectorComponent: React.FunctionComponent< return ( <> - - - - Connectors - - {actionConnectorName} - - - - - - - {actionConnectorName} - - - - - - - + - + {activeTabKey === PROPERTIES_STEP_ID && selectedConnectorPropertyDefns.length !== 0 && ( @@ -979,7 +938,7 @@ export const EditConnectorComponent: React.FunctionComponent< - + <> {activeTabKey === PROPERTIES_STEP_ID || 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/editConnector/index.ts b/ui/packages/ui/src/app/pages/connectorDetails/index.ts similarity index 66% rename from ui/packages/ui/src/app/pages/editConnector/index.ts rename to ui/packages/ui/src/app/pages/connectorDetails/index.ts index e3f2f6c4..5654ca25 100644 --- a/ui/packages/ui/src/app/pages/editConnector/index.ts +++ b/ui/packages/ui/src/app/pages/connectorDetails/index.ts @@ -1,2 +1,3 @@ export * from './EditPropertiesStep'; export * from './EditConnectorComponent'; +export * from './ConnectorDetailsPage'; 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/ConnectorExpandableView.css similarity index 100% rename from ui/packages/ui/src/app/pages/connectors/ConnectorOverview.css rename to ui/packages/ui/src/app/pages/connectors/ConnectorExpandableView.css diff --git a/ui/packages/ui/src/app/pages/connectors/ConnectorOverview.tsx b/ui/packages/ui/src/app/pages/connectors/ConnectorExpandableView.tsx similarity index 91% rename from ui/packages/ui/src/app/pages/connectors/ConnectorOverview.tsx rename to ui/packages/ui/src/app/pages/connectors/ConnectorExpandableView.tsx index e1914edb..039e73dc 100644 --- a/ui/packages/ui/src/app/pages/connectors/ConnectorOverview.tsx +++ b/ui/packages/ui/src/app/pages/connectors/ConnectorExpandableView.tsx @@ -1,7 +1,7 @@ -import './ConnectorOverview.css'; +import './ConnectorExpandableView.css'; import { Metrics } from '@debezium/ui-models'; import { Services } from '@debezium/ui-services'; -import { Flex, FlexItem, Skeleton, Title } from '@patternfly/react-core'; +import { Flex, FlexItem, Skeleton } from '@patternfly/react-core'; import { CheckCircleIcon, ExclamationCircleIcon, @@ -37,7 +37,7 @@ const convertMillisecToTime = (millisec: number) => { /** * Component for display of Connector Overview */ -export const ConnectorOverview: React.FunctionComponent< +export const ConnectorExpandableView: React.FunctionComponent< IConnectorcOverviewProps > = (props) => { const { t } = useTranslation(); @@ -68,12 +68,12 @@ export const ConnectorOverview: React.FunctionComponent< return ( - + {/* <Title headingLevel="h3" size={'md'}> <b>{t('metrics')}</b> - + */} {connectorMetrics ? ( connectorMetrics.map((metrics) => ( -

+

{t(metrics.request.attribute)}:{' '} {metrics.request.attribute === 'MilliSecondsSinceLastEvent' ? ( convertMillisecToTime(metrics.value as number) diff --git a/ui/packages/ui/src/app/pages/connectors/ConnectorsTableComponent.tsx b/ui/packages/ui/src/app/pages/connectors/ConnectorsTableComponent.tsx index 8d6cf306..2a5bcf92 100644 --- a/ui/packages/ui/src/app/pages/connectors/ConnectorsTableComponent.tsx +++ b/ui/packages/ui/src/app/pages/connectors/ConnectorsTableComponent.tsx @@ -1,5 +1,4 @@ import { ConnectorDrawer } from './ConnectorDrawer'; -import { ConnectorOverview } from './ConnectorOverview'; import { ConnectorStatus } from './ConnectorStatus'; import { ConnectorTask } from './ConnectorTask'; import { ConnectorTaskState } from './ConnectorTaskState'; @@ -41,6 +40,7 @@ import { TableHeader, } from '@patternfly/react-table'; import { PageLoader, ToastAlertComponent, ConnectorIcon } from 'components'; +import { CONNECTOR_DETAILS_TABS } from '../../constants/constants'; import { AppLayoutContext } from 'layout'; import React, { SyntheticEvent, useCallback } from 'react'; import isEqual from 'react-fast-compare'; @@ -133,14 +133,33 @@ export const ConnectorsTableComponent: React.FunctionComponent< setCurrentActionConnector(''); }; + const goToConnectorOverview = useCallback( + (connName: string, connector?: any) => + history.push({ + pathname: `/${connName}`, + hash: `#${CONNECTOR_DETAILS_TABS.Overview}`, + }), + [history] + ); + const goToEditConnector = useCallback( (connName: string, connector?: any) => history.push({ pathname: `/${connName}`, + hash: `#${CONNECTOR_DETAILS_TABS.Configuration}`, }), [history] ); + // const goToIncrementalSnapshot = useCallback( + // (connName: string, connector?: any) => + // history.push({ + // pathname: `/${connName}`, + // hash: `#${CONNECTOR_DETAILS_TABS.IncrementalSnapshot}`, + // }), + // [history] + // ); + const setCurrentActionAndName = ( action: Action, connName: string, @@ -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} @@ -501,12 +519,7 @@ export const ConnectorsTableComponent: React.FunctionComponent< parent: counter, cells: [ { title:

{''}
}, - { title: ( - - ) }, + { title: <> }, { title:
{''}
, }, @@ -570,6 +583,9 @@ export const ConnectorsTableComponent: React.FunctionComponent< ? true : false, }, + { + isSeparator: true, + }, { title: t('view'), onClick: (event: any, rowId: any, rowData: any, extra: any) => { @@ -581,10 +597,7 @@ export const ConnectorsTableComponent: React.FunctionComponent< : false, }, { - isSeparator: true, - }, - { - title: t('Edit'), + title: 'Edit connector config', onClick: (event: any, rowId: any, rowData: any, extra: any) => { goToEditConnector(rowData.connName, rowData); }, @@ -593,6 +606,16 @@ export const ConnectorsTableComponent: React.FunctionComponent< ? true : false, }, + // { + // title: t('Incremental snapshot'), + // onClick: (event: any, rowId: any, rowData: any, extra: any) => { + // goToIncrementalSnapshot(rowData.connName, rowData); + // }, + // isDisabled: + // row.connStatus === 'UNASSIGNED' || row.connStatus === 'DESTROYED' + // ? true + // : false, + // }, { isSeparator: true, }, diff --git a/ui/packages/ui/src/app/pages/createConnector/CreateConnectorComponent.css b/ui/packages/ui/src/app/pages/createConnector/CreateConnectorComponent.css index bb900855..75dec072 100644 --- a/ui/packages/ui/src/app/pages/createConnector/CreateConnectorComponent.css +++ b/ui/packages/ui/src/app/pages/createConnector/CreateConnectorComponent.css @@ -1,6 +1,6 @@ .create-connector { &-page_breadcrumb { - padding-bottom: 0px !important; + padding: 10px !important; border-bottom: 1px solid var(--pf-global--BorderColor--100); .pf-l-level { .pf-c-content { @@ -8,11 +8,6 @@ } } } - .app-page-section-wrapper{ - padding-top: 0px; - padding-bottom: 0px; - } - &-page_wizard { height: auto; @@ -49,6 +44,10 @@ } } +.create-connector-page_main-section{ + padding: 10px !important; +} + .skipToNextInfoBox { width: 100%; margin-bottom: 40px; diff --git a/ui/packages/ui/src/app/pages/createConnector/CreateConnectorPage.tsx b/ui/packages/ui/src/app/pages/createConnector/CreateConnectorPage.tsx index f65dfa2f..fa42a82b 100644 --- a/ui/packages/ui/src/app/pages/createConnector/CreateConnectorPage.tsx +++ b/ui/packages/ui/src/app/pages/createConnector/CreateConnectorPage.tsx @@ -42,6 +42,7 @@ export const CreateConnectorPage: React.FunctionComponent = () => { Connectors @@ -59,15 +60,18 @@ export const CreateConnectorPage: React.FunctionComponent = () => { - -
- -
+ +
+ +
); diff --git a/ui/packages/ui/src/app/pages/createConnector/connectorSteps/CustomPropertiesStep.tsx b/ui/packages/ui/src/app/pages/createConnector/connectorSteps/CustomPropertiesStep.tsx index 93625fdc..495c3e7a 100644 --- a/ui/packages/ui/src/app/pages/createConnector/connectorSteps/CustomPropertiesStep.tsx +++ b/ui/packages/ui/src/app/pages/createConnector/connectorSteps/CustomPropertiesStep.tsx @@ -207,9 +207,10 @@ export const CustomPropertiesStep: React.FunctionComponent< }; return ( -
+ <> {properties.size === 0 ? ( - + + {t('customProperties')} @@ -226,6 +227,8 @@ export const CustomPropertiesStep: React.FunctionComponent< {t('configureCustomProperties')} </Button> </EmptyState> + </Bullseye> + ) : ( <> {!validationResult && ( @@ -391,6 +394,6 @@ export const CustomPropertiesStep: React.FunctionComponent< > {t('removeCustomPropertiesMsg')} </Modal> - </div> + </> ); }; 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..db151302 100644 --- a/ui/packages/ui/src/app/pages/createConnector/connectorSteps/PropertiesStep.tsx +++ b/ui/packages/ui/src/app/pages/createConnector/connectorSteps/PropertiesStep.tsx @@ -53,9 +53,6 @@ const FormSubmit: React.FunctionComponent<any> = React.forwardRef( export const PropertiesStep: React.FC<any> = 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/editConnector/EditConnectorComponent.css b/ui/packages/ui/src/app/pages/editConnector/EditConnectorComponent.css deleted file mode 100644 index 76596c3a..00000000 --- a/ui/packages/ui/src/app/pages/editConnector/EditConnectorComponent.css +++ /dev/null @@ -1,16 +0,0 @@ -.edit-footer{ - position: sticky; - bottom: 0; -} - -.edit-connector { - &-page_breadcrumb { - border-bottom: 1px solid var(--pf-global--BorderColor--100); - padding-bottom: 0px; - .pf-l-level { - .pf-c-content { - padding: 15px 0px; - } - } - } - } \ No newline at end of file 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..9ecc23dc 100644 --- a/ui/packages/ui/src/app/shared/routes.tsx +++ b/ui/packages/ui/src/app/shared/routes.tsx @@ -1,7 +1,7 @@ import { ConnectorsPage, CreateConnectorPage, - EditConnectorComponent, + ConnectorDetailsPage, } from '../pages'; import { RenderRoutes } from './RenderRoutes'; @@ -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/src/locales/en/public.json b/ui/packages/ui/src/locales/en/public.json index bce81a0a..99d8e02f 100644 --- a/ui/packages/ui/src/locales/en/public.json +++ b/ui/packages/ui/src/locales/en/public.json @@ -69,8 +69,8 @@ "alreadyConfiguredProperties": "Already configured properties", "customProperties": "Custom properties", "incorrectCustomProperties": "Applied custom properties does not pass the validation please update or remove.", - "configureCustomProperties": "Configure custom properties", - "customPropertiesDescription": "Configure the custom properties for the selected connector type.", + "configureCustomProperties": "Add custom properties", + "customPropertiesDescription": "Add additional configuration properties missing in the earlier steps for the selected connector type.", "removeCustomPropertiesMsg": "Click confirm to remove any custom properties.", "name": "Name", "status": "Status", diff --git a/ui/packages/ui/src/locales/it/public.json b/ui/packages/ui/src/locales/it/public.json index bc89744b..09426bcd 100644 --- a/ui/packages/ui/src/locales/it/public.json +++ b/ui/packages/ui/src/locales/it/public.json @@ -70,7 +70,7 @@ "customProperties": "Proprietà personalizzate", "incorrectCustomProperties": "Le proprietà personalizzate applicate non superano la convalida, aggiorna o rimuovi.", "configureCustomProperties": "Configura le proprietà personalizzate", - "customPropertiesDescription": "Configura le proprietà personalizzate per il tipo di connettore selezionato.", + "customPropertiesDescription": "Aggiungi ulteriori proprietà di configurazione mancanti nei passaggi precedenti per il tipo di connettore selezionato.", "removeCustomPropertiesMsg": "Fare clic su conferma per rimuovere eventuali proprietà personalizzate.", "name": "Nome", "status": "Stato", diff --git a/ui/packages/ui/src/locales/zh/public.json b/ui/packages/ui/src/locales/zh/public.json index 3a09b0b8..9bcc4b81 100644 --- a/ui/packages/ui/src/locales/zh/public.json +++ b/ui/packages/ui/src/locales/zh/public.json @@ -70,7 +70,7 @@ "customProperties": "自定义属性", "incorrectCustomProperties": "应用的自定义属性未通过验证请更新或删除。", "configureCustomProperties": "配置自定义属性", - "customPropertiesDescription": "为选定的连接器类型配置自定义属性。", + "customPropertiesDescription": "为所选连接器类型添加先前步骤中缺少的其他配置属性。", "removeCustomPropertiesMsg": "单击确认以删除任何自定义属性。", "name": "名称", "status": "状态", 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"],