impaktapps-ui-builder 0.0.382460 → 1.0.0

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

@@ -0,0 +1,358 @@
+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

@@ -0,0 +1,50 @@
+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

@@ -0,0 +1,61 @@
+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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,116 @@
+/* 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

@@ -0,0 +1,58 @@
+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

@@ -0,0 +1,37 @@
+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)
+  }
+}