first commit

webapp/packages/supersonic-fe/src/pages/SemanticModel/Datasource/index.tsx

@@ -0,0 +1,68 @@
+import React, { useState, useEffect } from 'react';
+import SplitPane from 'react-split-pane';
+import SqlSide from './components/SqlSide';
+import Pane from 'react-split-pane/lib/Pane';
+import styles from './style.less';
+import { RightOutlined, LeftOutlined } from '@ant-design/icons';
+
+type Props = {
+  initialValues: any;
+  domainId: number;
+  onSubmitSuccess?: (dataSourceInfo: any) => void;
+};
+
+const DEFAULT_RIGHT_SIZE = '300px';
+
+const DataExploreView: React.FC<Props> = ({ initialValues, domainId, onSubmitSuccess }) => {
+  const [collapsed, setCollapsed] = useState(false);
+
+  useEffect(() => {
+    const exploreRightCollapsed = localStorage.getItem('exploreRightCollapsed');
+    setCollapsed(exploreRightCollapsed === 'true');
+  }, []);
+
+  const onCollapse = () => {
+    const collapsedValue = !collapsed;
+    setCollapsed(collapsedValue);
+    localStorage.setItem('exploreRightCollapsed', String(collapsedValue));
+    const exploreRightSize = collapsedValue ? '0px' : localStorage.getItem('exploreRightSize');
+    const sizeValue = parseInt(exploreRightSize || '0');
+    if (!collapsedValue && sizeValue <= 10) {
+      localStorage.setItem('exploreRightSize', DEFAULT_RIGHT_SIZE);
+    }
+  };
+
+  return (
+    <div
+      className={`${styles.pageContainer} ${
+        window.location.hash.includes('external') ? styles.externalPageContainer : ''
+      }`}
+    >
+      <div className={styles.main}>
+        <SplitPane
+          split="vertical"
+          onChange={(size) => {
+            localStorage.setItem('exploreRightSize', size[1]);
+          }}
+        >
+          <div className={styles.rightListSide}>
+            {false && (
+              <div className={styles.collapseRightBtn} onClick={onCollapse}>
+                {collapsed ? <LeftOutlined /> : <RightOutlined />}
+              </div>
+            )}
+            <SqlSide
+              initialValues={initialValues}
+              domainId={domainId}
+              onSubmitSuccess={onSubmitSuccess}
+            />
+          </div>
+
+          <Pane initialSize={0} />
+        </SplitPane>
+      </div>
+    </div>
+  );
+};
+
+export default DataExploreView;