feat: table column batch setting

fix(canvas): remove extra height in view mode
fix(table): fix a bug on setting selected row to expansionControl

Author: ggbond2077

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

@@ -299,6 +299,7 @@ const SelectWrapper = styled.div`
 
   .ant-select .ant-select-selector {
     padding: 0 0 0 8px;
+    margin: 0;
   }
 
   .ant-select:not(.ant-select-customize-input) .ant-select-selector {

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

@@ -195,7 +195,7 @@ function Option<T extends ConstructorToComp<MultiCompConstructor>>(props: {
   onCopy?: (comp: T) => void;
   onMove: (fromIndex: number, toIndex: number) => void;
   content: (comp: T, index: number) => React.ReactNode | JSX.Element;
-  itemTitle: (comp: T) => string;
+  itemTitle: (comp: T) => JSX.Element | string;
   popoverTitle: (comp: T) => string;
   dataIndex: (comp: T) => string;
   // unique value for deduplication

client/packages/openblocks/src/comps/comps/tableComp/tablePropertyView.tsx

@@ -346,7 +346,13 @@ function ColumnPropertyView<T extends MultiBaseComp<TableChildrenType>>(props: {
         }}
         items={columnOptionItems}
         optionToolbar={columnOptionToolbar}
-        itemTitle={(column) => column.getView().title}
+        itemTitle={(column) => {
+          const columnView = column.getView();
+          if (columnView.hide) {
+            return <span style={{ color: GreyTextColor }}>{columnView.title}</span>;
+          }
+          return columnView.title;
+        }}
         popoverTitle={(column) => {
           const columnView = column.getView();
           return columnView.isCustom ? trans("table.customColumn") : columnView.dataIndex;

client/packages/openblocks/src/comps/generators/withErrorBoundary.tsx

@@ -5,18 +5,24 @@ import styled from "styled-components";
 
 const ErrorMsg = styled.div`
   padding: 8px;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 `;
 
 const ErrorView = (props: { msg: string; onReload: () => void }) => {
   return (
     <ErrorMsg>
-      {trans("errorBoundary.encounterError")}
-      <a type="button" onClick={props.onReload}>
-        {trans("errorBoundary.clickToReload")}
-      </a>
-      <br />
-      {trans("errorBoundary.errorMsg")}
-      {props.msg}
+      <div>
+        {trans("errorBoundary.encounterError")}
+        <a type="button" onClick={props.onReload}>
+          {trans("errorBoundary.clickToReload")}
+        </a>
+        <br />
+        {trans("errorBoundary.errorMsg")}
+        {props.msg}
+      </div>
     </ErrorMsg>
   );
 };

client/packages/openblocks/src/pages/datasource/form.tsx

@@ -212,3 +212,27 @@ export const CertValidationFormItem = (props: { datasource: Datasource }) => {
     </>
   );
 };
+
+export const ForwardCookiesFormItem = (props: { datasource: Datasource }) => {
+  const datasourceConfig = props.datasource?.datasourceConfig as HttpConfig;
+
+  return (
+    <>
+      <FormSelectItem
+        open={false}
+        mode={"tags"}
+        name={"forwardCookies"}
+        label={trans("httpQuery.forwardCookies")}
+        options={[]}
+        initialValue={datasourceConfig?.forwardCookies}
+        labelWidth={142}
+      />
+      <FormCheckboxItem
+        name={"forwardAllCookies"}
+        label={trans("httpQuery.forwardAllCookies")}
+        initialValue={datasourceConfig?.forwardAllCookies}
+        labelWidth={142}
+      />
+    </>
+  );
+};

client/packages/openblocks/src/pages/datasource/form/graphqlDatasourceForm.tsx

@@ -16,6 +16,7 @@ import {
   CertValidationFormItem,
   DatasourceNameFormInputItem,
   encryptedPlaceholder,
+  ForwardCookiesFormItem,
   GeneralSettingFormSectionLabel,
 } from "../form";
 import { DatasourceFormProps } from "./datasourceFormRegistry";
@@ -143,6 +144,7 @@ export const GraphqlDatasourceForm = (props: DatasourceFormProps) => {
       <FormSection size={props.size}>
         <AdvancedSettingFormSectionLabel />
         <CertValidationFormItem datasource={props.datasource} />
+        <ForwardCookiesFormItem datasource={props.datasource} />
       </FormSection>
     </DatasourceForm>
   );

client/packages/openblocks/src/pages/datasource/form/httpDatasourceForm.tsx

@@ -2,7 +2,6 @@ import { Rule } from "antd/lib/form";
 import { HttpConfig } from "api/datasourceApi";
 import {
   DatasourceForm,
-  FormCheckboxItem,
   FormInputItem,
   FormKeyValueItem,
   FormSection,
@@ -17,6 +16,7 @@ import {
   CertValidationFormItem,
   DatasourceNameFormInputItem,
   encryptedPlaceholder,
+  ForwardCookiesFormItem,
   GeneralSettingFormSectionLabel,
 } from "../form";
 import { DatasourceFormProps } from "./datasourceFormRegistry";
@@ -155,21 +155,7 @@ export const HttpDatasourceForm = (props: DatasourceFormProps) => {
       <FormSection size={props.size}>
         <AdvancedSettingFormSectionLabel />
         <CertValidationFormItem datasource={props.datasource} />
-        <FormSelectItem
-          open={false}
-          mode={"tags"}
-          name={"forwardCookies"}
-          label={trans("httpQuery.forwardCookies")}
-          options={[]}
-          initialValue={datasourceConfig?.forwardCookies}
-          labelWidth={142}
-        />
-        <FormCheckboxItem
-          name={"forwardAllCookies"}
-          label={trans("httpQuery.forwardAllCookies")}
-          initialValue={datasourceConfig?.forwardAllCookies}
-          labelWidth={142}
-        />
+        <ForwardCookiesFormItem datasource={props.datasource} />
       </FormSection>
 
       {/*<KeyValueFormItem label={"Extra body values"} />*/}