1. feat: import query library

2. refactor(table): refactor withContext to withParams in table
3. feat: trans comp doc

Author: ggbond2077

client/package.json

@@ -11,9 +11,8 @@
   },
   "scripts": {
     "start": "yarn workspace openblocks start",
+    "start:ee": "REACT_APP_EDITION=enterprise yarn workspace openblocks start",
     "build": "yarn node ./scripts/build.js",
-    "build:skip-main": "yarn node ./scripts/build.mjs --skip-main",
-    "build:legacy": "yarn workspace openblocks build:legacy",
     "test": "jest",
     "prepare": "yarn workspace openblocks prepare",
     "build:core": "yarn workspace openblocks-core build",

client/packages/openblocks-design/src/components/control.tsx

@@ -81,6 +81,7 @@ const LabelWrapper = styled.div<{
   }}
 `;
 const ChildrenWrapper = styled.div<{ layout: ControlLayout }>`
+  min-width: 0;
   ${(props) => {
     switch (props.layout) {
       case "horizontal":

client/packages/openblocks-design/src/components/query.tsx

@@ -68,6 +68,7 @@ export const QueryConfigLabel = (props: { children?: ReactNode; tooltip?: ReactN
 );
 
 export const QueryConfigItemWrapper = styled.div<{ direction?: "row" | "column" }>`
+  min-width: 0;
   flex-grow: 1;
   ${(props) => {
     if (props.direction === "row") {

client/packages/openblocks/src/app.tsx

@@ -46,7 +46,8 @@ import { isFetchUserFinished } from "redux/selectors/usersSelectors";
 
 const LazyUserAuthComp = React.lazy(() => import("@openblocks-ee/pages/userAuth"));
 const LazyInviteLanding = React.lazy(() => import("pages/common/inviteLanding"));
-const LazyComponentDoc = React.lazy(() => import("@openblocks-ee/pages/ComponentDoc"));
+const LazyComponentDoc = React.lazy(() => import("pages/ComponentDoc"));
+const LazyComponentPlayground = React.lazy(() => import("pages/ComponentPlayground"));
 const LazyDebugComp = React.lazy(() => import("./debug"));
 const LazyDebugNewComp = React.lazy(() => import("./debugNew"));
 
@@ -128,6 +129,7 @@ class AppIndex extends React.Component<AppIndexProps, any> {
             <LazyRoute path={USER_AUTH_URL} component={LazyUserAuthComp} />
             <LazyRoute path={INVITE_LANDING_URL} component={LazyInviteLanding} />
             <LazyRoute path={`${COMPONENT_DOC_URL}/:name`} component={LazyComponentDoc} />
+            <LazyRoute path={`/playground/:name/:dsl`} component={LazyComponentPlayground} />
             <Redirect to={`${COMPONENT_DOC_URL}/input`} path="/components" />
 
             {developEnv() && (

client/packages/openblocks/src/appView/AppView.tsx

@@ -57,13 +57,15 @@ export function AppView(props: AppViewProps) {
         return true;
       },
     }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [appId]
   );
 
   const [comp] = useCompInstance(params);
 
   useEffect(() => {
     onCompChange?.(comp);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [comp]);
 
   useEffect(() => {
@@ -82,6 +84,7 @@ export function AppView(props: AppViewProps) {
         );
       }
     });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [moduleInputs]);
 
   return (

client/packages/openblocks/src/appView/OpenblocksAppView.tsx

@@ -31,6 +31,7 @@ function OpenblocksAppViewBase<I = any, O = any>(
       return;
     }
     bootstrapAppAt<I>(appId, node, options).then(setInstance);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [appId]);
 
   useEffect(() => {

client/packages/openblocks/src/components/ResCreatePanel.tsx

@@ -1,10 +1,10 @@
-import { AddIcon, CloseIcon, CustomModalProps, ScrollBar } from "openblocks-design";
+import { AddIcon, CloseIcon, CustomModalProps, ImportIconV2, ScrollBar } from "openblocks-design";
 import { BottomShadow, GreyTextColor, TabActiveColor } from "constants/style";
 import { trans } from "i18n";
 import _, { noop } from "lodash";
 import { CreateDataSourceModal } from "pages/datasource/datasourceModal";
 import { DataSourceButton } from "pages/datasource/pluginPanel";
-import { useState } from "react";
+import React, { useState } from "react";
 import { useResizeDetector } from "react-resize-detector";
 import styled, { css } from "styled-components";
 import { BottomResTypeEnum } from "types/bottomRes";
@@ -20,6 +20,7 @@ import {
   QUICK_REST_API_ID,
 } from "../constants/datasourceConstants";
 import { ResourceType } from "@openblocks-ee/constants/queryConstants";
+import { Upload } from "antd";
 
 const Wrapper = styled.div<{ placement: PageType }>`
   width: 100%;
@@ -174,6 +175,7 @@ interface ResCreateModalProps extends CustomModalProps {
   onSelect: (type: BottomResTypeEnum, extraInfo?: any) => void;
   onClose: () => void;
   placement?: PageType;
+  onImport?: (options: any) => void;
 }
 
 export function ResCreatePanel(props: ResCreateModalProps) {
@@ -246,6 +248,29 @@ export function ResCreatePanel(props: ResCreateModalProps) {
               </>
             )}
 
+            {placement === "queryLibrary" && props.onImport && (
+              <>
+                <div className="section-title">{trans("home.import")}</div>
+                <div className="section">
+                  <DataSourceListWrapper placement={placement}>
+                    <Upload
+                      accept=".json"
+                      showUploadList={false}
+                      customRequest={(options) => {
+                        props.onImport!(options);
+                      }}
+                      multiple={false}
+                    >
+                      <DataSourceButton size={buttonSize}>
+                        <ImportIconV2 width="20px" height="20px" style={{ marginRight: "8px" }} />
+                        {trans("query.importFromFile")}
+                      </DataSourceButton>
+                    </Upload>
+                  </DataSourceListWrapper>
+                </div>
+              </>
+            )}
+
             <div className="section-title">{trans("query.datasource")}</div>
             <div className="section">
               <DataSourceListWrapper placement={placement}>

client/packages/openblocks/src/comps/comps/buttonComp/buttonComp.tsx

@@ -38,7 +38,7 @@ function getFormOptions(editorState: EditorState) {
 }
 
 function getForm(editorState: EditorState, formName: string) {
-  const comp = editorState.getUICompByName(formName);
+  const comp = editorState?.getUICompByName(formName);
   if (comp && comp.children.compType.getView() === "form") {
     return comp.children.comp as unknown as IForm;
   }

client/packages/openblocks/src/comps/comps/dateComp.tsx

@@ -286,7 +286,7 @@ export const datePickerControl = (function () {
           }}
           onFocus={() => props.onEvent("focus")}
           onBlur={() => props.onEvent("blur")}
-          inputReadOnly={checkIsMobile(editorState.getAppSettings().maxWidth)}
+          inputReadOnly={checkIsMobile(editorState?.getAppSettings().maxWidth)}
         />
       </>
     );
@@ -375,7 +375,7 @@ export const dateRangeControl = (function () {
           }}
           onFocus={() => props.onEvent("focus")}
           onBlur={() => props.onEvent("blur")}
-          inputReadOnly={checkIsMobile(editorState.getAppSettings().maxWidth)}
+          inputReadOnly={checkIsMobile(editorState?.getAppSettings().maxWidth)}
         />
       </>
     );

client/packages/openblocks/src/comps/comps/moduleContainerComp/moduleMethodListComp.tsx

@@ -1,16 +1,15 @@
 import { EmptyContent } from "components/EmptyContent";
 import { KeyValueItem, KeyValueItemListWithNewCreateState } from "components/KeyValueItemList";
-import { ActionSelectorControl } from "comps/controls/actionSelector/actionSelectorControl";
 import CompNameControl from "comps/controls/compNameControl";
 import { list } from "comps/generators/list";
 import { NameGenerator } from "comps/utils";
-import { Section, TacoButton } from "openblocks-design";
+import { GreyTextColor } from "constants/style";
 import { trans } from "i18n";
+import { Section, TacoButton } from "openblocks-design";
+import styled from "styled-components";
 import { ModuleMethodListItemComp, WithParamsActionControl } from "./moduleMethodListItemComp";
-import { ConfigViewSection } from "./styled";
 import ModuleMethodParamListComp from "./moduleMethodParamListComp";
-import styled from "styled-components";
-import { GreyTextColor } from "constants/style";
+import { ConfigViewSection } from "./styled";
 
 const MethodName = styled.div`
   color: ${GreyTextColor};
@@ -128,7 +127,7 @@ function PropertyView(props: PropertyViewProps) {
 interface MethodItemProps {
   name: InstanceType<typeof CompNameControl>;
   params: InstanceType<typeof ModuleMethodParamListComp>;
-  action: InstanceType<typeof ActionSelectorControl>;
+  action: InstanceType<typeof WithParamsActionControl>;
   onDelete: () => void;
   showPopover: boolean;
 }
@@ -144,15 +143,15 @@ function MethodItem(props: MethodItemProps) {
     <>
       {name.propertyView({ label: trans("module.name") })}
       {params.propertyView({ onParamsConfigChange: handleOnParamsConfigChange })}
-      {action.propertyView({ label: trans("module.action") })}
+      {action.getComp().propertyView({ label: trans("module.action") })}
     </>
   );
 
   return (
     <KeyValueItem
       del={onDelete}
       name={name.getView()}
-      value={action.displayName()}
+      value={action.getComp().displayName()}
       clickPopoverContent={content}
       defaultShowPopover={props.showPopover}
     />