impaktapps-ui-builder 0.0.382457 → 1.0.0

package/page/App/components/Actions/ActionPanel/AdvancedPanel/Model/Timing/index.tsx

@@ -0,0 +1,145 @@
+import { FC, useCallback } from "react";
+import { useTranslation } from "react-i18next";
+import { useDispatch, useSelector } from "react-redux";
+import { CodeEditor } from "@/components/CodeEditor";
+import i18n from "@/i18n/config";
+import { getCachedActionAdvancedConfig } from "@/redux/config/configSelector";
+import { configActions } from "@/redux/config/configSlice";
+import { getCurrentAppPageNames } from "@/redux/currentApp/components/componentsSelector";
+import { VALIDATION_TYPES } from "@/utils/validationFactory";
+import { ACTION_RUN_TIME, IAdvancedConfig } from "@/redux/config/configReducer";
+import { AdvancedPanelHeader } from "../../Components/Header";
+import { AdvancedPanelControl } from "../../Components/Control";
+import Select from "@mui/material/Select";
+import { MenuItem, Switch } from "@mui/material";
+
+const RUN_TIME_OPTIONS = [
+  {
+    label: i18n.t("editor.action.panel.label.option.advanced.on_app_loading"),
+    value: "appLoaded",
+  },
+  {
+    label: i18n.t("editor.action.panel.label.option.advanced.on_page_loading"),
+    value: "pageLoading",
+  },
+  {
+    label: i18n.t("editor.action.panel.label.option.advanced.none"),
+    value: "none",
+  },
+];
+
+export const TimingSetting: FC = () => {
+  const cachedActionAdvancedConfig = useSelector(getCachedActionAdvancedConfig);
+  const pageDisplayNames = useSelector(getCurrentAppPageNames);
+  const { runtime, pages, delayWhenLoaded, displayLoadingPage } =
+    cachedActionAdvancedConfig;
+
+  const dispatch = useDispatch();
+  const { t } = useTranslation();
+
+  const handleUpdateAdvancedConfig = useCallback(
+    (key: keyof IAdvancedConfig) => {
+      return (value: unknown) => {
+        const updateSlice: Partial<IAdvancedConfig> = {
+          [key]: value,
+        };
+        if (key === "runtime") {
+          switch (value) {
+            case ACTION_RUN_TIME.APP_LOADED: {
+              updateSlice.pages = [];
+              updateSlice.displayLoadingPage = false;
+              break;
+            }
+            case ACTION_RUN_TIME.NONE: {
+              updateSlice.pages = [];
+              updateSlice.delayWhenLoaded = "";
+              updateSlice.displayLoadingPage = false;
+              break;
+            }
+            case ACTION_RUN_TIME.PAGE_LOADING: {
+              // updateSlice.displayLoadingPage =true;
+              break;
+            }
+          }
+        }
+        dispatch(
+          configActions.updateCachedActionAdvancedConfigReducer(updateSlice)
+        );
+      };
+    },
+    [dispatch]
+  );
+
+  return (
+    <div style={{ marginBottom: "20px" }}>
+      {/* <AdvancedPanelHeader title="TIMING" /> */}
+      <AdvancedPanelControl
+        title={t("editor.action.panel.label.advanced.page_trigger")}
+      >
+        <Select
+          size="small"
+          value={runtime}
+          onChange={(e) =>
+            handleUpdateAdvancedConfig("runtime")(e.target.value)
+          }
+        >
+          {RUN_TIME_OPTIONS.map((e) => {
+            return (
+              <MenuItem
+                key={e.value}
+                value={e.value}
+                onClick={() => handleUpdateAdvancedConfig("runtime")}
+              >
+                {e.label}
+              </MenuItem>
+            );
+          })}
+        </Select>
+      </AdvancedPanelControl>
+      <AdvancedPanelControl
+        title={t("editor.action.panel.label.advanced.page_load_delay")}
+        disabled={runtime === "none"}
+      >
+        <CodeEditor
+          value={delayWhenLoaded}
+          onChange={handleUpdateAdvancedConfig("delayWhenLoaded")}
+          expectValueType={VALIDATION_TYPES.NUMBER}
+        />
+      </AdvancedPanelControl>
+      <AdvancedPanelControl
+        title={t("editor.action.panel.label.advanced.pages")}
+        disabled={runtime !== "pageLoading"}
+      >
+        <Select
+          value={pages}
+          sx={{ fontSize: "12px", width: "170px" }}
+          size="small"
+          multiple
+          onChange={(e) => handleUpdateAdvancedConfig("pages")(e.target.value)}
+        >
+          {pageDisplayNames.map((e) => {
+            return (
+              <MenuItem key={e} value={e}>
+                {e}
+              </MenuItem>
+            );
+          })}
+        </Select>
+      </AdvancedPanelControl>
+      <AdvancedPanelControl
+        title={t("editor.action.panel.label.advanced.loading_page")}
+        disabled={runtime !== "pageLoading"}
+        subtitle={t(
+          "editor.action.panel.label.option.advanced.show_a_loading_page_"
+        )}
+      >
+        <Switch
+          checked={displayLoadingPage}
+          onChange={(e) => {
+            handleUpdateAdvancedConfig("displayLoadingPage")(e.target.checked);
+          }}
+        />
+      </AdvancedPanelControl>
+    </div>
+  );
+};

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

