use panel layout component

cdapio · Nov 20, 2024 · e107f4b · e107f4b
1 parent 678d987
commit e107f4b
Show file tree

Hide file tree

Showing 15 changed files with 292 additions and 98 deletions.
diff --git a/app/cdap/components/StudioV2/CreatePipelineView/DAGNodes.tsx b/app/cdap/components/StudioV2/CreatePipelineView/DAGNodes.tsx
@@ -25,6 +25,11 @@ import {
 } from 'components/hydrator/components/SidePanel/helpers';
 import { Button, IconButton } from '@material-ui/core';
 import MenuIcon from '@material-ui/icons/Menu';
+import { setActiveNodeId } from '../store/nodes/actions';
+import {
+  setMetricsTabActive,
+  setSelectedPlugin,
+} from 'services/PipelineMetricsStore/ActionCreator';
 
 const targetHandleStyle = {};
 const sourceHandleStyle = {
@@ -176,7 +181,22 @@ export function PipelineNode({ id, data, selected }: NodeProps) {
   const node = data.pluginNode;
   const hasCustomIcon = shouldShowCustomIcon(node.plugin, pluginsMap);
 
-  console.log(data, hasCustomIcon, pluginsMap);
+  // console.log(data, hasCustomIcon, pluginsMap);
+  function resetActiveNodeForComment() {
+    // TODO: Add logic here
+  }
+
+  function closeMetricsPopover(node) {
+    // TODO: Add logic here
+  }
+
+  function onPropertiesClick() {
+    resetActiveNodeForComment();
+    closeMetricsPopover(node);
+    setMetricsTabActive(false);
+    setSelectedPlugin(node.type, node.plugin.name);
+    setActiveNodeId(node.name);
+  }
 
   return (
     <>
@@ -208,7 +228,7 @@ export function PipelineNode({ id, data, selected }: NodeProps) {
             </PluginMetaContainer>
           </NodeInfoContainer>
           <NodeButtonsContainer>
-            <Button variant="text" color="primary" size="medium">
+            <Button variant="text" color="primary" size="medium" onClick={onPropertiesClick}>
               PROPERTIES
             </Button>
             <IconButton size="small">

diff --git a/app/cdap/components/StudioV2/CreatePipelineView/LeftPanelV2.tsx b/app/cdap/components/StudioV2/CreatePipelineView/LeftPanelV2.tsx
@@ -15,10 +15,24 @@
  */
 
 import React, { useEffect } from 'react';
+import styled from 'styled-components';
 import { useSelector } from 'react-redux';
 import { LeftPanel } from 'components/hydrator/components/LeftPanel/LeftPanel';
 import { fetchSystemArtifacts, setSelectedArtifact } from '../store/common/actions';
 import { useLeftPanelController } from './useLeftPanel';
+import { usePanelCollapseController } from 'components/layouts/SectionWithPanel';
+
+const ScrollableDiv = styled.div`
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+`;
 
 // @ts-ignore
 function noop() {}
@@ -37,19 +51,31 @@ export default function LeftPanelV2() {
   // console.log(artifacts || 'hello');
   // console.log({ pluginsMap });
 
+  const { isCollapsed, collapse, expand } = usePanelCollapseController();
+  function handleToggleExpanded() {
+    if (isCollapsed()) {
+      expand();
+    } else {
+      collapse();
+    }
+  }
+
   return (
-    <LeftPanel
-      onArtifactChange={onArtifactChange}
-      pluginsMap={pluginsMap}
-      selectedArtifact={selectedArtifact}
-      artifacts={artifacts}
-      itemGenericName="plugins"
-      groups={pluginsMap}
-      groupGenericName="artifacts"
-      onPanelItemClick={onItemClicked}
-      isEdit={false}
-      createPluginTemplate={createPluginTemplate}
-      isV2={true}
-    />
+    <ScrollableDiv>
+      <LeftPanel
+        onArtifactChange={onArtifactChange}
+        pluginsMap={pluginsMap}
+        selectedArtifact={selectedArtifact}
+        artifacts={artifacts}
+        itemGenericName="plugins"
+        groups={pluginsMap}
+        groupGenericName="artifacts"
+        onPanelItemClick={onItemClicked}
+        isEdit={false}
+        createPluginTemplate={createPluginTemplate}
+        isV2={true}
+        toggleExpanded={handleToggleExpanded}
+      />
+    </ScrollableDiv>
   );
 }
diff --git a/app/cdap/components/StudioV2/CreatePipelineView/RightPanel.tsx b/app/cdap/components/StudioV2/CreatePipelineView/RightPanel.tsx
@@ -0,0 +1,30 @@
+/*
+ * Copyright © 2024 Cask Data, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+
+import React from 'react';
+import { useSelector } from 'react-redux';
+
+export default function RightPanel() {
+  const uiState = useSelector((state) => state.uiState);
+  const { rightPanelToRender, rightPanelOnClose } = uiState;
+
+  return (
+    <div>
+      {rightPanelToRender}
+      <button onClick={rightPanelOnClose}>close</button>
+    </div>
+  );
+}
diff --git a/app/cdap/components/StudioV2/CreatePipelineView/index.tsx b/app/cdap/components/StudioV2/CreatePipelineView/index.tsx
@@ -25,6 +25,8 @@ import LeftPanelV2 from './LeftPanelV2';
 import StudioV2Store from '../store';
 import StudioModalsManager from '../modals/StudioModalsManager';
 import { ReactFlowProvider } from 'reactflow';
+import SectionWithPanel from 'components/layouts/SectionWithPanel';
+import RightPanel from './RightPanel';
 
 // @ts-ignore
 function noop() {}
@@ -62,76 +64,89 @@ export default function CreatePipelineView() {
   return (
     <Provider store={StudioV2Store}>
       <CanvasWrapper className="react-version">
-        <LeftPanelWrapper>
-          <LeftPanelV2 />
-        </LeftPanelWrapper>
-        <RightWrapper>
-          <TopPanel
-            state={{
-              metadata: {
-                description: 'some pipeline desc',
-                name: 'some_pipeline',
-              },
-              artifact: {
-                name: 'cdap-data-pipeline',
-                scope: 'SYSTEM',
-                version: '6.11.0-SNAPSHOT',
-              },
-              viewSettings: false,
-            }}
-            globals={{
-              etlRealtime: 'cdap-data-streams',
-              etlDataStreams: 'cdap-data-streams',
-              etlBatchPipelines: [],
-            }}
-            previewMode={false}
-            previewEnabled={false}
-            togglePreviewMode={noop}
-            toggleConfig={noop}
-            toggleScheduler={noop}
-            closeScheduler={noop}
-            viewConfig={false}
-            showSchedule={false}
-            viewScheduler={false}
-            hasNodes={false}
-            onSaveDraft={noop}
-            onPublish={noop}
-            onImport={noop}
-            onFileSelect={noop}
-            onExport={noop}
-            onClickLogs={noop}
-            previewLoading={false}
-            previewRunning={false}
-            startOrStopPreview={noop}
-            queueStatus=""
-            displayDuration={{ minutes: '', seconds: '' }}
-            loadingLabel=""
-            currentPreviewId=""
-            viewLogs={false}
-            onCloseLog={noop}
-            timerLabel=""
-            namespace="default"
-            getScheduleInfo={getSchedulerInfo}
-            actionCreator={true}
-            applyRuntimeArguments={noop}
-            applyBatchConfig={noop}
-            applyRealtimeConfig={noop}
-            getPostActions={getPostActions}
-            validatePluginProperties={noop}
-            getRuntimeArgs={noop}
-            getStoreConfig={noop}
-            getConfigForExport={getConfigForExport}
-            isEdit={false}
-            saveChangeSummary={noop}
-            getParentVersion={noop}
-            stateParams={{}}
-          />
-          <DagWrapper id="dag-wrapper">
-            <ReactFlowProvider>
-              <DagComponent />
-            </ReactFlowProvider>
-          </DagWrapper>
-        </RightWrapper>
+        <SectionWithPanel
+          opensFrom="left"
+          defaultSize={270}
+          collapsedSize={190}
+          panel={<LeftPanelV2 />}
+        >
+          <SectionWithPanel
+            opensFrom="right"
+            defaultSize={640}
+            collapsedSize={1}
+            resizable
+            isInitiallyCollapsed={true}
+            panel={<RightPanel />}
+          >
+            <RightWrapper>
+              <TopPanel
+                state={{
+                  metadata: {
+                    description: 'some pipeline desc',
+                    name: 'some_pipeline',
+                  },
+                  artifact: {
+                    name: 'cdap-data-pipeline',
+                    scope: 'SYSTEM',
+                    version: '6.11.0-SNAPSHOT',
+                  },
+                  viewSettings: false,
+                }}
+                globals={{
+                  etlRealtime: 'cdap-data-streams',
+                  etlDataStreams: 'cdap-data-streams',
+                  etlBatchPipelines: [],
+                }}
+                previewMode={false}
+                previewEnabled={false}
+                togglePreviewMode={noop}
+                toggleConfig={noop}
+                toggleScheduler={noop}
+                closeScheduler={noop}
+                viewConfig={false}
+                showSchedule={false}
+                viewScheduler={false}
+                hasNodes={false}
+                onSaveDraft={noop}
+                onPublish={noop}
+                onImport={noop}
+                onFileSelect={noop}
+                onExport={noop}
+                onClickLogs={noop}
+                previewLoading={false}
+                previewRunning={false}
+                startOrStopPreview={noop}
+                queueStatus=""
+                displayDuration={{ minutes: '', seconds: '' }}
+                loadingLabel=""
+                currentPreviewId=""
+                viewLogs={false}
+                onCloseLog={noop}
+                timerLabel=""
+                namespace="default"
+                getScheduleInfo={getSchedulerInfo}
+                actionCreator={true}
+                applyRuntimeArguments={noop}
+                applyBatchConfig={noop}
+                applyRealtimeConfig={noop}
+                getPostActions={getPostActions}
+                validatePluginProperties={noop}
+                getRuntimeArgs={noop}
+                getStoreConfig={noop}
+                getConfigForExport={getConfigForExport}
+                isEdit={false}
+                saveChangeSummary={noop}
+                getParentVersion={noop}
+                stateParams={{}}
+              />
+              <DagWrapper id="dag-wrapper">
+                <ReactFlowProvider>
+                  <DagComponent />
+                </ReactFlowProvider>
+              </DagWrapper>
+            </RightWrapper>
+          </SectionWithPanel>
+        </SectionWithPanel>
         <AuthRefresher />
       </CanvasWrapper>
       <StudioModalsManager />