[WIP] Migrate hydrator

app/cdap/api/artifact.js

@@ -20,6 +20,7 @@ let dataSrc = DataSourceConfigurer.getInstance();
 const basepath = '/namespaces/:namespace/artifacts';
 const baseArtifactPath = basepath + '/:artifactId/versions/:version';
 const basePluginArtifactJSON = baseArtifactPath + '/properties';
+const extensionsBasePath = `${basepath}/:pipelineType/versions/:version/extensions`;
 
 export const MyArtifactApi = {
   get: apiCreator(dataSrc, 'GET', 'REQUEST', baseArtifactPath),
@@ -39,6 +40,7 @@ export const MyArtifactApi = {
   delete: apiCreator(dataSrc, 'DELETE', 'REQUEST', baseArtifactPath),
   loadPluginConfiguration: apiCreator(dataSrc, 'PUT', 'REQUEST', basePluginArtifactJSON),
   list: apiCreator(dataSrc, 'GET', 'REQUEST', basepath),
+  listScopedArtifacts: apiCreator(dataSrc, 'GET', 'REQUEST', `${basepath}?scope=:scope`),
   reloadSystemArtifacts: apiCreator(dataSrc, 'POST', 'REQUEST', '/namespaces/system/artifacts'),
   fetchPluginDetails: apiCreator(
     dataSrc,
@@ -58,4 +60,5 @@ export const MyArtifactApi = {
     'REQUEST',
     '/namespaces/:namespace/artifacts/:artifactName?scope=:scope'
   ),
+  fetchExtensions: apiCreator(dataSrc, 'GET', 'REQUEST', `${extensionsBasePath}?scope=system`),
 };

app/cdap/api/pipeline.js

@@ -36,8 +36,9 @@ const extensionsFetchBase =
   '/namespaces/:namespace/artifacts/:pipelineType/versions/:version/extensions';
 const pluginFetchBase = `${extensionsFetchBase}/:extensionType`;
 const pluginsFetchPath = `${pluginFetchBase}?scope=system`;
-var pipelineV1AppPath = '/namespaces/system/apps/pipeline/services/studio/methods/v1';
-var pipelineV1AppContextPath = `${pipelineV1AppPath}/contexts/:context`;
+const pipelineV1AppPath = '/namespaces/system/apps/pipeline/services/studio/methods/v1';
+const pipelineV1AppContextPath = `${pipelineV1AppPath}/contexts/:context`;
+const allArtifactPropertiesPath = '/namespaces/:namespace/artifactproperties';
 
 export const MyPipelineApi = {
   list: apiCreator(dataSrc, 'GET', 'REQUEST', '/namespaces/:namespace/apps'),
@@ -80,4 +81,13 @@ export const MyPipelineApi = {
   ),
 
   getAppVersions: apiCreator(dataSrc, 'GET', 'REQUEST', `${basepath}/versions`),
+
+  fetchExtensions: apiCreator(dataSrc, 'GET', 'REQUEST', `${extensionsFetchBase}?scope=system`),
+  fetchAllPluginsProperties: apiCreator(dataSrc, 'POST', 'REQUEST', allArtifactPropertiesPath),
+  fetchPluginProperties: apiCreator(
+    dataSrc,
+    'POST',
+    'REQUEST',
+    `${pluginFetchBase}/plugins/:pluginName?scope=system`
+  ),
 };

app/cdap/api/settings.js

@@ -0,0 +1,27 @@
+/*
+ * 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 DataSourceConfigurer from 'services/datasource/DataSourceConfigurer';
+import { apiCreator } from 'services/resource-helper';
+
+const dataSrc = DataSourceConfigurer.getInstance();
+const basePath = '/namespaces/:namespace/configuration';
+const userSettingsPath = `${basePath}/user`;
+
+export const SettingsApi = {
+  getUserSettings: apiCreator(dataSrc, 'GET', 'REQUEST', `${userSettingsPath}`),
+  updateUserSettings: apiCreator(dataSrc, 'PUT', 'REQUEST', `${userSettingsPath}`),
+};

app/cdap/components/FooterContext/index.ts

@@ -0,0 +1,41 @@
+/*
+ * 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 { createContext, useContext, useEffect } from 'react';
+
+interface IFooterContext {
+  show: boolean;
+  setShow(val?: boolean): void;
+}
+
+export const FooterContext = createContext<IFooterContext>({
+  show: true,
+  setShow() {
+    return;
+  },
+});
+
+export function useHideFooterInPage() {
+  const { setShow } = useContext(FooterContext);
+
+  useEffect(() => {
+    setShow(false);
+
+    return () => setShow(true);
+  }, []);
+
+  return setShow;
+}

app/cdap/components/Home/index.js

@@ -27,6 +27,10 @@ import ToggleExperiment from 'components/Lab/ToggleExperiment';
 import ee from 'event-emitter';
 require('./Home.scss');
 
+const StudioV2 = Loadable({
+  loader: () => import(/* webpackChunkName: "StudioV2" */ 'components/StudioV2'),
+  loading: LoadingSVGCentered,
+});
 const EntityListView = Loadable({
   loader: () => import(/* webpackChunkName: "EntityListView" */ 'components/EntityListView'),
   loading: LoadingSVGCentered,
@@ -144,6 +148,7 @@ export default class Home extends Component {
         <Switch>
           <Route exact path="/ns/:namespace" component={HomeActions} />
           <Route exact path="/ns/:namespace/control" component={EntityListView} />
+          <Route path="/ns/:namespace/studio" component={StudioV2} />
           <Route
             exact
             path="/ns/:namespace/datasets/:datasetId/fields"

app/cdap/components/StudioV2/CreatePipelineView/DAGEdges.tsx

@@ -0,0 +1,163 @@
+/*
+ * 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, { useEffect, useMemo, useRef } from 'react';
+import {
+  BaseEdge,
+  ConnectionLineComponentProps,
+  EdgeProps,
+  Position,
+  getSimpleBezierPath,
+  getSmoothStepPath,
+} from 'reactflow';
+import { cartesianDistance } from '../utils/geometry';
+
+const END_MARKER_PREFIX = 'cdap-dag-edge-end-marker';
+const EDGE_BORDER_RADIUS = 20;
+
+const EndMarkers = {
+  FILLED_TRIANGLE: `${END_MARKER_PREFIX}-traiangular-filled`,
+  FILLED_TRIANGLE_SELECTED: `${END_MARKER_PREFIX}-traiangular-filled-selected`,
+};
+
+const endMarkersSvg = `
+<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <marker
+      id="${EndMarkers.FILLED_TRIANGLE}"
+      viewBox="0 0 5 5"
+      refX="4"
+      refY="2.5"
+      markerUnits="strokeWidth"
+      markerWidth="5"
+      markerHeight="5"
+      orient="auto">
+      <path d="M 0 0 L 5 2.5 L 0 5 z" fill="#b1b1b7"/>
+    </marker>
+
+    <marker
+      id="${EndMarkers.FILLED_TRIANGLE_SELECTED}"
+      viewBox="0 0 6 6"
+      refX="5"
+      refY="3"
+      markerUnits="strokeWidth"
+      markerWidth="6"
+      markerHeight="6"
+      orient="auto">
+      <path d="M 0 0 L 6 3 L 0 6 z" fill="#000"/>
+    </marker>
+  </defs>
+</svg>
+`;
+
+function appendMarkersSvg() {
+  const markers = Array.from(document.querySelectorAll(`marker[id*="${END_MARKER_PREFIX}"]`));
+  if (!markers.length) {
+    const svgWrapperEl = document.createElement('div');
+    svgWrapperEl.innerHTML = endMarkersSvg;
+    document.body.appendChild(svgWrapperEl);
+  }
+}
+
+function getEdgePath(
+  sourceX: number,
+  sourceY: number,
+  sourcePosition: Position,
+  targetX: number,
+  targetY: number,
+  targetPosition: Position,
+  inProgress: boolean = false
+) {
+  const distX = Math.abs(targetX - sourceX);
+  const distY = Math.abs(targetY - sourceY);
+  if (inProgress && distX < EDGE_BORDER_RADIUS && distY < 2 * EDGE_BORDER_RADIUS) {
+    return getSimpleBezierPath({
+      sourceX,
+      sourceY,
+      sourcePosition,
+      targetX,
+      targetY,
+      targetPosition,
+    });
+  }
+
+  return getSmoothStepPath({
+    sourceX,
+    sourceY,
+    sourcePosition,
+    targetX,
+    targetY,
+    targetPosition,
+    borderRadius: EDGE_BORDER_RADIUS,
+  });
+}
+
+export function StandardEdge({ id, sourceX, sourceY, targetX, targetY, selected }: EdgeProps) {
+  const [path] = getEdgePath(sourceX, sourceY, Position.Right, targetX, targetY, Position.Left);
+
+  useEffect(() => {
+    appendMarkersSvg();
+  }, []);
+
+  let markerEnd = selected
+    ? `url(#${EndMarkers.FILLED_TRIANGLE_SELECTED})`
+    : `url(#${EndMarkers.FILLED_TRIANGLE})`;
+  if (Math.abs(targetX - sourceX) < EDGE_BORDER_RADIUS) {
+    markerEnd = '';
+  }
+
+  return <BaseEdge id={id} path={path} markerEnd={markerEnd} />;
+}
+
+export function EdgeInProgress({
+  fromX,
+  fromY,
+  toX,
+  toY,
+  fromPosition,
+  toPosition,
+}: ConnectionLineComponentProps) {
+  const pathRef = useRef<SVGPathElement>(null);
+  const [path] = useMemo(
+    () => getEdgePath(fromX, fromY, fromPosition, toX, toY, toPosition, true),
+    [fromX, fromY, toX, toY, toPosition]
+  );
+
+  useEffect(() => {
+    if (pathRef.current) {
+      pathRef.current.setAttribute('d', path);
+    }
+  }, [path, pathRef.current]);
+
+  useEffect(() => {
+    appendMarkersSvg();
+  }, []);
+
+  return (
+    <path
+      d={path}
+      fill="none"
+      markerEnd={`url(#${EndMarkers.FILLED_TRIANGLE})`}
+      className="react-flow__edge-path"
+      ref={pathRef}
+    />
+  );
+}
+
+export const EDGE_TYPES = {
+  default: StandardEdge,
+  standard: StandardEdge,
+};