@@ -0,0 +1,19 @@
+import { FC } from "react"
+import { AdvancedPanelSpace } from "./Components/Space"
+// import { AdvancedOptionSetting } from "./Model/AdvancedOption"
+import { advancedPanelStyle } from "./style"
+import { TimingSetting } from "./Model/Timing"
+
+const AdvancedPanel: FC = () => {
+  return (
+    <div css={advancedPanelStyle}>   
+    <TimingSetting />
+      <AdvancedPanelSpace />
+      <AdvancedPanelSpace />
+      {/* <AdvancedOptionSetting /> */}
+    </div>
+  )
+}
+
+AdvancedPanel.displayName = "ActionAdvancedPanel"
+export default AdvancedPanel

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

@@ -0,0 +1,6 @@
+import { css } from "@emotion/react"
+
+export const advancedPanelStyle = css`
+  width: 100%;
+  overflow-y: auto;
+`

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

@@ -0,0 +1,70 @@
+import { FC } from "react"
+import { useTranslation } from "react-i18next"
+import { useDispatch, useSelector } from "react-redux"
+import { CodeEditor } from "@/components/CodeEditor"
+import { getCachedAction } from "@/redux/config/configSelector"
+import { configActions } from "@/redux/config/configSlice"
+import Space from "../Layout/Space"
+import {
+  globalDataPanelContainerStyle,
+  inputAreaStyle,
+  labelStyle,
+  tipsStyle,
+} from "./style"
+import { GlobalDataActionContent } from "../../../PublicTypes/action/globalData"
+import { useTheme } from "@mui/material"
+ 
+const GlobalDataPanel: FC = () => {
+  const theme = useTheme()
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const currentAction:any = useSelector(getCachedAction)!
+  const { t } = useTranslation()
+  const dispatch = useDispatch()
+
+  const handleOnChangeValue = (value: string) => {
+    dispatch(
+      configActions.updateCachedAction({
+        ...currentAction,
+        content: {
+          initialValue: value,
+        },
+      }),
+    )
+  }
+
+  return (
+    <>
+      <Space />
+      <div css={globalDataPanelContainerStyle}>
+        <span css={labelStyle(theme)}>
+          {t("editor.data_work_space.global_data_modal.initial_value.label")}
+        </span>
+        <div css={inputAreaStyle}>
+          <CodeEditor
+            value={
+              (currentAction.content as GlobalDataActionContent).initialValue
+            }
+            height="58px"
+            onChange={handleOnChangeValue}
+            modalTitle={t(
+              "editor.data_work_space.global_data_modal.initial_value.label",
+            )}
+            modalDescription={t(
+              "editor.data_work_space.global_data_modal.initial_value.tooltips",
+            )}
+            placeholder={t(
+              "editor.data_work_space.global_data_modal.initial_value.placeholder",
+            )}
+          />
+          <span css={tipsStyle}>
+            {t("editor.action.panel.label.tips.global-data.how-to-use")}
+          </span>
+        </div>
+      </div>
+    </>
+  )
+}
+
+GlobalDataPanel.displayName = "GlobalDataPanel"
+
+export default GlobalDataPanel

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

