impaktapps-ui-builder 1.0.0 → 1.0.1-alpha.2

package/page/App/components/Actions/ActionPanel/RestApiPanel/index.tsx

@@ -1,358 +0,0 @@
-import { FC, ReactNode, useCallback } from "react";
-import { useTranslation } from "react-i18next";
-import { useDispatch, useSelector } from "react-redux";
-// import { CodeEditor } from "@/components/CodeEditor";
-// import { CODE_LANG } from "@/components/CodeEditor/CodeMirror/extensions/interface";
-import { BodyEditor } from "./BodyEditor";
-import {
-  actionItemContainer,
-  // restapiItemInputStyle,
-  restapiItemLabelStyle,
-  restapiItemStyle,
-} from "./style";
-import {
-  getCachedAction,
-  getSelectedAction,
-} from "@/redux/config/configSelector";
-import { configActions } from "@/redux/config/configSlice";
-import { RootState } from "@/store";
-import {
-  Params,
-  RestAPIAction,
-  RestAPIBodyContent,
-  RestAPIBodyType,
-  RestAPIMethod,
-} from "@/page/App/components/PublicTypes/action/restApi";
-import { ActionItem } from "@/redux/currentApp/action/interface";
-import {
-  Resource,
-  RestApiAuth,
-  RestApiResource,
-} from "@/page/App/components/PublicTypes/resource";
-import { RecordEditor } from "@/components/RecordEditor";
-import Select from "@mui/material/Select";
-import MenuItem from "@mui/material/MenuItem";
-import { EditableText } from "@/components/EditableText";
-import { useTheme } from "@mui/material";
-export interface SelectOptionObject {
-  label: string | ReactNode;
-  value: string | number;
-  disabled?: boolean;
-}
-export type SelectValue =
-  | SelectOptionObject
-  | string
-  | SelectOptionObject[]
-  | string[]
-  | number
-  | number[];
-
-const resetAPIMethodSelectOptions: RestAPIMethod[] = [
-  "GET",
-  "POST",
-  "PUT",
-  "HEAD",
-  "PATCH",
-  "DELETE",
-  "OPTIONS",
-];
-
-const RestApiPanel: FC = () => {
-  const { t } = useTranslation();
-  const cachedAction = useSelector(getCachedAction) as ActionItem<
-    RestAPIAction<RestAPIBodyContent>
-  >;
-  const selectedAction = useSelector(getSelectedAction) as ActionItem<
-    RestAPIAction<RestAPIBodyContent>
-  >;
-  const content = cachedAction.content as RestAPIAction<RestAPIBodyContent>;
-  const dispatch = useDispatch();
-
-  const currentResource = useSelector((state: RootState) => {
-    return state.resource.find(
-      (r) => r.resourceID === cachedAction?.resourceID
-    );
-  });
-const theme = useTheme()
-  const handleChangeMethod = useCallback(
-    (value?: SelectValue, isBaseUrl?: boolean) => {
-      let newBodyType: RestAPIBodyType = "none";
-      let newBody = null;
-      if (value !== "GET") {
-        if (
-          selectedAction.resourceID === cachedAction.resourceID &&
-          selectedAction.content.method === value
-        ) {
-          newBodyType = selectedAction.content.bodyType;
-          newBody = selectedAction.content.body;
-        }
-      }
-      if (isBaseUrl) {
-        if (selectedAction.resourceID === cachedAction.resourceID) {
-          dispatch(
-            configActions.updateCachedAction({
-              ...cachedAction,
-              content: {
-                ...content,
-                baseUrl: value,
-              },
-            })
-          );
-        }
-        return;
-      }
-      dispatch(
-        configActions.updateCachedAction({
-          ...cachedAction,
-          content: {
-            ...content,
-            method: value as RestAPIMethod,
-            bodyType: newBodyType,
-            body: newBody,
-          },
-        })
-      );
-    },
-    [cachedAction, content, dispatch, selectedAction]
-  );
-
-  return (
-    <div css={actionItemContainer}>
-      <div css={restapiItemStyle}>
-        <span css={restapiItemLabelStyle(theme)}>
-          {t("editor.action.resource.restapi.label.action_type")}
-        </span>
-        <Select
-          fullWidth
-          sx={{
-            fontSize: "10px",
-            w: "160px",
-            maxW: "160px",
-            color: "techPurple",
-          }}
-          value={content.method}
-          size="small"
-          onChange={(e) => {
-            handleChangeMethod(e.target.value);
-          }}
-        >
-          {resetAPIMethodSelectOptions.map((e) => (
-            <MenuItem key={e} value={e}>
-              {e}
-            </MenuItem>
-          ))}
-        </Select>
-      </div>
-      <div css={restapiItemStyle}>
-        <span css={restapiItemLabelStyle(theme)}>BaseUrl :</span>
-        <EditableText
-          key={
-            currentResource?.content
-              ? (currentResource as Resource<RestApiResource<RestApiAuth>>)
-                  .content.baseUrl
-              : ""
-          }
-          displayName={
-            currentResource?.content
-              ? (currentResource as Resource<RestApiResource<RestApiAuth>>)
-                  .content.baseUrl
-              : ""
-          }
-          updateDisplayNameByBlur={(value) => handleChangeMethod(value, true)}
-        />
-      </div>
-      {!["GET", "HEAD"].includes(content.method) && (
-        <BodyEditor actionItem={cachedAction} />
-      )}
-      <RecordEditor
-        records={content.urlParams}
-        label={t("editor.action.resource.restapi.label.url_parameters")}
-        onChangeKey={(index, key, v) => {
-          const newList: Params[] = [...content.urlParams];
-          newList[index] = { key, value: v } as Params;
-          dispatch(
-            configActions.updateCachedAction({
-              ...cachedAction,
-              content: {
-                ...content,
-                urlParams: newList,
-              },
-            })
-          );
-        }}
-        onChangeValue={(index, key, v) => {
-          const newList: Params[] = [...content.urlParams];
-          newList[index] = { key, value: v } as Params;
-          dispatch(
-            configActions.updateCachedAction({
-              ...cachedAction,
-              content: {
-                ...content,
-                urlParams: newList,
-              },
-            })
-          );
-        }}
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        onDelete={(index, _record) => {
-          const newList: Params[] = content.urlParams?content.urlParams:[];
-          newList.splice(index, 1);
-          // if (newList.length === 0) {
-          //   newList = [{ key: "", value: "" }];
-          // }
-          dispatch(
-            configActions.updateCachedAction({
-              ...cachedAction,
-              content: {
-                ...content,
-                urlParams: newList,
-              },
-            })
-          );
-        }}
-        onAdd={() => {
-          const initParams = content.urlParams ? content.urlParams : [];
-          const newList: Params[] = [
-            ...initParams,
-            { key: "", value: "" } as Params,
-          ];
-          dispatch(
-            configActions.updateCachedAction({
-              ...cachedAction,
-              content: {
-                ...content,
-                urlParams: newList,
-              },
-            })
-          );
-        }}
-      />
-      <RecordEditor
-        records={content.headers}
-        label={t("editor.action.resource.restapi.label.headers")}
-        onChangeKey={(index, key, v) => {
-          const newList: Params[] = [...content.headers];
-          newList[index] = { key, value: v } as Params;
-          dispatch(
-            configActions.updateCachedAction({
-              ...cachedAction,
-              content: {
-                ...content,
-                headers: newList,
-              },
-            })
-          );
-        }}
-        onChangeValue={(index, key, v) => {
-          const newList: Params[] = [...content.headers];
-          newList[index] = { key, value: v } as Params;
-          dispatch(
-            configActions.updateCachedAction({
-              ...cachedAction,
-              content: {
-                ...content,
-                headers: newList,
-              },
-            })
-          );
-        }}
-        onDelete={(index) => {
-          const newList: Params[] = [...content.headers];
-          newList.splice(index, 1);
-          // if (newList.length === 0) {
-          //   newList = [{ key: "", value: "" }];
-          // }
-          dispatch(
-            configActions.updateCachedAction({
-              ...cachedAction,
-              content: {
-                ...content,
-                headers: newList,
-              },
-            })
-          );
-        }}
-        onAdd={() => {
-          const initHeaders = content.headers ? content.headers : [];
-          const newList: Params[] = [
-            ...initHeaders,
-            { key: "", value: "" } as Params,
-          ];
-          dispatch(
-            configActions.updateCachedAction({
-              ...cachedAction,
-              content: {
-                ...content,
-                headers: newList,
-              },
-            })
-          );
-        }}
-      />
-      {/* <RecordEditor
-        records={content.cookies}
-        label={t("editor.action.resource.restapi.label.cookies")}
-        onChangeKey={(index, key, v) => {
-          const newList: Params[] = [...content.cookies];
-          newList[index] = { key, value: v } as Params;
-          dispatch(
-            configActions.updateCachedAction({
-              ...cachedAction,
-              content: {
-                ...content,
-                cookies: newList,
-              },
-            })
-          );
-        }}
-        onChangeValue={(index, key, v) => {
-          const newList: Params[] = [...content.cookies];
-          newList[index] = { key, value: v } as Params;
-          dispatch(
-            configActions.updateCachedAction({
-              ...cachedAction,
-              content: {
-                ...content,
-                cookies: newList,
-              },
-            })
-          );
-        }}
-        onDelete={(index) => {
-          let newList: Params[] = [...content.cookies];
-          newList.splice(index, 1);
-          if (newList.length === 0) {
-            newList = [{ key: "", value: "" }];
-          }
-          dispatch(
-            configActions.updateCachedAction({
-              ...cachedAction,
-              content: {
-                ...content,
-                cookies: newList,
-              },
-            })
-          );
-        }}
-        onAdd={() => {
-          const newList: Params[] = [
-            ...content.cookies,
-            { key: "", value: "" } as Params,
-          ];
-          dispatch(
-            configActions.updateCachedAction({
-              ...cachedAction,
-              content: {
-                ...content,
-                cookies: newList,
-              },
-            })
-          );
-        }}
-      /> */}
-    </div>
-  );
-};
-
-RestApiPanel.displayName = "RestApiPanel";
-export default RestApiPanel;

