Merge pull request #21 from internoapp/hide-pbl

Hide PocketBlocks implementation from users.
pedrozadotdev · Jan 21, 2024 · 67030e5 · 67030e5
2 parents e526c79 + c2d52fb
commit 67030e5
Show file tree

Hide file tree

Showing 168 changed files with 5,133 additions and 3,267 deletions.
diff --git a/client/packages/openblocks-design/src/components/Menu.tsx b/client/packages/openblocks-design/src/components/Menu.tsx
@@ -125,11 +125,7 @@ const DropDownMenuItemCss = `
   }
   .ant-dropdown-menu-item:hover,
   .ant-dropdown-menu-submenu-title:hover {
-    background: #f2f7fc;
     border-radius: 4px;
-    svg g path {
-      fill: #315efb;
-    }
   }
   .ant-dropdown-menu-title-content {
     

diff --git a/client/packages/openblocks-design/src/components/colorSelect/index.tsx b/client/packages/openblocks-design/src/components/colorSelect/index.tsx
@@ -13,6 +13,8 @@ import { throttle } from "lodash";
 import { changeValueAction } from "openblocks-core";
 
 interface ColorSelectProps {
+  size?: number;
+  borderRadius?: number;
   color: string;
   trigger?: string;
   dispatch?: (value: any) => void;
@@ -64,7 +66,7 @@ export const ColorSelect = (props: ColorSelectProps) => {
         </PopoverContainer>
       }
     >
-      <ColorBlock color={color?.substring(0, 7)}>
+      <ColorBlock color={color?.substring(0, 7)} style={{ width: props.size, height: props.size, borderRadius: props.borderRadius }}>
         <BackDiv color={alphaOfRgba(toRGBA(color))}></BackDiv>
       </ColorBlock>
     </Popover>

diff --git a/client/packages/openblocks-design/src/components/tacoInput.tsx b/client/packages/openblocks-design/src/components/tacoInput.tsx
@@ -151,6 +151,7 @@ const InputLabel = (props: { mustFill?: boolean; label?: string; errorMsg?: stri
 };
 
 function BlurFinishInput(props: {
+  disabled?: boolean;
   defaultValue?: string;
   // onFinish triggers when onBlur triggers and value is valid
   onFinish: (value: string) => void;
@@ -181,6 +182,7 @@ function BlurFinishInput(props: {
         <CommonErrorLabel>{!valueValid && valueCheck?.message}</CommonErrorLabel>
       </BlurInputLabel>
       <TacoInput
+        disabled={props.disabled}
         style={inputStyle}
         placeholder={placeholder}
         defaultValue={defaultValue}
@@ -323,6 +325,8 @@ function PhoneNumberInput(props: {
 }
 
 const FormInput = (props: {
+  initialValue?: any;
+  resetEmptyToValue?: string
   mustFill?: boolean;
   label: string;
   placeholder?: string;
@@ -339,6 +343,7 @@ const FormInput = (props: {
   const { mustFill, checkRule, label, placeholder, onChange, formName, className, inputRef } =
     props;
   const [valueValid, setValueValid] = useState(true);
+  const [valueIn, setValueIn] = useState(props.initialValue)
   return (
     <FormInputFiled className={className}>
       <InputLabel
@@ -347,6 +352,7 @@ const FormInput = (props: {
         errorMsg={valueValid ? "" : checkRule?.errorMsg}
       />
       <TacoInput
+        value={valueIn === "" ? props.resetEmptyToValue || valueIn : valueIn}
         ref={inputRef}
         name={formName}
         placeholder={placeholder}
@@ -356,6 +362,7 @@ const FormInput = (props: {
             valid = checkRule.check(e.target.value);
             setValueValid(valid);
           }
+          setValueIn(e.target.value)
           onChange && onChange(e.target.value, valid);
         }}
       />

diff --git a/client/packages/openblocks/src/api/configApi.ts b/client/packages/openblocks/src/api/configApi.ts
@@ -2,17 +2,23 @@ import Api from "./api";
 import { AxiosPromise } from "axios";
 import { ApiResponse } from "./apiResponses";
 import { ConfigResponseData } from "constants/configConstants";
+import { CustomConfigPayload } from "redux/reduxActions/configActions";
 
 export interface ConfigResponse extends ApiResponse {
   data: ConfigResponseData;
 }
 
 class ConfigApi extends Api {
   static configURL = "/v1/configs";
+  static customConfigURL = "/v1/configs/custom-configs"
 
   static fetchConfig(): AxiosPromise<ConfigResponse> {
     return Api.get(ConfigApi.configURL);
   }
+
+  static setCustomConfig(request: CustomConfigPayload): AxiosPromise<ConfigResponse> {
+    return Api.put(ConfigApi.customConfigURL, request.data)
+  }
 }
 
 export default ConfigApi;
diff --git a/client/packages/openblocks/src/app.tsx b/client/packages/openblocks/src/app.tsx
@@ -44,15 +44,20 @@ import { isFetchUserFinished } from "redux/selectors/usersSelectors";
 import { SystemWarning } from "./components/SystemWarning";
 import { getBrandingConfig, getSystemConfigFetching } from "./redux/selectors/configSelectors";
 import { buildMaterialPreviewURL } from "./util/materialUtils";
+import RootWrapper from "components/RootWrapper";
 
 const LazyUserAuthComp = React.lazy(() => import("pages/userAuth"));
 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"));
 
-const Wrapper = (props: { children: React.ReactNode }) => {
-  return <ConfigProvider locale={getAntdLocale(language)}>{props.children}</ConfigProvider>;
+const Wrapper = (props: { children: React.ReactNode, headerColor?: string }) => {
+  return (
+    <RootWrapper headerColor={props.headerColor}>
+      <ConfigProvider locale={getAntdLocale(language)}>{props.children}</ConfigProvider>
+    </RootWrapper>
+  )
 };
 
 type AppIndexProps = {
@@ -66,6 +71,7 @@ type AppIndexProps = {
   fetchHome: () => void;
   favicon: string;
   brandName: string;
+  headerColor?: string;
 };
 
 class AppIndex extends React.Component<AppIndexProps, any> {
@@ -96,7 +102,7 @@ class AppIndex extends React.Component<AppIndexProps, any> {
       return <ProductLoading hideHeader={hideLoadingHeader} />;
     }
     return (
-      <Wrapper>
+      <Wrapper headerColor={this.props.orgDev ? undefined : this.props.headerColor}>
         <Helmet>
           {<title>{this.props.brandName}</title>}
           {<link rel="icon" href={this.props.favicon} />}
@@ -167,7 +173,8 @@ const mapStateToProps = (state: AppState) => ({
   favicon: getBrandingConfig(state)?.favicon
     ? buildMaterialPreviewURL(getBrandingConfig(state)?.favicon!)
     : favicon,
-  brandName: getBrandingConfig(state)?.brandName ?? trans("productName")
+  brandName: getBrandingConfig(state)?.brandName ?? trans("productName"),
+  headerColor: getBrandingConfig(state)?.headerColor
 });
 
 const mapDispatchToProps = (dispatch: any) => ({

diff --git a/client/packages/openblocks/src/base/codeEditor/codeEditor.tsx b/client/packages/openblocks/src/base/codeEditor/codeEditor.tsx
@@ -106,7 +106,7 @@ export const CodeEditorTooltipContainer = styled.div`
     display: inline-flex;
     align-items: baseline;
     cursor: pointer;