@@ -0,0 +1,34 @@
+import { globalColor } from "@/utils/colorBuilder"
+import { css } from "@emotion/react"
+import { Theme } from "@mui/material"
+
+export const globalDataPanelContainerStyle = css`
+  display: flex;
+  width: 100%;
+  padding: 8px 16px;
+  gap: 16px;
+`
+
+export const labelStyle =(theme:Theme) => css`
+  width: 200px;
+  text-align: right;
+  color: ${theme.palette.text.primary};
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 22px;
+  white-space: nowrap;
+`
+
+export const inputAreaStyle = css`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 100%;
+`
+
+export const tipsStyle = css`
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 22px;
+  color: ${globalColor("grayBlue-04")};
+`

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

@@ -0,0 +1,72 @@
+import { FC, useCallback } from "react";
+import { useTranslation } from "react-i18next";
+import { useDispatch } from "react-redux";
+import { CodeEditor } from "@/components/CodeEditor";
+import { CODE_LANG } from "@/components/CodeEditor/CodeMirror/extensions/interface";
+import { configActions } from "@/redux/config/configSlice";
+import { VALIDATION_TYPES } from "@/utils/validationFactory";
+import {
+  bodyChooserStyle,
+  bodyEditorContainerStyle,
+  bodyLabelStyle,
+  bodySelectorStyle,
+  codeEditorStyle,
+} from "./style";
+import { RestAPIRawBody } from "@/page/App/components/PublicTypes/action/restApi";
+import { BodyEditorProps } from "./interface";
+
+export const BodyEditor: FC<BodyEditorProps> = (props) => {
+  const { t } = useTranslation();
+  const actionItem = props.actionItem;
+  const bodyType = actionItem.content.bodyType;
+  const body = actionItem.content.body;
+  const dispatch = useDispatch();
+  const mode: CODE_LANG = CODE_LANG.JSON;
+  const handleRawBodyTypeChange = useCallback(
+    (value: string, paramName: string) => {
+      dispatch(
+        configActions.updateCachedAction({
+          ...actionItem,
+          content: {
+            ...actionItem.content,
+            body: {
+              ...(body as unknown as RestAPIRawBody),
+              [paramName]: value,
+            },
+          },
+        })
+      );
+    },
+    [actionItem, body, dispatch]
+  );
+  return (
+    <div css={bodyEditorContainerStyle}>
+      <span css={bodyLabelStyle}>
+        {t("editor.action.resource.restapi.label.body")}
+      </span>
+      {/* <div css={bodyChooserStyle}> */}
+        <div css={bodySelectorStyle}>
+        {bodyType === "raw" && (
+          <div css={codeEditorStyle}>
+            <CodeEditor
+              showLineNumbers
+              width="380px"
+              lang={mode}
+              value={
+                typeof (body as unknown as RestAPIRawBody)?.content === "object"
+                  ? `{{${JSON.stringify((body as unknown as RestAPIRawBody)?.content)}}}`
+                  : (body as unknown as RestAPIRawBody)?.content
+              }
+              expectValueType={VALIDATION_TYPES.OBJECT}
+              height="88px"
+              onChange={(value) => handleRawBodyTypeChange(value, "content")}
+            />
+          </div>
+        )}
+        </div>
+      {/* </div> */}
+    </div>
+  );
+};
+
+BodyEditor.displayName = "BodyEditor";