package/page/App/components/Actions/ActionPanel/RestApiPanel/style.ts

@@ -1,50 +0,0 @@
-import { globalColor } from "@/utils/colorBuilder"
-import { css } from "@emotion/react"
-import { Theme } from "@mui/material"
-
-export const restapiPanelContainerStyle = css`
-  display: flex;
-  flex-direction: column;
-`
-
-export const actionItemContainer = css`
-  padding: 8px 0;
-  overflow:auto;
-`
-
-export const urlStyle = css`
-  width: 600px;
-  box-sizing: border-box;
-  color: ${globalColor("grayBlue-02")};
-  font-weight: 400;
-  margin-left: 24px;
-  margin-right: 8px;
-  border-radius: 8px 0 0 8px;
-  font-size: 14px;
-  text-overflow: ellipsis;
-  overflow-wrap: break-word;
-  white-space: nowrap;
-  overflow: hidden;
-`
-
-export const restapiItemStyle = css`
-  display: flex;
-  flex-direction: row;
-  width:50%;
-  align-items: center;
-  min-height: 48px;
-  padding: 0 16px;
-`
-
-export const restapiItemLabelStyle =(theme:Theme)=> css`
-  min-width: 100px;
-  font-size: 14px;
-  font-weight: 500;
-  text-align: left;
-  color: ${theme.palette.text.primary};
-`
-
-export const restapiItemInputStyle = css`
-  flex-grow: 1;
-  width: 0;
-`

