[Frontend] Add fake table element

web-frontend/modules/builder/components/dataSource/DataSourceForm.vue

@@ -9,6 +9,7 @@
         />
         <Dropdown
           v-model="values.type"
+          fixed-items
           class="data-source-form__type-dropdown"
           :placeholder="$t('dataSourceForm.servicePlaceholder')"
         >

web-frontend/modules/builder/components/elements/components/TableElement.vue

@@ -0,0 +1,37 @@
+<template>
+  <table class="table-element">
+    <thead>
+      <tr class="table-element__header-row">
+        <th class="table-element__header-cell">Column 1</th>
+        <th class="table-element__header-cell">Column 2</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr class="table-element__row">
+        <td class="table-element__cell">Value 1</td>
+        <td class="table-element__cell">Value 2</td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<script>
+import element from '@baserow/modules/builder/mixins/element'
+
+export default {
+  name: 'TableElement',
+  mixins: [element],
+  props: {
+    /**
+     * @type {Object}
+     * @property {int} data_source_id - The collection data source Id we want to
+     *   display.
+     * @property {Object} fields - The fields of the data source.
+     */
+    element: {
+      type: Object,
+      required: true,
+    },
+  },
+}
+</script>

web-frontend/modules/builder/components/elements/components/forms/general/LinkElementForm.vue

@@ -125,7 +125,6 @@ import {
   HORIZONTAL_ALIGNMENTS,
   WIDTHS,
 } from '@baserow/modules/builder/enums'
-import FormulaInputGroup from '@baserow/modules/core/components/formula/FormulaInputGroup'
 import WidthSelector from '@baserow/modules/builder/components/elements/components/forms/general/settings/WidthSelector'
 import { PageParameterDataProviderType } from '@baserow/modules/builder/dataProviderTypes'
 import ApplicationBuilderFormulaInputGroup from '@baserow/modules/builder/components/ApplicationBuilderFormulaInputGroup'
@@ -134,7 +133,6 @@ export default {
   name: 'LinkElementForm',
   components: {
     WidthSelector,
-    FormulaInputGroup,
     ApplicationBuilderFormulaInputGroup,
     HorizontalAlignmentSelector,
   },

web-frontend/modules/builder/components/elements/components/forms/general/TableElementForm.vue

@@ -0,0 +1,50 @@
+<template>
+  <form @submit.prevent @keydown.enter.prevent>
+    <FormElement class="control">
+      <label class="control__label">
+        {{ $t('tableElementForm.dataSource') }}
+      </label>
+      <div class="control__elements">
+        <Dropdown v-model="values.data_source_id" :show-search="false">
+          <DropdownItem
+            v-for="dataSource in availableDataSources"
+            :key="dataSource.id"
+            :name="dataSource.name"
+            :value="dataSource.id"
+          />
+        </Dropdown>
+      </div>
+    </FormElement>
+  </form>
+</template>
+
+<script>
+import form from '@baserow/modules/core/mixins/form'
+
+export default {
+  name: 'TableElementForm',
+  components: {},
+  mixins: [form],
+  inject: ['page'],
+  data() {
+    return {
+      values: {
+        data_source_id: null,
+        fields: [],
+      },
+    }
+  },
+  computed: {
+    dataSources() {
+      return this.$store.getters['dataSource/getPageDataSources'](this.page)
+    },
+    availableDataSources() {
+      return this.dataSources.filter(
+        (dataSource) =>
+          dataSource.type &&
+          this.$registry.get('service', dataSource.type).isCollection
+      )
+    },
+  },
+}
+</script>

web-frontend/modules/builder/elementTypes.js

@@ -9,6 +9,8 @@ import ImageElementForm from '@baserow/modules/builder/components/elements/compo
 import ImageElement from '@baserow/modules/builder/components/elements/components/ImageElement'
 import InputTextElement from '@baserow/modules/builder/components/elements/components/InputTextElement.vue'
 import InputTextElementForm from '@baserow/modules/builder/components/elements/components/forms/general/InputTextElementForm.vue'
+import TableElement from '@baserow/modules/builder/components/elements/components/TableElement.vue'
+import TableElementForm from '@baserow/modules/builder/components/elements/components/forms/general/TableElementForm.vue'
 
 import { PAGE_PARAM_TYPE_VALIDATION_FUNCTIONS } from '@baserow/modules/builder/enums'
 import ColumnElement from '@baserow/modules/builder/components/elements/components/ColumnElement'
@@ -376,3 +378,29 @@ export class ButtonElementType extends ElementType {
     return [ClickEvent]
   }
 }
+
+export class TableElementType extends ElementType {
+  getType() {
+    return 'table'
+  }
+
+  get name() {
+    return this.app.i18n.t('elementType.table')
+  }
+
+  get description() {
+    return this.app.i18n.t('elementType.tableDescription')
+  }
+
+  get iconClass() {
+    return 'table'
+  }
+
+  get component() {
+    return TableElement
+  }
+
+  get generalFormComponent() {
+    return TableElementForm
+  }
+}

web-frontend/modules/builder/locales/en.json

@@ -68,7 +68,9 @@
         "column": "Columns",
         "columnDescription": "Columns container",
         "button": "Button",