package/page/App/components/Actions/ActionPanel/ImpaktAppsPanel/BodyEditor/interface.ts

@@ -0,0 +1,8 @@
+import { RestAPIAction, RestAPIBodyContent } from "@/page/App/components/PublicTypes/action/restApi";
+import { ActionItem } from "@/redux/currentApp/action/interface";
+
+
+export interface BodyEditorProps {
+  actionItem: ActionItem<RestAPIAction<RestAPIBodyContent>>
+  body?: Record<string, unknown>
+}

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

@@ -0,0 +1,59 @@
+import { css } from "@emotion/react"
+import {
+  recordKeyStyle,
+  recordValueStyle,
+} from "@/components/RecordEditor/style"
+import { globalColor } from "@/utils/colorBuilder"
+
+export const bodyEditorContainerStyle = css`
+  display: flex;
+  padding: 0px;
+  flex-direction: row;
+`
+
+export const bodyLabelStyle = css`
+  min-width: 108px;
+  height: 48px;
+  display: flex;
+  flex-direction: row;
+  justify-content: start;
+  margin-left:16px;
+  align-items: center;
+  font-size: 14px;
+  font-weight: 500;
+  color: ${globalColor("grayBlue-02")};
+`
+
+export const bodyChooserStyle = css`
+  display: flex;
+  flex-grow: 1;
+  flex-direction: column;
+  margin-left: 1px;
+`
+
+export const bodySelectorStyle = css`
+  display: flex;
+  height: 48px;
+    max-width: 560px;
+    width:100%;
+  margin-top:30px;
+  align-items: center;
+justify-content:flex-start;
+  flex-direction: row;
+`
+
+export const codeEditorStyle = css`
+  margin: 8px 0;
+`
+
+export const restRecordKeyStyle = css`
+  ${recordKeyStyle};
+  margin-right: -1px;
+`
+
+export const restRecordValueStyle = css`
+  ${recordValueStyle};
+  & .cm-scroller {
+    overflow-x: hidden;
+  }
+`

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