package/page/App/components/Actions/ActionPanel/TransformerPanel/index.tsx

@@ -1,61 +0,0 @@
-import { FC, useMemo } from "react"
-import { useTranslation } from "react-i18next"
-import { useDispatch, useSelector } from "react-redux"
-import { CodeEditor } from "@/components/CodeEditor"
-import {
-  CODE_LANG,
-  CODE_TYPE,
-} from "@/components/CodeEditor/CodeMirror/extensions/interface"
-import { getCachedAction } from "@/redux/config/configSelector"
-import { configActions } from "@/redux/config/configSlice"
-import {
-  realInputValueWithScript,
-  wrapperScriptCode,
-} from "@/utils/evaluateDynamicString/valueConverter"
-import { VALIDATION_TYPES } from "@/utils/validationFactory"
-import { transformerPanelContainerStyle, transformerTipStyle } from "./style"
-import { TransformerAction } from "../../../PublicTypes/action/transformerAction"
-
-const TransformerPanel: FC = () => {
-  const { t } = useTranslation()
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const action:any = useSelector(getCachedAction);
-  const content = action.content as TransformerAction
-
-  const dispatch = useDispatch()
-
-  const realInputValue = useMemo(() => {
-    return realInputValueWithScript(content.transformerString)
-  }, [content.transformerString])
-
-  return (
-    <div css={transformerPanelContainerStyle}>
-      <CodeEditor
-        value={realInputValue}
-        showLineNumbers
-        canShowCompleteInfo
-        height="88px"
-        expectValueType={VALIDATION_TYPES.STRING}
-        lang={CODE_LANG.JAVASCRIPT}
-        codeType={CODE_TYPE.NO_METHOD_FUNCTION}
-        onChange={(value) => {
-          dispatch(
-            configActions.updateCachedAction({
-              ...action,
-              content: {
-                transformerString: wrapperScriptCode(value),
-              },
-            }),
-          )
-        }}
-      />
-      <div css={transformerTipStyle}>
-        {t("editor.action.resource.transformer.tip.external_reference")}
-      </div>
-    </div>
-  )
-}
-
-TransformerPanel.displayName = "TransformerPanel"
-export default TransformerPanel

