[DOP-24048] add transfer canvas on detail page

src/entities/transformation/constants.ts

@@ -0,0 +1,9 @@
+import { createContext } from 'react';
+
+import { ShowButtonsContextProps } from './types';
+
+const SHOW_BUTTONS_CONTEXT_INITIAL_VALUE: ShowButtonsContextProps = {
+  isDisplayed: true,
+};
+
+export const ShowButtonsContext = createContext<ShowButtonsContextProps>(SHOW_BUTTONS_CONTEXT_INITIAL_VALUE);

src/entities/transformation/hooks/index.ts

@@ -0,0 +1 @@
+export * from './useShowButtons';

src/entities/transformation/hooks/useShowButtons/index.ts

@@ -0,0 +1,5 @@
+import { useContext } from 'react';
+
+import { ShowButtonsContext } from '../../constants';
+
+export const useShowButtons = () => useContext(ShowButtonsContext);

src/entities/transformation/index.ts

@@ -1,3 +1,5 @@
 export * from './types';
 export * from './utils';
 export * from './ui';
+export * from './constants';
+export * from './hooks';

src/entities/transformation/types.ts

@@ -117,3 +117,7 @@ export interface TransformationsForm {
 
 export type TransformationsFormNestedType<T extends keyof TransformationsForm> =
   Required<TransformationsForm>[T][number]['type'];
+
+export interface ShowButtonsContextProps {
+  isDisplayed: boolean;
+}

src/entities/transformation/ui/TransformationForm/TransformationForm.tsx

@@ -1,6 +1,7 @@
 import { Button, Form } from 'antd';
 import React, { memo, useLayoutEffect } from 'react';
 
+import { useShowButtons } from '../../hooks';
 import { Transformations, TransformationType } from '../../types';
 
 import { TransformationFormItem } from './components';
@@ -10,6 +11,8 @@ const TransformationFormComponent = <T extends TransformationType>({
   transformationType,
   ...props
 }: TransformationFormProps<T>) => {
+  const { isDisplayed } = useShowButtons();
+
   const formInstance = Form.useFormInstance();
   const filtersValues: Transformations[number]['filters'] | undefined = formInstance.getFieldValue([
     'transformations',
@@ -34,11 +37,11 @@ const TransformationFormComponent = <T extends TransformationType>({
               {...field}
               {...props}
               transformationType={transformationType}
-              onRemove={field.name ? remove : undefined}
+              onRemove={field.name && isDisplayed ? remove : undefined}
               key={field.key}
             />
           ))}
-          <Button className="nodrag" size="large" type="primary" onClick={() => add()}>
+          <Button className="nodrag" size="large" type="primary" onClick={() => add()} hidden={!isDisplayed}>
             Add item
           </Button>
         </div>

src/features/transfer/MutateTransferForm/components/TransferConnectionsCanvas/TransferConnectionsCanvas.tsx

@@ -1,8 +1,8 @@
 import React, { useMemo } from 'react';
 import { Canvas } from '@shared/ui';
-import { ReactFlowProvider, useEdgesState, useNodesState } from '@xyflow/react';
+import { ReactFlowProvider } from '@xyflow/react';
 import { Form } from 'antd';
-import { TransformationsForm, TransformationType } from '@entities/transformation';
+import { ShowButtonsContext, TransformationsForm, TransformationType } from '@entities/transformation';
 
 import { TransformButtons } from '../TransformButtons';
 
@@ -13,7 +13,7 @@ import classes from './styles.module.less';
 
 import '@xyflow/react/dist/style.css';
 
-export const TransferConnectionsCanvas = ({ groupId }: TransferCanvasProps) => {
+export const TransferConnectionsCanvas = ({ groupId, isDisplayedButtons = true }: TransferCanvasProps) => {
   const formInstance = Form.useFormInstance();
 
   const initialTransformations = useMemo(() => {
@@ -33,25 +33,15 @@ export const TransferConnectionsCanvas = ({ groupId }: TransferCanvasProps) => {
     return getInitialEdges(initialNodes);
   }, [initialNodes]);
 
-  // setNodes and setEdges will not be used
-  // eslint-disable-next-line
-  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
-  // eslint-disable-next-line
-  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
-
   return (
-    <ReactFlowProvider>
-      <div className={classes.root}>
-        <Canvas
-          nodeTypes={NODE_TYPES}
-          nodes={nodes}
-          edges={edges}
-          onNodesChange={onNodesChange}
-          onEdgesChange={onEdgesChange}
-        >
-          <TransformButtons />
-        </Canvas>
-      </div>
-    </ReactFlowProvider>
+    <ShowButtonsContext.Provider value={{ isDisplayed: isDisplayedButtons }}>
+      <ReactFlowProvider>
+        <div className={classes.root}>
+          <Canvas nodeTypes={NODE_TYPES} initialNodes={initialNodes} initialEdges={initialEdges}>
+            {isDisplayedButtons && <TransformButtons />}
+          </Canvas>
+        </div>
+      </ReactFlowProvider>
+    </ShowButtonsContext.Provider>
   );
 };

src/features/transfer/MutateTransferForm/components/TransferConnectionsCanvas/types.ts

@@ -6,7 +6,9 @@ import { TargetParamsNodeData } from '../TargetParamsNode';
 
 import { GetInitialNodesProps } from './utils';
 
-export interface TransferCanvasProps extends Pick<GetInitialNodesProps, 'groupId'> {}
+export interface TransferCanvasProps extends Pick<GetInitialNodesProps, 'groupId'> {
+  isDisplayedButtons?: boolean;
+}
 
 export type TransferCanvasNodeData =
   | SourceParamsNodeData

src/features/transfer/MutateTransferForm/components/index.ts

@@ -3,3 +3,4 @@ export * from './TargetParams';
 export * from './TransferSchedule';
 export * from './TransferConnections';
 export * from './StrategyParams';
+export * from './TransferConnectionsCanvas';

src/features/transfer/MutateTransferForm/index.ts

@@ -0,0 +1,2 @@
+export * from './MutateTransferForm';
+export { TransferConnectionsCanvas } from './components';

src/features/transfer/TransferDetailInfo/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
 import { Descriptions } from 'antd';
 import { Link } from 'react-router-dom';
 import { CronService } from '@shared/services';
@@ -13,8 +13,9 @@ export const TransferDetailInfo = ({
   connectionSource,
   connectionTarget,
   queue,
+  children,
   ...props
-}: TransferDetailInfoProps) => {
+}: PropsWithChildren<TransferDetailInfoProps>) => {
   return (
     <div className={classes.root}>
       <Descriptions title="Transfer info" bordered {...props}>
@@ -54,6 +55,7 @@ export const TransferDetailInfo = ({
           <TransferParams data={transfer.target_params} />
         </Descriptions.Item>
       </Descriptions>
+      {children}
     </div>
   );
 };

src/shared/ui/Canvas/index.tsx

@@ -1,12 +1,34 @@
-import { Background, BackgroundVariant, Controls, Edge, MiniMap, Node, ReactFlow, useReactFlow } from '@xyflow/react';
+import {
+  Background,
+  BackgroundVariant,
+  Controls,
+  Edge,
+  MiniMap,
+  Node,
+  ReactFlow,
+  useEdgesState,
+  useNodesState,
+  useReactFlow,
+} from '@xyflow/react';
 import React, { useEffect } from 'react';
 
 import classes from './styles.module.less';
 import { CanvasProps } from './types';
 
-export const Canvas = <N extends Node, E extends Edge>({ children, nodes, ...props }: CanvasProps<N, E>) => {
+export const Canvas = <N extends Node, E extends Edge>({
+  initialNodes,
+  initialEdges,
+  children,
+  ...props
+}: CanvasProps<N, E>) => {
   const { fitView } = useReactFlow();
 
+  // setNodes and setEdges will not be used
+  // eslint-disable-next-line
+  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
+  // eslint-disable-next-line
+  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
+
   /** Set appropriate zoom of canvas when nodes count has changed */
   useEffect(() => {
     fitView({ duration: 200, padding: 0.4 });
@@ -20,6 +42,9 @@ export const Canvas = <N extends Node, E extends Edge>({ children, nodes, ...pro
       elementsSelectable
       nodesConnectable={false}
       nodes={nodes}
+      edges={edges}
+      onNodesChange={onNodesChange}
+      onEdgesChange={onEdgesChange}
       nodesDraggable
       panOnScroll={false}
       panOnDrag

src/shared/ui/Canvas/types.ts

@@ -1,3 +1,7 @@
 import { Edge, Node, ReactFlowProps } from '@xyflow/react';
 
-export interface CanvasProps<N extends Node, E extends Edge> extends ReactFlowProps<N, E> {}
+export interface CanvasProps<N extends Node, E extends Edge>
+  extends Omit<ReactFlowProps<N, E>, 'nodes' | 'edges' | 'onNodesChange' | 'onEdgesChange'> {
+  initialNodes: N[];
+  initialEdges: E[];
+}

src/widgets/transfer/TransferDetail/index.tsx

@@ -1,12 +1,17 @@
 import React from 'react';
 import { AccessWrapper, PageContentWrapper } from '@shared/ui';
-import { TransferDetailInfo } from '@features/transfer';
+import { TransferDetailInfo, TransferConnectionsCanvas } from '@features/transfer';
 import { UserRole } from '@shared/types';
+import { Form } from 'antd';
+import { prepareTransformationForm } from '@entities/transformation';
+import { Typography } from 'antd';
 
 import { TransferDetailProps } from './types';
 import { DeleteTransferButton, UpdateTransferButton } from './components';
 import classes from './styles.module.less';
 
+const { Text } = Typography;
+
 export const TransferDetail = ({ transfer, group, connectionSource, connectionTarget, queue }: TransferDetailProps) => {
   return (
     <PageContentWrapper>
@@ -24,7 +29,25 @@ export const TransferDetail = ({ transfer, group, connectionSource, connectionTa
             </div>
           </AccessWrapper>
         }
-      />
+      >
+        <div className={classes.advanced}>
+          <Text className={classes.subtitle} strong>
+            Transfer advanced info
+          </Text>
+          <Form
+            className={classes.form}
+            layout="vertical"
+            requiredMark={false}
+            initialValues={{
+              ...transfer,
+              transformations: prepareTransformationForm(transfer.transformations),
+            }}
+            disabled
+          >
+            <TransferConnectionsCanvas groupId={group.data.id} isDisplayedButtons={false} />
+          </Form>
+        </div>
+      </TransferDetailInfo>
     </PageContentWrapper>
   );
 };

src/widgets/transfer/TransferDetail/styles.module.less

@@ -3,3 +3,31 @@
   align-items: center;
   gap: 16px;
 }
+
+.advanced {
+  display: flex;
+  flex-direction: column;
+  margin-top: 8px;
+
+  .subtitle {
+    font-size: 16px;
+  }
+
+  .form {
+    :global(.ant-select-selector) {
+      color: @text-color !important;
+    }
+
+    :global(.ant-input) {
+      color: @text-color !important;
+    }
+
+    :global(.ant-input-number-input) {
+      color: @text-color !important;
+    }
+
+    :global(.ant-radio + span) {
+      color: @text-color !important;
+    }
+  }
+}