@@ -0,0 +1,165 @@
+import { FC, ReactNode, useCallback, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+
+import {
+  actionItemContainer,
+  restapiItemLabelStyle,
+  restapiItemStyle,
+  urlStyle,
+} from "./style";
+import {
+  getCachedAction,
+  getSelectedAction,
+} from "@/redux/config/configSelector";
+import { configActions } from "@/redux/config/configSlice";
+import { RootState } from "@/store";
+import {
+  // Params,
+  RestAPIAction,
+  RestAPIBodyContent,
+
+} 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 { Trigger } from "@/utils/trigger/trigger";
+import Select from "@mui/material/Select";
+import MenuItem from "@mui/material/MenuItem";
+import { getControllerRules } from "@/redux/currentApp/executionController/controllerSelector";
+import {
+  // ParamDescription,
+  Rule,
+} from "@/redux/currentApp/executionController/interface";
+import { RecordEditor } from "@/components/RecordEditor";
+import { BodyEditor } from "../RestApiPanel/BodyEditor";
+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 ImapaktAppsPanel: FC = () => {
+  // const { t } = useTranslation();
+  const [open, setopen] = useState(false);
+  const cachedAction = useSelector(getCachedAction) as ActionItem<
+    RestAPIAction<RestAPIBodyContent>
+  >;
+  const theme = useTheme();
+  const selectedAction = useSelector(getSelectedAction) as ActionItem<
+    RestAPIAction<RestAPIBodyContent>
+  >;
+  const content = cachedAction.content as RestAPIAction<RestAPIBodyContent>;
+  const dispatch = useDispatch();
+  const AllRulesMap = useSelector(getControllerRules);
+  const currentResource = useSelector((state: RootState) => {
+    return state.resource.find(
+      (r) => r.resourceID === cachedAction?.resourceID
+    );
+  });
+  const handleChangeMethod = useCallback(
+    (value?: string) => {
+   
+      dispatch(
+        configActions.updateCachedAction({
+          ...cachedAction,
+          ruleRef: {
+            $refText: value,
+            $ref: value,
+          }
+        })
+      );
+    },
+    [cachedAction, dispatch]
+  );
+  const openHandler = async () => {
+    setopen(true);
+    // getRules().then((res)=>{
+    //   dispatch(ControllerActions.setResourceRulesReducer(res));
+
+    // })
+  };
+  return (
+    <div css={actionItemContainer}>
+      <div css={restapiItemStyle}>
+        <span css={restapiItemLabelStyle(theme)}>
+          Rule Name
+          {/* {t("editor.action.resource.restapi.label.action_type")} */}
+        </span>
+        <Select
+          sx={{
+            fontSize: "12px",
+            // width: "100%",
+            height: "30px",
+            maxW: "140px",
+            color: "techPurple",
+          }}
+          fullWidth
+          open={open}
+          onClose={() => setopen(false)}
+          onOpen={openHandler}
+          value={
+            selectedAction.displayName === cachedAction.displayName
+              ? cachedAction?.ruleRef?.$refText
+              : ""
+          }
+          size="small"
+          onChange={(e) => {
+            handleChangeMethod(e.target.value);
+          }}
+        >
+          {AllRulesMap.map((e: Rule) => (
+            <MenuItem key={e.$refText} value={e.$refText}>
+              {e.$refText}
+            </MenuItem>
+          ))}
+        </Select>
+
+        <Trigger
+          position="top-start"
+          content={
+            currentResource?.content
+              ? (currentResource as Resource<RestApiResource<RestApiAuth>>)
+                  .content.baseUrl
+              : ""
+          }
+        >
+          <div css={urlStyle(theme)}>
+            {currentResource?.content
+              ? (currentResource as Resource<RestApiResource<RestApiAuth>>)
+                  .content.baseUrl
+              : ""}
+          </div>
+        </Trigger>
+      </div>
+      <div>
+        <RecordEditor
+          records={content.urlParams}
+          label={"Parameters"}
+          // onChangeKey={(index, key, v) => {
+          // }}
+          // onChangeValue={(index, key, v) => {
+          // }}
+          // onDelete={(index) => {
+          // }}
+          // onAdd={() => {
+          // }}
+        />
+      </div>
+      <BodyEditor actionItem={cachedAction} />
+    </div>
+  );
+};
+
+ImapaktAppsPanel.displayName = "ImapaktAppsPanel";
+export default ImapaktAppsPanel;

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

@@ -0,0 +1,51 @@
+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;
+  border-top:1px solid #ebeae8;
+  overflow:auto;
+`
+
+export const urlStyle =(theme:Theme)=> css`
+  width: 850px;
+  box-sizing: border-box;
+  color: ${theme.palette.text.secondary};
+  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;
+  justify-content:flex-start;
+  flex-direction: row;
+  align-items: center;
+  min-height: 48px;
+  padding: none;
+`
+
+export const restapiItemLabelStyle = (theme:Theme)=>css`
+  min-width: 124px;
+  font-size: 14px;
+  font-weight: 500;
+  padding-left:16px;
+  text-align: left;
+  color: ${theme.palette.text.secondary};
+`
+
+export const restapiItemInputStyle = css`
+  flex-grow: 1;
+  width: 0;
+`

package/page/App/components/Actions/ActionPanel/Layout/GeneralPanelLayout/constants.ts

@@ -0,0 +1,2 @@
+export const NO_OPTIONS_HEADER = ["transformer", "globalData"]
+export const NO_EVENT_HANDLER = ["transformer", "globalData"]