-    color: #4965f2;
+    color: var(--adm-color-primary-link);
     ${textStyle};
     font-weight: 600;
   }
@@ -200,7 +200,9 @@ export const CodeEditorTooltipContainer = styled.div`
 `;
 
 function getStyle(styleName?: StyleName) {
-  return styleName ? styles[styleName] : { minHeight: "auto", maxHeight: "180px" };
+  return styleName
+    ? styles[styleName]
+    : { minHeight: "auto", maxHeight: "180px" };
 }
 
 function useCodeMirror(
@@ -212,12 +214,16 @@ function useCodeMirror(
 
   // will not trigger view.setState when typing inputs, to avoid focus chaos
   const isTypingRef = useRef(0);
-  const showLineNum = props.showLineNum ?? getStyle(props.styleName).showLineNum;
+  const showLineNum =
+    props.showLineNum ?? getStyle(props.styleName).showLineNum;
 
   const handleChange = useCallback(
     (state: EditorState) => {
       window.clearTimeout(isTypingRef.current);
-      isTypingRef.current = window.setTimeout(() => (isTypingRef.current = 0), 100);
+      isTypingRef.current = window.setTimeout(
+        () => (isTypingRef.current = 0),
+        100
+      );
       onChange?.(state);
     },
     [onChange]
@@ -236,7 +242,10 @@ function useCodeMirror(
      * 1. switch to the same type of comp
      * 2. change the current comp's value by dispatchChangeValueAction
      */
-    if (!view || (!isTypingRef.current && value !== view.state.doc.toString())) {
+    if (
+      !view ||
+      (!isTypingRef.current && value !== view.state.doc.toString())
+    ) {
       const state = EditorState.create({ doc: value, extensions });
       if (view) {
         view.setState(state);
@@ -246,7 +255,12 @@ function useCodeMirror(
     }
   }, [container, value, extensions]);
 
-  useClickCompNameEffect(viewRef.current, value, props.codeType, props.exposingData);
+  useClickCompNameEffect(
+    viewRef.current,
+    value,
+    props.codeType,
+    props.exposingData
+  );
 
   useEffect(() => {
     return () => {
@@ -333,7 +347,9 @@ const CodeEditorWrapper = styled.div`
 `;
 
 function canShowCard(props: CodeEditorProps) {
-  return !props.disableCard && (props.codeType !== "Function" || props.hasError);
+  return (
+    !props.disableCard && (props.codeType !== "Function" || props.hasError)
+  );
 }
 
 function CodeEditorCommon(
@@ -344,10 +360,13 @@ function CodeEditorCommon(
     cardStyle?: React.CSSProperties;
   }
 ) {
-  const { editor, children, disabled, cardStyle, onClick, ...editorProps } = props;
+  const { editor, children, disabled, cardStyle, onClick, ...editorProps } =
+    props;
   const { view, isFocus } = useCodeMirror(editorProps, editor);
   return (
-    <CodeEditorWrapper onClick={onClick ? (e) => view && onClick(e, view) : undefined}>
+    <CodeEditorWrapper
+      onClick={onClick ? (e) => view && onClick(e, view) : undefined}
+    >
       {!disabled && view && props.widgetPopup?.(view)}
       {children}
       <PopupCard
@@ -367,7 +386,11 @@ function CodeEditorCommon(
 function CodeEditorForPanel(props: CodeEditorProps) {
   const editor = useRef<HTMLDivElement>();
   return (
-    <CodeEditorCommon {...props} editor={editor} cardStyle={{ borderRadius: "8px" }}>
+    <CodeEditorCommon
+      {...props}
+      editor={editor}
+      cardStyle={{ borderRadius: "8px" }}
+    >
       <CodeEditorPanelContainer
         styleName={props.styleName}
         ref={editor as MutableRefObject<HTMLDivElement>}
@@ -397,7 +420,9 @@ export function CodeEditor(props: CodeEditorProps) {
         {expandable && (
           <CodeEditorPanel
             breadcrumb={[props.label ?? ""]}
-            editor={<CodeEditorForPanel {...props} styleName="window" showLineNum />}
+            editor={
+              <CodeEditorForPanel {...props} styleName="window" showLineNum />
+            }
             onVisibleChange={(visible) => setDisabled(visible)}
           />
         )}

diff --git a/client/packages/openblocks/src/base/codeEditor/completion/ternServer.tsx b/client/packages/openblocks/src/base/codeEditor/completion/ternServer.tsx
@@ -1,5 +1,9 @@
 import { checkCursorInBinding } from "base/codeEditor/codeEditorUtils";
-import { Completion, CompletionContext, CompletionResult } from "base/codeEditor/codeMirror";
+import {
+  Completion,
+  CompletionContext,
+  CompletionResult,
+} from "base/codeEditor/codeMirror";
 import { CompletionsQuery, Def, Server } from "tern";
 import ecma from "./defs/ecmascript.json";
 import { CompletionSource } from "./completion";
@@ -100,7 +104,7 @@ export class TernServer extends CompletionSource {
                   <div class="hintDiv" onclick='javascript:window.open("${completion.url}")' >
                     <svg width="16px" height="16px" class="hintSvg" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                       <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
-                          <g transform="translate(8.000000, 8.000000) rotate(30.000000) translate(-8.000000, -8.000000) translate(5.000000, 1.500000)" stroke="#4965F2" stroke-width="1.5">
+                          <g transform="translate(8.000000, 8.000000) rotate(30.000000) translate(-8.000000, -8.000000) translate(5.000000, 1.500000)" stroke="var(--adm-color-primary-link)" stroke-width="1.5">
                               <path d="M0,4.5 L0,3 C0,1.34314575 1.34314575,0 3,0 C4.65685425,0 6,1.34314575 6,3 L6,4.5 L6,4.5 M6,8.5 L6,10 C6,11.6568542 4.65685425,13 3,13 C1.34314575,13 0,11.6568542 0,10 L0,8.5 L0,8.5"></path>
                               <line x1="3" y1="4" x2="3" y2="9"></line>
                           </g>

diff --git a/client/packages/openblocks/src/components/LinkPlusButton.tsx b/client/packages/openblocks/src/components/LinkPlusButton.tsx
@@ -12,7 +12,7 @@ const Icon = styled.div`
 const Btn = styled(TacoButton)`
   height: 13px;
   padding: 0;
-  color: #4965f2;
+  color: var(--adm-color-primary-link);
   border: none;
   display: flex;
   align-items: center;

diff --git a/client/packages/openblocks/src/components/PermissionDialog/AppPermissionDialog.tsx b/client/packages/openblocks/src/components/PermissionDialog/AppPermissionDialog.tsx
@@ -48,10 +48,6 @@ export const AppPermissionDialog = (props: {
 
   let permissions: PermissionItemsType = [];
   if (appPermissionInfo) {
-    const creator = appPermissionInfo.permissions.find(
-      (p) => p.type === "USER" && p.id === appPermissionInfo.creatorId
-    );
-
     permissions = [
       {
         permissionItem: {
@@ -63,20 +59,10 @@ export const AppPermissionDialog = (props: {
         },
       },
       ...appPermissionInfo.permissions
-        .filter((p) => !(p.type === "USER" && p.id === appPermissionInfo.creatorId))
         .map((p) => ({
           permissionItem: p,
         })),
     ];
-    if (creator) {
-      permissions = [
-        {
-          isCreator: true,
-          permissionItem: creator,
-        },
-        ...permissions,
-      ];
-    }
   }
 
   return (

diff --git a/client/packages/openblocks/src/components/PermissionDialog/Permission.tsx b/client/packages/openblocks/src/components/PermissionDialog/Permission.tsx
@@ -198,7 +198,7 @@ type PermissionAddEntity = {
  * @param filterItems filterItems
  */
 function getPermissionOptionView(
-  orgGroups: (OrgGroup & { avatarUrl?: string })[],
+  orgGroups: OrgGroup[],
   orgUsers: OrgUser[],
   currentUser: User,
   filterItems: PermissionItem[]
@@ -208,7 +208,6 @@ function getPermissionOptionView(
       type: "GROUP",
       id: group.groupId,
       name: group.groupName,
-      avatarUrl: group.avatarUrl
     };
   });
   permissionViews = permissionViews.concat(
@@ -238,7 +237,7 @@ function PermissionSelectorOption(props: { optionView: AddAppOptionView }) {
     <OptionViewWrapper>
       <ProfileImage
         userName={optionView.name}
-        side={32}
+        size={32}
         source={optionView.avatarUrl}
         svg={groupIcon}
       />
@@ -250,11 +249,11 @@ function PermissionSelectorOption(props: { optionView: AddAppOptionView }) {
 function PermissionSelectorLabel(props: { view: AddAppOptionView }) {
   const { view } = props;
   const groupIcon = view.type === "GROUP" && (
-    <StyledGroupIcon color={getInitialsAndColorCode(view.name)[1]} side={9} />
+    <StyledGroupIcon color={getInitialsAndColorCode(view.name)[1]} size={9} />
   );
   return (
     <div style={{ display: "flex", alignItems: "center" }}>
-      <LabelProfileImage userName={view.name} side={18} source={view.avatarUrl} svg={groupIcon} />
+      <LabelProfileImage userName={view.name} size={18} source={view.avatarUrl} svg={groupIcon} />
       <CommonTextLabel
         style={{
           marginLeft: "4px",