-        "buttonDescription": "A button element"
+        "buttonDescription": "A button element",
+        "table": "Table",
+        "tableDescription": "A table element"
     },
     "addElementButton": {
         "label": "Element"
@@ -291,5 +293,8 @@
     },
     "getFormulaComponent": {
         "errorTooltip": "Invalid reference"
+    },
+    "tableElementForm": {
+      "dataSource": "Data source"
     }
 }

web-frontend/modules/builder/plugin.js

@@ -29,6 +29,7 @@ import {
   InputTextElementType,
   ColumnElementType,
   ButtonElementType,
+  TableElementType,
 } from '@baserow/modules/builder/elementTypes'
 import {
   DesktopDeviceType,
@@ -133,6 +134,7 @@ export default (context) => {
   app.$registry.register('element', new InputTextElementType(context))
   app.$registry.register('element', new ColumnElementType(context))
   app.$registry.register('element', new ButtonElementType(context))
+  app.$registry.register('element', new TableElementType(context))
 
   app.$registry.register('device', new DesktopDeviceType(context))
   app.$registry.register('device', new TabletDeviceType(context))

web-frontend/modules/core/assets/scss/components/builder/data_source_context.scss

@@ -1,6 +1,7 @@
 .data-source-context {
   padding: 12px;
   width: 560px;
+  overflow-x: hidden;
 }
 
 .data-source-context__none {

web-frontend/modules/core/assets/scss/components/builder/elements/all.scss

@@ -7,3 +7,4 @@
 @import 'input_element';
 @import 'column_element';
 @import 'button_element';
+@import 'table_element';

web-frontend/modules/core/assets/scss/components/builder/elements/table_element.scss

@@ -0,0 +1,24 @@
+.table-element {
+  width: 100%;
+  border: 1px solid $black;
+  border-spacing: 0;
+  text-align: left;
+  font-size: 12px;
+}
+
+.table-element__header-row {
+  background-color: $palette-neutral-200;
+}
+
+.table-element__header-cell,
+.table-element__cell {
+  padding: 12px 20px 10px 20px;
+}
+
+.table-element__header-cell {
+  font-weight: 600;
+}
+
+.table-element__cell {
+  border-top: 1px solid $black;
+}

web-frontend/modules/core/serviceTypes.js

@@ -23,6 +23,13 @@ export class ServiceType extends Registerable {
     return true
   }
 
+  /**
+   * Whether the service returns a collection of records.
+   */
+  get isCollection() {
+    return false
+  }
+
   getOrder() {
     return 0
   }

web-frontend/modules/integrations/serviceTypes.js

@@ -60,6 +60,10 @@ export class LocalBaserowListRowsServiceType extends ServiceType {
     return super.isValid(service) && Boolean(service.table_id)
   }
 
+  get isCollection() {
+    return true
+  }
+
   getOrder() {
     return 20
   }

web-frontend/test/helpers/testApp.js

@@ -6,6 +6,7 @@ import setupClient, {
 } from '@baserow/modules/core/plugins/clientHandler'
 
 import setupDatabasePlugin from '@baserow/modules/database/plugin'
+import setupBuilderPlugin from '@baserow/modules/builder/plugin'
 import { bootstrapVueContext } from '@baserow/test/helpers/components'
 import MockAdapter from 'axios-mock-adapter'
 import _ from 'lodash'
@@ -39,6 +40,7 @@ function _createBaserowStoreAndRegistry(app, vueContext, extraPluginSetupFunc) {
     app,
   }
   setupDatabasePlugin(setupContext)
+  setupBuilderPlugin(setupContext)
   setupHasFeaturePlugin(setupContext, (name, dep) => {
     app[`$${name}`] = dep
   })

web-frontend/test/unit/builder/store/dataSource.spec.js

@@ -0,0 +1,60 @@
+import { TestApp } from '@baserow/test/helpers/testApp'
+import { expect } from '@jest/globals'
+
+describe('dataSource store', () => {
+  let testApp = null
+  let store = null
+  let mockServer = null
+
+  beforeEach(() => {
+    testApp = new TestApp()
+    store = testApp.store
+    mockServer = testApp.mockServer
+  })
+
+  afterEach(() => {
+    testApp.afterEach()
+  })
+
+  test('Test getPageDataSources', () => {
+    const page = {
+      id: 42,
+      dataSources: [
+        { type: null },
+        { type: 'local_baserow_list_rows' },
+        { type: 'local_baserow_get_row' },
+      ],
+    }
+
+    const collectionDataSources =
+      store.getters['dataSource/getPageDataSources'](page)
+
+    expect(collectionDataSources.length).toBe(3)
+  })
+
+  test('Test fetch', async () => {
+    const page = {
+      id: 42,
+      dataSources: [],
+      _: {},
+    }
+
+    // Mock the fetch call
+    mockServer.mock
+      .onGet(`builder/page/42/data-sources/`)
+      .replyOnce(200, [
+        { type: null },
+        { type: 'local_baserow_list_rows' },
+        { type: 'local_baserow_get_row' },
+      ])
+
+    await store.dispatch('dataSource/fetch', {
+      page,
+    })
+
+    const collectionDataSources =
+      store.getters['dataSource/getPageDataSources'](page)
+
+    expect(collectionDataSources.length).toBe(3)
+  })
+})