Render view groupBy array options as tags (#8764)

* Fix to properly render groupBy options as tags

* Fixes for viewBuilder function definition and some typescript updates

packages/server/src/api/controllers/table/utils.ts

@@ -316,7 +316,13 @@ export async function checkForViewUpdates(
 
     // Update view if required
     if (needsUpdated) {
-      const newViewTemplate = viewTemplate(view.meta)
+      const groupByField: any = Object.values(table.schema).find(
+        (field: any) => field.name == view.groupBy
+      )
+      const newViewTemplate = viewTemplate(
+        view.meta,
+        groupByField?.type === FieldTypes.ARRAY
+      )
       await saveView(null, view.name, newViewTemplate)
       if (!newViewTemplate.meta.schema) {
         newViewTemplate.meta.schema = table.schema

packages/server/src/api/controllers/view/index.ts

@@ -25,7 +25,15 @@ export async function fetch(ctx: BBContext) {
 export async function save(ctx: BBContext) {
   const db = context.getAppDB()
   const { originalName, ...viewToSave } = ctx.request.body
-  const view = viewTemplate(viewToSave)
+
+  const existingTable = await db.get(ctx.request.body.tableId)
+  const table = cloneDeep(existingTable)
+
+  const groupByField: any = Object.values(table.schema).find(
+    (field: any) => field.name == viewToSave.groupBy
+  )
+
+  const view = viewTemplate(viewToSave, groupByField?.type === FieldTypes.ARRAY)
   const viewName = viewToSave.name
 
   if (!viewName) {
@@ -35,8 +43,6 @@ export async function save(ctx: BBContext) {
   await saveView(originalName, viewName, view)
 
   // add views to table document
-  const existingTable = await db.get(ctx.request.body.tableId)
-  const table = cloneDeep(existingTable)
   if (!table.views) table.views = {}
   if (!view.meta.schema) {
     view.meta.schema = table.schema

packages/server/src/api/controllers/view/viewBuilder.ts

@@ -6,6 +6,7 @@ type ViewTemplateOpts = {
   groupBy: string
   filters: ViewFilter[]
   calculation: string
+  groupByMulti: boolean
 }
 
 const TOKEN_MAP: Record<string, string> = {
@@ -41,6 +42,12 @@ const GROUP_PROPERTY: Record<string, { type: string }> = {
   },
 }
 
+const GROUP_PROPERTY_MULTI: Record<string, { type: string }> = {
+  group: {
+    type: "array",
+  },
+}
+
 const FIELD_PROPERTY: Record<string, { type: string }> = {
   field: {
     type: "string",
@@ -136,13 +143,10 @@ function parseEmitExpression(field: string, groupBy: string) {
  * filters: Array of filter objects containing predicates that are parsed into a JS expression
  * calculation: an optional calculation to be performed over the view data.
  */
-export = function ({
-  field,
-  tableId,
-  groupBy,
-  filters = [],
-  calculation,
-}: ViewTemplateOpts) {
+export = function (
+  { field, tableId, groupBy, filters = [], calculation }: ViewTemplateOpts,
+  groupByMulti?: boolean
+) {
   // first filter can't have a conjunction
   if (filters && filters.length > 0 && filters[0].conjunction) {
     delete filters[0].conjunction
@@ -151,9 +155,11 @@ export = function ({
   let schema = null,
     statFilter = null
 
+  let groupBySchema = groupByMulti ? GROUP_PROPERTY_MULTI : GROUP_PROPERTY
+
   if (calculation) {
     schema = {
-      ...(groupBy ? GROUP_PROPERTY : FIELD_PROPERTY),
+      ...(groupBy ? groupBySchema : FIELD_PROPERTY),
       ...SCHEMA_MAP[calculation],
     }
     if (