package/page/App/components/Actions/ActionPanel/TransformerPanel/style.ts

@@ -1,15 +0,0 @@
-import { globalColor } from "@/utils/colorBuilder"
-import { css } from "@emotion/react"
-
-
-export const transformerPanelContainerStyle = css`
-  display: flex;
-  flex-direction: column;
-  padding: 8px 16px;
-`
-
-export const transformerTipStyle = css`
-  margin: 0 16px;
-  font-size: 12px;
-  color: ${globalColor(`grayBlue-04`)};
-`

package/page/App/components/Actions/ActionPanel/index.tsx

@@ -1,116 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { Suspense, lazy } from "react";
-import { FC, useMemo, useState } from "react";
-import { useSelector } from "react-redux";
-import { ActionResult } from "@/page/App/components/Actions/ActionPanel/ActionResult";
-import {
-  actionContentStyle,
-  actionPanelContainerStyle,
-  actionPanelStyle,
-  outterActionContainerStyle,
-} from "@/page/App/components/Actions/ActionPanel/style";
-import {
-  getCachedAction,
-  getSelectedAction,
-} from "@/redux/config/configSelector";
-import ActionMockPanel from "./ActionMockPanel";
-import GeneralPanelLayout from "./Layout/GeneralPanelLayout";
-import { INIT_ACTION_MOCK_CONFIG } from "../../publicConfig/action";
-import { ActionTitleBar } from "./ActionTitleBar";
-import { CircularProgress } from "@mui/material";
-
-const AdvancedPanel = lazy(
-  () => import("@/page/App/components/Actions/ActionPanel/AdvancedPanel")
-);
-const RestApiPanel = lazy(
-  () => import("@/page/App/components/Actions/ActionPanel/RestApiPanel")
-);
-const GlobalDataPanel = lazy(
-  () => import("@/page/App/components/Actions/ActionPanel/GlobalDataPanel")
-);
-const TransformerPanel = lazy(
-  () => import("@/page/App/components/Actions/ActionPanel/TransformerPanel")
-);
-const ImpaktAppsPanel = lazy(
-  () => import("@/page/App/components/Actions/ActionPanel/ImpaktAppsPanel")
-);
-
-export const ActionPanel: FC = () => {
-  const cachedAction: any = useSelector(getCachedAction);
-  const selectedAction: any = useSelector(getSelectedAction)!;
-
-  const [resultVisible, setResultVisible] = useState(false);
-  const [activeKey, setActiveKey] = useState("general");
-  const mockConfig =
-    cachedAction?.config?.mockConfig ?? INIT_ACTION_MOCK_CONFIG;
-  const panel = useMemo(() => {
-    switch (cachedAction?.actionType) {
-      case "restapi":
-        return <RestApiPanel />;
-      case "globalData":
-        return <GlobalDataPanel />;
-      case "transformer":
-        return <TransformerPanel />;
-      case "impaktapps":
-        return <ImpaktAppsPanel />;
-      default:
-        return <></>;
-    }
-  }, [cachedAction]);
-
-  if (!cachedAction) {
-    return <></>;
-  }
-
-  return (
-    <div css={actionPanelStyle}>
-      <div css={actionPanelContainerStyle}>
-        <ActionTitleBar
-          onResultVisibleChange={(visible) => {
-            setResultVisible(visible);
-          }}
-          openState={resultVisible}
-          activeTab={activeKey}
-          handleChangeTab={(active) => setActiveKey(active)}
-        />
-        <Suspense
-          fallback={
-            <div css={outterActionContainerStyle}>
-              <CircularProgress color="primary" />
-            </div>
-          }
-        >
-          {activeKey === "general" && (
-            <div css={outterActionContainerStyle}>
-              <GeneralPanelLayout
-                actionType={cachedAction?.actionType}
-                mockEnabled={mockConfig?.enabled}
-              >
-                {mockConfig?.enabled ? (
-                  <ActionMockPanel
-                    enableForReleasedApp={mockConfig.enableForReleasedApp}
-                    mockData={mockConfig.mockData}
-                  />
-                ) : (
-                  <div css={actionContentStyle}>{panel}</div>
-                )}
-              </GeneralPanelLayout>
-            </div>
-          )}
-          {activeKey === "advanced" && <AdvancedPanel />}
-        </Suspense>
-        {resultVisible && (
-          <ActionResult
-            key={selectedAction?.actionID}
-            visible={resultVisible}
-            onClose={() => {
-              setResultVisible(false);
-            }}
-          />
-        )}
-      </div>
-    </div>
-  );
-};
-
-ActionPanel.displayName = "ActionPanel";

