@devops-flow/devops-flow-pipeline-detail 0.0.37

package/es/components/PipelineFlowEdit/UIEditor-deprecated/UIEditor.js

@@ -0,0 +1,559 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useRef, useMemo, useState, useLayoutEffect, useCallback } from "react";
+import ReactDOM, { unstable_batchedUpdates } from "react-dom";
+import AutoSizer from "react-virtualized-auto-sizer";
+import { JobCard } from "./JobCard/JobCard";
+import SourceCard from "./SourceCard";
+import { PipelineRunGraph } from "../../PipelineGraph/PipelineRunGraph";
+import { getStagesConnectNodes } from "../../PipelineGraph/PipelineDAG";
+import PipelineCanvas, { CanvasEntity } from "../../PipelineGraph/PipelineCanvas";
+import { clog } from "../../../utils/debug";
+import { Rect } from "../../PipelineGraph/Rect";
+// import { StageConnector } from 'components/PipelineGraph/PipelineJobs';
+import { viewPortCanavsRender as _viewPortCanavsRender } from "./viewPortRender";
+import SourceWrapper from "./SourceCard/SourceWrapper";
+import { TaskTpl } from "./TaskTpl";
+import YAML from "js-yaml";
+import { setJobsTpl } from "../../pipeline/new/buildPipeline";
+import { JobDrawer } from "./JobDrawer";
+import { Dialog } from "@teamix/ui";
+import { SYMBOL_ID } from "../const";
+import produce from "immer";
+import { flatten } from "lodash-es";
+import utils from "../../../utils";
+import { EmptySource } from "./SourceCard/EmptySource";
+import intl from "../../../locale";
+function UIEditor(props) {
+  var _findJobByEntryId;
+  var flow = props.flow,
+    onFlowChange = props.onFlowChange,
+    flowHistory = props.flowHistory;
+  var stages = flow.stages;
+  var graphRef = useRef(null);
+  var _useState = useState(false),
+    showTaskTpl = _useState[0],
+    setShowTaskTpl = _useState[1];
+  var _useState2 = useState(null),
+    graphState = _useState2[0],
+    setGraphState = _useState2[1];
+  var _useState3 = useState(""),
+    updateFlag = _useState3[0],
+    setUpdateFlag = _useState3[1];
+  var _React$useState = React.useState(null),
+    activeItems = _React$useState[0],
+    setActiveItems = _React$useState[1];
+  var onCardHover = useCallback(function (nodeId) {
+    var nodes = graphRef.current.getHighlightNodesAndEdgesById(nodeId);
+    setActiveItems(nodes);
+  }, []);
+  var onCardLeave = useCallback(function () {
+    setActiveItems(null);
+  }, []);
+  var _useState4 = useState(
+    // dbg
+    null
+    // flow.stages[0].value.jobs[1][SYMBOL_ID],
+    ),
+    showingJobEntryId = _useState4[0],
+    setShowingJobEntryId = _useState4[1];
+  var jobsByStage = stages.map(function (_ref) {
+    var stageId = _ref.id,
+      value = _ref.value;
+    var jobs = value.jobs.map(function (job) {
+      var rt = {
+        id: job[SYMBOL_ID],
+        dependsOn: flatten([job.value.needs].filter(Boolean)).map(function (need) {
+          if (need.includes(".")) {
+            var _need$split = need.split("."),
+              needStageId = _need$split[0],
+              needJobId = _need$split[1];
+            var needStage = stages.find(function (stage) {
+              return stage.id === needStageId;
+            });
+            return needStage.value.jobs.find(function (job) {
+              return job.id === needJobId;
+            })[SYMBOL_ID];
+          } else {
+            return value.jobs.find(function (job) {
+              return job.id === need;
+            })[SYMBOL_ID];
+          }
+        }),
+        payload: _extends({
+          type: "JOB",
+          stageId: stageId
+        }, job.value, {
+          jobEntry: job
+        })
+      };
+      return rt;
+    });
+    var rt = {
+      stageId: stageId,
+      nodes: jobs
+    };
+    return rt;
+  });
+  var withConnJobs = getStagesConnectNodes(jobsByStage);
+  useLayoutEffect(function () {
+    var stageIds = stages.map(function (s) {
+      return s.id;
+    });
+
+    // if (!graphRef.current) {
+    graphRef.current = new PipelineRunGraph(
+    // [...jobsByStage.flatMap((v) => v.nodes), ...connJobs],
+    withConnJobs, stageIds, {
+      originX: 446,
+      originY: 50,
+      vGap: 24,
+      hGap: 56
+    });
+    setTimeout(function () {
+      setUpdateFlag(Date.now());
+    }, 1);
+    clog(graphRef.current);
+    // }
+  }, [flow]);
+  var resizeObserver = useMemo(function () {
+    return new window.ResizeObserver(function (entries) {
+      clog("observe", entries);
+      entries.forEach(function (rzoEntry) {
+        var id = rzoEntry.target.dataset.jobId;
+        var rect = rzoEntry.borderBoxSize[0];
+        graphRef.current.setUIRectSize(id, function (draft) {
+          draft.height = Math.ceil(rect.blockSize);
+          draft.width = Math.ceil(rect.inlineSize);
+          draft.preConnector = {
+            x: 0,
+            y: 34
+          };
+          draft.afterConnector = {
+            x: rect.inlineSize,
+            y: 34
+          };
+        });
+      });
+
+      // try {
+      var graph = graphRef.current.getGraph();
+      if (graph !== graphState) {
+        setGraphState(graph);
+      }
+      // } catch (e) {
+      //   console.error(e);
+      // }
+      // clog(cptInsName, 'resizeObserver set');
+    });
+  }, [flow]);
+  console.log(jobsByStage);
+  if (!graphRef.current) {
+    return null;
+  }
+  function findJobByEntryId(entryId) {
+    var jobIndex;
+    var stageIndex = flow.stages.findIndex(function (stage) {
+      var findingIndex = stage.value.jobs.findIndex(function (job) {
+        return job[SYMBOL_ID] === entryId;
+      });
+      if (findingIndex !== -1) {
+        jobIndex = findingIndex;
+        return true;
+      }
+    });
+    if (jobIndex == -1 || stageIndex == -1) {
+      return null;
+    }
+    return {
+      job: flow.stages[stageIndex].value.jobs[jobIndex],
+      path: {
+        stageIndex: stageIndex,
+        jobIndex: jobIndex
+      }
+    };
+  }
+  var JobDrawerEl = /*#__PURE__*/React.createElement(JobDrawer, {
+    job: (_findJobByEntryId = findJobByEntryId(showingJobEntryId)) === null || _findJobByEntryId === void 0 ? void 0 : _findJobByEntryId.job,
+    onJobDelete: function onJobDelete(jobEntryIdToDel) {
+      var _findJobByEntryId2;
+      var jobState = (_findJobByEntryId2 = findJobByEntryId(jobEntryIdToDel)) === null || _findJobByEntryId2 === void 0 ? void 0 : _findJobByEntryId2.job;
+      Dialog.confirm({
+        title: intl.get({
+          id: "rdc-tb-cd-assets.PipelineFlowEdit.UIEditor-deprecated.UIEditor.AreYouSureYouWant",
+          defaultMessage: "确定删除任务「{jobStateValueName}」吗"
+        }, {
+          jobStateValueName: jobState.value.name
+        }),
+        onOk: function onOk() {
+          var jobIndex;
+          var stageIndex = flow.stages.findIndex(function (stage) {
+            var i = stage.value.jobs.findIndex(function (job) {
+              return job[SYMBOL_ID] === jobEntryIdToDel;
+            });
+            jobIndex = i;
+            return i !== -1;
+          });
+          var nextFlowState = produce(flow, function (draft) {
+            var jobs = draft.stages[stageIndex].value.jobs;
+            jobs.splice(jobIndex, 1);
+          });
+          ReactDOM.unstable_batchedUpdates(function () {
+            onFlowChange(nextFlowState);
+            setShowingJobEntryId(null);
+            setUpdateFlag(Date.now());
+          });
+        },
+        okProps: {
+          warning: true,
+          children: intl.get({
+            id: "rdc-tb-cd-assets.PipelineFlowEdit.UIEditor-deprecated.UIEditor.Delete",
+            defaultMessage: "删除"
+          })
+        }
+      });
+    },
+    onJobChange: function onJobChange(newJob) {
+      console.log(newJob);
+      var next;
+      var jobIndex;
+      next = produce(flow, function (draft) {
+        var stageIndex = flow.stages.findIndex(function (stage) {
+          var i = stage.value.jobs.findIndex(function (job) {
+            return job[SYMBOL_ID] === newJob[SYMBOL_ID];
+          });
+          jobIndex = i;
+          return i !== -1;
+        });
+        draft.stages[stageIndex].value.jobs[jobIndex] = newJob;
+      });
+      onFlowChange(next);
+    },
+    onClose: function onClose() {
+      return setShowingJobEntryId(null);
+    }
+  });
+  return /*#__PURE__*/React.createElement(React.Fragment, null, showingJobEntryId && JobDrawerEl, /*#__PURE__*/React.createElement(TaskTpl, {
+    showTaskTpl: Boolean(showTaskTpl),
+    setShowTaskTpl: setShowTaskTpl,
+    onJobAdd: function onJobAdd(tpl) {
+      var _newJob;
+      var tplRoot = YAML.load(tpl.contentV2);
+      setJobsTpl(tplRoot);
+      console.log(tpl);
+      var tplJobVal = Object.values(tplRoot.jobs)[0];
+      var steps = [];
+      Object.entries(tplJobVal.steps || {}).forEach(function (_ref2) {
+        var _steps$push;
+        var k = _ref2[0],
+          v = _ref2[1];
+        v.name = intl.get({
+          id: "rdc-tb-cd-assets.PipelineFlowEdit.UIEditor-deprecated.UIEditor.StepVstep",
+          defaultMessage: "步骤 {vStep}"
+        }, {
+          vStep: v.step
+        });
+        steps.push((_steps$push = {}, _steps$push[SYMBOL_ID] = "FLOW_ENTITY_" + utils.uuid(16), _steps$push.id = k, _steps$push.value = v, _steps$push));
+      });
+      var id = "job_" + utils.uuid(6);
+      var newJob = (_newJob = {}, _newJob[SYMBOL_ID] = "FLOW_ENTITY_" + utils.uuid(16), _newJob.id = id, _newJob.value = _extends({}, tplJobVal, tplJobVal !== null && tplJobVal !== void 0 && tplJobVal.steps ? {
+        steps: steps
+      } : {}), _newJob);
+      var _findJobByEntryId3 = findJobByEntryId(showTaskTpl.jobEntryId),
+        path = _findJobByEntryId3.path;
+      var next = produce(flow, function (flowDraft) {
+        var targetJob = flowDraft.stages[path.stageIndex].value.jobs[path.jobIndex];
+        var stageId = flowDraft.stages[path.stageIndex].id;
+        if (showTaskTpl.pos === "after") {
+          newJob.value.needs = [targetJob.id];
+          flowDraft.stages[path.stageIndex].value.jobs.forEach(function (job) {
+            var _job$value$needs;
+            if (job.value.needs === targetJob.id) {
+              job.value.needs = newJob.id;
+            } else if ((_job$value$needs = job.value.needs) !== null && _job$value$needs !== void 0 && _job$value$needs.includes(targetJob.id)) {
+              job.value.needs = job.value.needs.filter(function (v) {
+                return v != targetJob.id;
+              });
+              job.value.needs.push(newJob.id);
+            }
+          });
+
+          // 其它stage
+          flowDraft.stages.forEach(function (stage, i) {
+            if (i === path.stageIndex) {
+              return;
+            }
+            stage.value.jobs.forEach(function (job) {
+              var _job$value$needs2;
+              var targetNeedId = stageId + "." + targetJob.id;
+              var newNeedId = stageId + "." + newJob.id;
+              if (job.value.needs === targetNeedId) {
+                job.value.needs = newNeedId;
+              } else if ((_job$value$needs2 = job.value.needs) !== null && _job$value$needs2 !== void 0 && _job$value$needs2.includes(targetNeedId)) {
+                job.value.needs = job.value.needs.filter(function (v) {
+                  return v != targetNeedId;
+                });
+                job.value.needs.push(newNeedId);
+              }
+            });
+          });
+        } else if (showTaskTpl.pos === "before") {
+          newJob.value.needs = flatten([targetJob.value.needs || []]);
+          targetJob.value.needs = newJob.id;
+        } else if (showTaskTpl.pos === "parallel") {
+          newJob.value.needs = flatten([targetJob.value.needs || []]);
+          flowDraft.stages[path.stageIndex].value.jobs.forEach(function (job) {
+            var _job$value$needs3;
+            if (job.value.needs === targetJob.id) {
+              job.value.needs = [newJob.id, targetJob.id];
+            } else if ((_job$value$needs3 = job.value.needs) !== null && _job$value$needs3 !== void 0 && _job$value$needs3.includes(targetJob.id)) {
+              job.value.needs.push(newJob.id);
+            }
+          });
+          flowDraft.stages.forEach(function (stage, i) {
+            if (i === path.stageIndex) {
+              return;
+            }
+            stage.value.jobs.forEach(function (job) {
+              var _job$value$needs4;
+              var targetNeedId = stageId + "." + targetJob.id;
+              var newNeedId = stageId + "." + newJob.id;
+              if (job.value.needs === targetNeedId) {
+                job.value.needs = [newNeedId, targetNeedId];
+              } else if ((_job$value$needs4 = job.value.needs) !== null && _job$value$needs4 !== void 0 && _job$value$needs4.includes(targetNeedId)) {
+                job.value.needs.push(newNeedId);
+              }
+            });
+          });
+        } else {
+          throw new Error();
+        }
+        flowDraft.stages[path.stageIndex].value.jobs.splice(path.jobIndex + 1, 0, newJob);
+      });
+      onFlowChange(next);
+      setUpdateFlag(Date.now());
+      setShowTaskTpl(false);
+      // setTimeout(() => {
+      //   setShowingJobEntryId(id);
+      // }, 300);
+    }
+  }), /*#__PURE__*/React.createElement(AutoSizer, null, function (_ref3) {
+    var width = _ref3.width,
+      height = _ref3.height;
+    // return null;
+    return /*#__PURE__*/React.createElement(PipelineCanvas, {
+      canvasControl: true,
+      getCanvasContentRect: function getCanvasContentRect() {
+        return new Rect({
+          height: window.innerHeight - 56,
+          width: 2000,
+          x: 0,
+          y: 0
+        });
+      },
+      viewPortCanavsRender: function viewPortCanavsRender(transform) {
+        return _viewPortCanavsRender(graphRef.current, transform, {
+          height: height,
+          width: width
+        });
+      },
+      viewPortSize: {
+        height: height,
+        width: width
+      },
+      defaultTransform: {
+        translateX: 0,
+        translateY: 0
+      }
+    }, function () {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, function () {
+        if (!flow.sources) {
+          return /*#__PURE__*/React.createElement(CanvasEntity, {
+            x: 60,
+            y: 50
+          }, /*#__PURE__*/React.createElement(SourceWrapper, null, /*#__PURE__*/React.createElement(EmptySource, null)));
+        }
+        var sourcesEntry = Object.entries(flow.sources);
+        return /*#__PURE__*/React.createElement(CanvasEntity, {
+          x: 60,
+          y: 50
+        }, /*#__PURE__*/React.createElement(SourceWrapper, null, sourcesEntry.map(function (_ref4, i) {
+          var k = _ref4[0],
+            source = _ref4[1];
+          return /*#__PURE__*/React.createElement(SourceCard, {
+            isDefaultWorkspace: i === 0,
+            branch: source.branch || source.jenkinsJob || source.flowPipeline,
+            name: source.endpoint || source.name,
+            id: k,
+            type: "github"
+          });
+        })));
+      }(), /*#__PURE__*/React.createElement("svg", {
+        style: {
+          backgroundColor: "transparent",
+          pointerEvents: "none",
+          position: "absolute",
+          top: 0,
+          left: 0,
+          zIndex: -1,
+          transition: "opacity 0.2s ease-out"
+        },
+        opacity: activeItems ? 0.3 : 1
+        // todo svg size
+        ,
+        width: 5000,
+        height: 5000
+      }, /*#__PURE__*/React.createElement("path", {
+        key: "for-source",
+        fill: "none",
+        stroke: "#cecece",
+        strokeWidth: 1,
+        d: "M330.5 0, v2000"
+      }), (graphState === null || graphState === void 0 ? void 0 : graphState.edges) && Object.entries(graphState.edges).map(function (_ref5) {
+        var id = _ref5[0],
+          pathd = _ref5[1];
+        return /*#__PURE__*/React.createElement("g", {
+          key: id,
+          style: {
+            // 保证 1px 的线在1x屏幕上像素精准
+            transform: window.devicePixelRatio === 1 ? "translate(-0.5px, -0.5px)" : "none"
+          }
+        }, /*#__PURE__*/React.createElement("path", {
+          id: id,
+          fill: "none",
+          stroke: "#f7f7f7",
+          strokeWidth: 1,
+          d: pathd
+        }), /*#__PURE__*/React.createElement("path", {
+          key: id,
+          id: id,
+          fill: "none",
+          stroke: "#cecece",
+          strokeWidth: 1,
+          d: pathd
+        }));
+      })), " ", /*#__PURE__*/React.createElement("svg", {
+        // todo svg size
+        width: 5000,
+        height: 5000,
+        style: {
+          pointerEvents: "none",
+          position: "absolute",
+          top: 0,
+          left: 0
+        }
+      }, (graphState === null || graphState === void 0 ? void 0 : graphState.edges) && Object.entries(graphState.edges).map(function (_ref6) {
+        var _activeItems$edgeIds;
+        var id = _ref6[0],
+          pathd = _ref6[1];
+        var isActive = activeItems === null || activeItems === void 0 ? void 0 : (_activeItems$edgeIds = activeItems.edgeIds) === null || _activeItems$edgeIds === void 0 ? void 0 : _activeItems$edgeIds.includes(id);
+        return /*#__PURE__*/React.createElement("g", {
+          key: id,
+          style: {
+            opacity: isActive ? 1 : 0,
+            transition: isActive ? "opacity 0.2s ease" : "opacity 0.2s ease-in"
+          }
+        }, /*#__PURE__*/React.createElement("path", {
+          style: {
+            animation: "none"
+          },
+          id: id,
+          fill: "none",
+          strokeWidth: 2,
+          stroke: "#f7f7f7",
+          d: pathd
+        }), /*#__PURE__*/React.createElement("path", {
+          style: {
+            animation: "none"
+          },
+          key: id,
+          id: id,
+          fill: "none",
+          strokeWidth: 2,
+          stroke: "#90CDF5",
+          d: pathd
+        }));
+      })), jobsByStage.flatMap(function (v) {
+        return v.nodes;
+      }).map(function (v) {
+        var _graphState$rects, _v$payload$jobEntry, _v$payload$jobEntry$v, _v$payload$jobEntry2;
+        var pos = (graphState === null || graphState === void 0 ? void 0 : (_graphState$rects = graphState.rects) === null || _graphState$rects === void 0 ? void 0 : _graphState$rects[v.id]) || {};
+        var highlightStatus = function () {
+          if (!activeItems) return "normal";
+          if (activeItems.nodeIds.includes(v.id)) return "active";
+          return "dimmed";
+        }();
+        return /*#__PURE__*/React.createElement(CanvasEntity, {
+          key: v.id + updateFlag,
+          x: pos.x,
+          y: pos.y
+        }, /*#__PURE__*/React.createElement(JobCard, {
+          highlightStatus: highlightStatus,
+          onCardHover: onCardHover,
+          onCardLeave: onCardLeave,
+          selected: showingJobEntryId == v.id,
+          onAdd: function onAdd(position) {
+            unstable_batchedUpdates(function () {
+              setShowingJobEntryId(null);
+              setShowTaskTpl({
+                pos: position,
+                jobEntryId: v.id
+              });
+            });
+          },
+          onClick: function onClick() {
+            return setShowingJobEntryId(v.id);
+          },
+          name: (_v$payload$jobEntry = v.payload.jobEntry) === null || _v$payload$jobEntry === void 0 ? void 0 : (_v$payload$jobEntry$v = _v$payload$jobEntry.value) === null || _v$payload$jobEntry$v === void 0 ? void 0 : _v$payload$jobEntry$v.name,
+          jobId: (_v$payload$jobEntry2 = v.payload.jobEntry) === null || _v$payload$jobEntry2 === void 0 ? void 0 : _v$payload$jobEntry2.id,
+          id: v.id,
+          resizeObserver: resizeObserver,
+          jobEntry: v.payload.jobEntry
+        }));
+      }), withConnJobs.filter(function (j) {
+        return j.payload.type === "STAGE_CONNECTOR";
+      }).map(function (conn) {
+        var _graphState$rects2;
+        var pos = (graphState === null || graphState === void 0 ? void 0 : (_graphState$rects2 = graphState.rects) === null || _graphState$rects2 === void 0 ? void 0 : _graphState$rects2[conn.id]) || {};
+        return /*#__PURE__*/React.createElement(CanvasEntity, {
+          key: conn.id + updateFlag,
+          x: pos.x,
+          y: pos.y
+        }, /*#__PURE__*/React.createElement(StageConnector, {
+          graphRef: graphRef,
+          id: conn.id
+        }));
+      }));
+    });
+  }));
+}
+var StageConnector = /*#__PURE__*/React.memo(function (_ref7) {
+  var graphRef = _ref7.graphRef,
+    id = _ref7.id;
+  useLayoutEffect(function () {
+    graphRef.current.setUIRectSize(id, function (draft) {
+      draft.width = 1;
+      draft.height = 32;
+      // 和第一行卡片的连接点对齐
+      draft.preConnector = {
+        x: 0,
+        y: 34
+      };
+      draft.afterConnector = {
+        x: 1,
+        y: 34
+      };
+    });
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: 9,
+      height: 9,
+      position: "absolute",
+      top: 30,
+      left: -4,
+      borderRadius: "50%",
+      backgroundColor: "gray"
+    }
+  });
+});
+export default /*#__PURE__*/React.memo(UIEditor);

