DBZ-5326: incremental snapshot initial commit

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('<ConnectorOverview />', () => {
   const renderSetup = (props: IConnectorcOverviewProps) => {
-    return render(<ConnectorOverview {...props} />);
+    return render(<ConnectorExpandView {...props} />);
   };
 
   it('should render ConnectorOverview', () => {

ui/packages/ui/src/app/constants/constants.tsx

@@ -0,0 +1,5 @@
+export enum CONNECTOR_DETAILS_TABS {
+    Overview = 'overview',
+    Configuration = 'configuration',
+    IncrementalSnapshot = 'incrementalSnapshot',
+  }

ui/packages/ui/src/app/pages/editConnector/EditConnectorComponent.css → 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;
+    }
   }

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<string | number>(
+    getTab(hash)
+  );
+  const [connectorConfig, setConnectorConfig] = React.useState<
+    Map<string, string>
+  >(new Map<string, string>());
+
+  /**
+   * Toggle currently active tab
+   * @param _event
+   * @param tabIndex
+   */
+  const handleTabClick = (
+    _event: React.MouseEvent<HTMLElement, 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 (
+    <Stack>
+      <StackItem>
+        <PageSection
+          variant={PageSectionVariants.light}
+          className="connector-details-header"
+        >
+          <Breadcrumb>
+            <BreadcrumbItem to="/">Connectors</BreadcrumbItem>
+            <BreadcrumbItem isActive={true}>
+              {actionConnectorName}
+            </BreadcrumbItem>
+          </Breadcrumb>
+          <Level hasGutter={true}>
+            <LevelItem>
+              <TextContent>
+
+                <Title headingLevel="h3" size={TitleSizes['2xl']}>
+                {/* {connectorConfig['connector.id'] && (
+                    <ConnectorIcon
+                      connectorType={
+                        connectorConfig['connector.id'] === 'PostgreSQL'
+                          ? ConnectorTypeId.POSTGRES
+                          : connectorConfig['connector.id']
+                      }
+                      alt={actionConnectorName}
+                      width={30}
+                      height={30}
+                    />
+                  )}
+                  {`            ${actionConnectorName}`} */}
+                  {actionConnectorName}
+                </Title>
+              </TextContent>
+            </LevelItem>
+          </Level>
+        </PageSection>
+      </StackItem>
+      <StackItem isFilled>
+        <PageSection
+          variant={PageSectionVariants.light}
+          className="connector-details-content"
+          style={{ padding: '5px 5px 0 5px' }}
+        >
+          <Tabs activeKey={activeTabKey} onSelect={handleTabClick}>
+            <Tab
+              key={CONNECTOR_DETAILS_TABS.Overview}
+              eventKey={CONNECTOR_DETAILS_TABS.Overview}
+              title={<TabTitleText>Overview</TabTitleText>}
+            >
+              Overview
+            </Tab>
+            <Tab
+              key={CONNECTOR_DETAILS_TABS.Configuration}
+              eventKey={CONNECTOR_DETAILS_TABS.Configuration}
+              title={<TabTitleText>Configuration</TabTitleText>}
+            >
+              {actionConnectorName && (
+                <EditConnectorComponent
+                  actionConnectorName={actionConnectorName}
+                />
+              )}
+            </Tab>
+            <Tab
+              key={CONNECTOR_DETAILS_TABS.IncrementalSnapshot}
+              eventKey={CONNECTOR_DETAILS_TABS.IncrementalSnapshot}
+              title={<TabTitleText>Incremental snapshot</TabTitleText>}
+            >
+              {actionConnectorName && connectorConfig['connector.id'] && (
+                <IncrementalSnapshot
+                  actionConnectorName={actionConnectorName}
+                  connectorConfig={connectorConfig}
+                />
+              )}
+            </Tab>
+          </Tabs>
+        </PageSection>
+      </StackItem>
+    </Stack>
+  );
+};
+
+/**
+ * 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;
+};

ui/packages/ui/src/app/pages/connectorDetails/EditConnectorComponent.css

@@ -0,0 +1,4 @@
+.edit-footer{
+    position: sticky;
+    bottom: 0;
+}

ui/packages/ui/src/app/pages/editConnector/EditConnectorComponent.tsx → 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<number>(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 (
     <>
+
       <Stack>
-        <StackItem>
+        {/* <StackItem>
           <PageSection
             variant={PageSectionVariants.light}
             className="edit-connector-page_breadcrumb"
@@ -643,7 +638,7 @@ export const EditConnectorComponent: React.FunctionComponent<
               </LevelItem>
             </Level>
           </PageSection>
-        </StackItem>
+        </StackItem> */}
         <StackItem isFilled>
           <PageSection variant={PageSectionVariants.light}>
             <Grid>

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;
+    }
+}