package/page/App/components/Actions/ActionPanel/style.ts

@@ -1,58 +0,0 @@
-import { css } from "@emotion/react"
-
-export const actionPanelStyle = css`
-  flex-grow: 1;
-  height: 100%;
-  overflow-x: auto;
-  overflow-y: auto;
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  scrollbar-width:none;
-`
-
-export const actionPanelContainerStyle = css`
-  width: 100%;
-  height: 100%;
-  min-width: 877px;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  overflow-y: hidden;
-`
-export const stylePanelContainerStyle = css`
-  width: 100%;
-  height: 100%;
-  min-width: 130px;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  overflow-y: hidden;
-`
-
-export const actionContentStyle = css`
-  width: 100%;
-  display: flex;
-  justify-content:flex-start;
-  flex-direction: column;
-`
-export const styleContentStyle = css`
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  position:relative
-`
-
-export const outterActionContainerStyle = css`
-  padding-bottom: 48px;
-  width: 100%;
-  display:flex;
-
-  height: calc(100% - 48px);
-  overflow-y: auto;
-  padding-top: 8px;
-`
-
-export const actionItemContainer = css`
-  padding: 8px 0;
-`

package/page/App/components/Actions/ActionPanel/utils/calculateFileSize.ts

@@ -1,37 +0,0 @@
-import { hasDynamicStringSnippet } from "@/redux/utils"
-import { evaluateDynamicString } from "@/utils/evaluateDynamicString"
-import { IMPAKTAPPSEditorRuntimePropsCollectorInstance } from "@/utils/executionTreeHelper/runtimePropsCollector"
-import { calculateFileSize } from "@/widgetLibrary/PublicSector/InvalidMessage/utils"
-import { useStore } from "react-redux"
-const MAX_SIZE = 5 * 1024 * 1024
-
-export const getFileValue = (data: string) => {
-  let value = data
-  const store = useStore();
-  if (hasDynamicStringSnippet(data)) {
-    const finalContext =
-      IMPAKTAPPSEditorRuntimePropsCollectorInstance.getGlobalCalcContext({},store)
-    try {
-      value = evaluateDynamicString("", data, finalContext)
-    } catch (ignore) {console.log(ignore)}
-  }
-  return value
-}
-
-export const isFileOversize = (data: string) => {
-  if (!data.length) {
-    return false
-  }
-  const content = getFileValue(data)
-  if (Array.isArray(content)) {
-    if (content.length <= 0) {
-      return false
-    }
-    return content.every((value) => {
-      const calculateValue =  value
-      return !!(calculateFileSize(calculateValue) > MAX_SIZE)
-    })
-  } else {
-    return !!(calculateFileSize(content) > MAX_SIZE)
-  }
-}