package/es/components/PipelineFlowEdit/UIEditor-deprecated/config.d.ts

@@ -0,0 +1,3 @@
+import Input from './fields/Input';
+export declare const transformType: (type: any) => typeof Input;
+export declare const transformExtraComponent: (component: any) => any;

package/es/components/PipelineFlowEdit/UIEditor-deprecated/config.js

@@ -0,0 +1,81 @@
+/* eslint-disable import/no-cycle */
+/* eslint-disable import/prefer-default-export */
+import React from 'react';
+import Select from "./fields/Select";
+// import None from './fields/none';
+// import Steps from './fields/steps';
+// import Upstream from './fields/upstream';
+// import AppstackImage from './fields/appstackImage';
+// import CustomVariable from './fields/customVariable';
+import CheckboxField from "./fields/Checkbox";
+// import Links from './fields/links';
+// import TextLabel from './fields/text_label';
+// import Tip from './fields/tip';
+// import Password from './fields/password';
+import Input from "./fields/Input";
+import TipField from "./fields/Tip";
+import ShellField from "./fields/Shell";
+import { StepsList } from "./StepsList";
+import NumberField from "./fields/Number";
+import TextAreaField from "./fields/Textarea";
+import RadioGroupField from "./fields/RadioGroup";
+import PasswordField from "./fields/Password";
+import AddMembersField from "./fields/AddMembers";
+// import RadioGroup from './fields/radioGroup';
+// import Redline from './fields/readline';
+// import MachineGroupSelect from './fields/machineGroupSelect';
+// import InputList from './fields/inputList';
+// import MultiUpstream from './fields/multiUpstream';
+// import AddMembers from './fields/AddMembers';
+// import BuildSetting from './fields/build-setting';
+// import MachineGroupSelectNew from './fields/machineGroupSelectNew';
+// import MavenSettingSelector from './fields/mavenSettingSelector';
+// import MultiKeyValue from './fields/multiKeyValue';
+// import SourcesSelect from './fields/sourcesSelect';
+
+// import CreateJenkinsCredential from './dialogs/createJenkinsCredential/index';
+// import PackagesConnection from './fields/packagesConnection';
+
+function Unknown(props) {
+  return /*#__PURE__*/React.createElement("span", null, "unsupported: ", props.defItem.type);
+}
+export var transformType = function transformType(type) {
+  switch (type.toLowerCase()) {
+    case 'input':
+      return Input;
+    case 'password':
+      return PasswordField;
+    case 'number':
+      return NumberField;
+    case 'textarea':
+      return TextAreaField;
+    case 'checkbox':
+      return CheckboxField;
+    case 'radio_group':
+      return RadioGroupField;
+    case 'select':
+    case 'dropdown':
+      return Select;
+    case 'tip':
+      return TipField;
+    case 'shell':
+    case 'deployshell':
+      return ShellField;
+    case 'add_members':
+      return AddMembersField;
+    case 'add_steps':
+      return StepsList;
+    default:
+      return Unknown;
+  }
+};
+export var transformExtraComponent = function transformExtraComponent(component) {
+  switch (component) {
+    // case 'createAcrRepository':
+    //   return CreateAcrRepository;
+    case 'createJenkinsCredential':
+      return CreateJenkinsCredential;
+    default:
+      return None;
+  }
+};

package/es/components/PipelineFlowEdit/UIEditor-deprecated/fields/AddMembers.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { DefCptBaseProps } from './common';
+type Props = DefCptBaseProps;
+export default function AddMembersField(props: Props): JSX.Element;
+export {};