Merge branch 'feat/data-grid' into develop

illacloud · Oct 30, 2023 · 3266ada · 3266ada
2 parents f329281 + 9b81189
commit 3266ada
Show file tree

Hide file tree

Showing 8 changed files with 164 additions and 243 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -173,7 +173,7 @@ jobs:
  name: Build and push Docker image
  command: |
  cd ./build-all-in-one-image
- docker build -f ./dockerfile -t illasoft/illa-builder:${IMAGE_TAG} --build-arg FE=${FE} --build-arg BE=${BE} --build-arg SBE=${SBE} --no-cache .
+ docker build -f ./dockerfile -t illasoft/illa-builder:${IMAGE_TAG} --build-arg FE=${FE} --build-arg BE=${BE} --build-arg SBE=${SBE} --no-cache --build-arg FE_ILLA_MUI_LICENSE=${ILLA_MUI_LICENSE} .
  docker login -u $DOCKER_LOGIN -p $DOCKER_PWD
  docker push illasoft/illa-builder:${IMAGE_TAG}
  if [ << parameters.TAG >> = true ]; then

diff --git a/apps/builder/src/components/Guide/GuideDraggablePopover/style.ts b/apps/builder/src/components/Guide/GuideDraggablePopover/style.ts
@@ -58,7 +58,7 @@ export const applyPopoverStyle = (
 
  return css`
  cursor: move;
- z-index: 2;
+ z-index: 11;
  position: absolute;
  background-color: ${getColor("techPurple", "01")};
  color: ${getColor("white", "01")};

diff --git a/apps/builder/src/config/guide/components.json b/apps/builder/src/config/guide/components.json
@@ -1,17 +1,16 @@
 [
  {
+ "version": 0,
  "displayName": "input1",
  "parentNode": "bodySection1-bodySectionContainer1",
  "showName": "input",
  "childrenNode": null,
  "type": "INPUT_WIDGET",
  "containerType": "EDITOR_SCALE_SQUARE",
-
  "h": 6,
  "w": 8,
  "minH": 3,
  "minW": 1,
-
  "x": 9,
  "y": 17,
  "z": 0,
@@ -29,135 +28,197 @@
  }
  },
  {
+ "version": 0,
  "displayName": "button1",
  "parentNode": "bodySection1-bodySectionContainer1",
  "showName": "button",
-
  "childrenNode": null,
  "type": "BUTTON_WIDGET",
  "containerType": "EDITOR_SCALE_SQUARE",
-
  "h": 5,
  "w": 6,
  "minH": 3,
  "minW": 1,
-
  "x": 17,
  "y": 17,
  "z": 0,
  "props": {
  "$dynamicAttrPaths": [],
  "colorScheme": "blue",
+ "events": [
+ {
+ "actionType": "datasource",
+ "eventType": "click",
+ "id": "events-dc33da8b-1dec-49ea-b4b6-44d7570e6ec9",
+ "queryID": "postgresql1"
+ }
+ ],
  "hidden": false,
  "text": "Button",
  "variant": "fill"
  }
  },
  {
- "displayName": "table1",
+ "version": 0,
+ "displayName": "dataGrid1",
  "parentNode": "bodySection1-bodySectionContainer1",
- "showName": "table",
-
+ "showName": "dataGrid",
  "childrenNode": null,
- "type": "TABLE_WIDGET",
+ "type": "DATA_GRID_WIDGET",
  "containerType": "EDITOR_SCALE_SQUARE",
-
  "h": 38,
  "w": 14,
  "minH": 3,
  "minW": 1,
-
  "x": 9,
  "y": 25,
  "z": 0,
  "props": {
- "$dynamicAttrPaths": ["dataSourceJS", "pageSize"],
- "columnMapper": {
- "incomes": {
- "accessorKey": "incomes",
- "columnIndex": 2,
- "enableSorting": true,
- "format": "YYYY-MM-DD",
- "header": "incomes",
- "id": "incomes",
- "type": "text",
- "visible": true
+ "$dynamicAttrPaths": ["dataSourceJS"],
+ "columns": [
+ {
+ "aggregable": true,
+ "columnType": "auto",
+ "description": "",
+ "disableReorder": false,
+ "field": "charge",
+ "filterable": true,
+ "groupable": true,
+ "headerAlign": "left",
+ "headerName": "charge",
+ "hideable": true,
+ "isCalc": true,
+ "pinnable": true,
+ "resizable": true,
+ "sortable": true,
+ "width": 170
  },
- "month": {
- "accessorKey": "month",
- "columnIndex": 0,
- "enableSorting": true,
- "format": "YYYY-MM-DD",
- "header": "month",
- "id": "month",
- "type": "text",
- "visible": true
+ {
+ "aggregable": true,
+ "columnType": "auto",
+ "description": "",
+ "disableReorder": false,
+ "field": "email",
+ "filterable": true,
+ "groupable": true,
+ "headerAlign": "left",
+ "headerName": "email",
+ "hideable": true,
+ "isCalc": true,
+ "pinnable": true,
+ "resizable": true,
+ "sortable": true,
+ "width": 170
+ },
+ {
+ "aggregable": true,
+ "columnType": "auto",
+ "description": "",
+ "disableReorder": false,
+ "field": "expired_time",
+ "filterable": true,
+ "groupable": true,
+ "headerAlign": "left",
+ "headerName": "expired_time",
+ "hideable": true,
+ "isCalc": true,
+ "pinnable": true,
+ "resizable": true,
+ "sortable": true,
+ "width": 170
+ },
+ {
+ "aggregable": true,
+ "columnType": "auto",
+ "description": "",
+ "disableReorder": false,
+ "field": "feature_flag",
+ "filterable": true,
+ "groupable": true,
+ "headerAlign": "left",
+ "headerName": "feature_flag",
+ "hideable": true,
+ "isCalc": true,
+ "pinnable": true,
+ "resizable": true,
+ "sortable": true,
+ "width": 170
+ },
+ {
+ "aggregable": true,
+ "columnType": "auto",
+ "description": "",
+ "disableReorder": false,
+ "field": "id",
+ "filterable": true,
+ "groupable": true,
+ "headerAlign": "left",
+ "headerName": "id",
+ "hideable": true,
+ "isCalc": true,
+ "pinnable": true,
+ "resizable": true,
+ "sortable": true,
+ "width": 170
  },
- "users": {
- "accessorKey": "users",
- "columnIndex": 1,
- "enableSorting": true,
- "format": "YYYY-MM-DD",
- "header": "users",
- "id": "users",
- "type": "text",
- "visible": true
- }
- },
- "columnNameIndices": {
- "0": "month",
- "1": "users",
- "2": "incomes"
- },
- "columnVisibility": {
- "incomes": true,
- "month": true,
- "users": true
- },
- "columns": [
  {
- "accessorKey": "month",
- "columnIndex": 0,
- "enableSorting": true,
- "format": "YYYY-MM-DD",
- "header": "month",
- "id": "month",
- "type": "text",
- "visible": true
+ "aggregable": true,
+ "columnType": "auto",
+ "description": "",
+ "disableReorder": false,
+ "field": "img",
+ "filterable": true,
+ "groupable": true,
+ "headerAlign": "left",
+ "headerName": "img",
+ "hideable": true,
+ "isCalc": true,
+ "pinnable": true,
+ "resizable": true,
+ "sortable": true,
+ "width": 170
  },
  {
- "accessorKey": "users",
- "columnIndex": 1,
- "enableSorting": true,
- "format": "YYYY-MM-DD",
- "header": "users",
- "id": "users",
- "type": "text",
- "visible": true
+ "aggregable": true,
+ "columnType": "auto",
+ "description": "",
+ "disableReorder": false,
+ "field": "name",
+ "filterable": true,
+ "groupable": true,
+ "headerAlign": "left",
+ "headerName": "name",
+ "hideable": true,
+ "isCalc": true,
+ "pinnable": true,
+ "resizable": true,
+ "sortable": true,
+ "width": 170
  },
  {
- "accessorKey": "incomes",
- "columnIndex": 2,
- "enableSorting": true,
- "format": "YYYY-MM-DD",
- "header": "incomes",
- "id": "incomes",
- "type": "text",
- "visible": true
+ "aggregable": true,
+ "columnType": "auto",
+ "description": "",
+ "disableReorder": false,
+ "field": "start_time",
+ "filterable": true,
+ "groupable": true,
+ "headerAlign": "left",
+ "headerName": "start_time",
+ "hideable": true,
+ "isCalc": true,
+ "pinnable": true,
+ "resizable": true,
+ "sortable": true,
+ "width": 170
  }
  ],
- "customColumnIndices": {},
- "dataSourceJS": "{{[\n {\n \"month\": \"April\",\n \"users\": 3700,\n \"incomes\": 4000\n },\n {\n \"month\": \"May\",\n \"users\": 5400,\n \"incomes\": 8700\n },\n {\n \"month\": \"June\",\n \"users\": 6000,\n \"incomes\": 12000\n },\n {\n \"month\": \"July\",\n \"users\": 8000,\n \"incomes\": 14000\n }\n]}}",
+ "dataSource": [],
+ "dataSourceJS": "{{postgresql1.data}}",
  "dataSourceMode": "dynamic",
- "defaultSortKey": "default",
- "defaultSortOrder": "ascend",
- "download": false,
- "emptyState": "No rows found",
- "filter": false,
- "overFlow": "pagination",
- "pageSize": "{{10}}",
- "renamedColumnNames": {},
- "rowEvents": {}
+ "excludeHiddenColumns": true,
+ "overFlow": "scroll",
+ "sortOrder": "default"
  }
  }
 ]
diff --git a/apps/builder/src/config/guide/config.tsx b/apps/builder/src/config/guide/config.tsx
@@ -20,9 +20,9 @@ export const SELECT_WIDGET_ITEM = {
  highlightIcon: ButtonHighlightIcon,
  ...WidgetConfigMap["BUTTON_WIDGET"].config,
  },
- TABLE_WIDGET: {
+ DATA_GRID_WIDGET: {
  highlightIcon: TableHighlightIcon,
- ...WidgetConfigMap["TABLE_WIDGET"].config,
+ ...WidgetConfigMap["DATA_GRID_WIDGET"].config,
  },
 }
 
@@ -75,7 +75,7 @@ export const GUIDE_STEP = [
  titleKey: "",
  descKey: "",
  selector: "",
- widgetType: "TABLE_WIDGET",
+ widgetType: "DATA_GRID_WIDGET",
  reduxAction: "components/addComponentReducer",
  },
  {
@@ -120,11 +120,11 @@ export const GUIDE_STEP = [
  titleKey: "editor.tutorial.panel.onboarding_app.display_data_title",
  descKey:
  "editor.tutorial.panel.onboarding_app.display_data_description_select",
- selector: `[data-displayname="table1"]`,
- displayName: `table1`,
+ selector: `[data-displayname="dataGrid1"]`,
+ displayName: `dataGrid1`,
  reduxAction: "config/updateSelectedComponent",
  doItForMe: () => {
- store.dispatch(configActions.updateSelectedComponent(["table1"]))
+ store.dispatch(configActions.updateSelectedComponent(["dataGrid1"]))
  },
  },
  {
@@ -136,7 +136,7 @@ export const GUIDE_STEP = [
  doItForMe: () => {
  store.dispatch(
  componentsActions.updateComponentPropsReducer({
- displayName: "table1",
+ displayName: "dataGrid1",
  updateSlice: {
  dataSourceJS: "{{postgresql1.data}}",
  },

diff --git a/apps/builder/src/page/App/components/ComponentPanel/componentListBuilder.tsx b/apps/builder/src/page/App/components/ComponentPanel/componentListBuilder.tsx
@@ -11,6 +11,8 @@ import {
  widgetBuilder,
 } from "@/widgetLibrary/widgetBuilder"
 
+export const DEPRECATED_WIDGETS = ["CHART", "TABLE_WIDGET"]
+
 export type SessionType = keyof typeof sessionTypeMapSessionNameKey
 
 export const sessionTypeMapSessionNameKey = {
@@ -26,7 +28,7 @@ export const sessionTypeMapSessionNameKey = {
 }
 
 const COMMONLY_WIDGET = new Set([
- "TABLE_WIDGET",
+ "DATA_GRID_WIDGET",
  "TEXT_WIDGET",
  "BUTTON_WIDGET",
  "INPUT_WIDGET",
@@ -78,7 +80,9 @@ const translateChildren = (componentConfigs: WidgetConfig[]) => {
 }
 
 export const buildComponentConfigs = () => {
- return WidgetTypeList.filter((type) => type !== "CHART").map((item) => {
+ return WidgetTypeList.filter(
+ (type) => !DEPRECATED_WIDGETS.includes(type),
+ ).map((item) => {
  return getListItemConfig(item) as WidgetConfig
  }) as WidgetConfig[]
 }