adding opengraph metatags for better shareable links

packages/client/yarn.lock

@@ -670,6 +670,11 @@ has@^1.0.3:
   dependencies:
     function-bind "^1.1.1"
 
+html5-qrcode@^2.2.1:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/html5-qrcode/-/html5-qrcode-2.2.4.tgz#99e4b36fbd8fbc4956036cf3f21ea3e98c3463d1"
+  integrity sha512-X8wVVsHpNb35tl7KcoCGAboc6Nep2VyT3CIMjFvrfWrHbHTC0yYTjE+DhO/VcswY2MfHy1uB7b1G9+L13gM6dQ==
+
 htmlparser2@^6.0.0:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-6.1.0.tgz#c4d762b6c3371a05dbe65e94ae43a9f845fb8fb7"

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

@@ -111,6 +111,8 @@ export const serveApp = async function (ctx: any) {
     const App = require("./templates/BudibaseApp.svelte").default
     const plugins = enrichPluginURLs(appInfo.usedPlugins)
     const { head, html, css } = App.render({
+      metaImage:
+        "https://res.cloudinary.com/daog6scxm/image/upload/v1666109324/meta-images/budibase-meta-image_uukc1m.png",
       title: appInfo.name,
       production: env.isProd(),
       appId,

packages/server/src/api/controllers/static/templates/BudibaseApp.svelte

@@ -1,6 +1,8 @@
 <script>
   export let title = ""
   export let favicon = ""
+  export let metaImage = ""
+  export let url = ""
 
   export let clientLibPath
   export let usedPlugins
@@ -12,6 +14,14 @@
     name="viewport"
     content="width=device-width, initial-scale=1.0, viewport-fit=cover"
   />
+  <!-- Opengraph Meta Tags -->
+  <meta name="twitter:card" content="summary_large_image" />
+  <meta name="twitter:image" content={metaImage} />
+  <meta name="twitter:title" content="{title} - built with Budibase" />
+  <meta property="og:site_name" content="Budibase" />
+  <meta property="og:title" content={title} />
+  <meta property="og:type" content="website" />
+  <meta property="og:image" content={metaImage} />
 
   <title>{title}</title>
   <link rel="icon" type="image/png" href={favicon} />

qa-core/src/config/internal-api/TestConfiguration/applications.ts

@@ -8,8 +8,6 @@ import { AppPackageResponse } from "../fixtures/types/appPackage"
 import { DeployConfig } from "../fixtures/types/deploy"
 import { responseMessage } from "../fixtures/types/responseMessage"
 
-
-
 export default class AppApi {
   api: InternalAPIClient
 

qa-core/src/config/internal-api/TestConfiguration/rows.ts

@@ -3,26 +3,26 @@ import { Row } from "@budibase/types"
 import InternalAPIClient from "./InternalAPIClient"
 
 export default class RowsApi {
-    api: InternalAPIClient
+  api: InternalAPIClient
 
-    constructor(apiClient: InternalAPIClient) {
-        this.api = apiClient
-    }
+  constructor(apiClient: InternalAPIClient) {
+    this.api = apiClient
+  }
 
-    async getAll(tableId: string): Promise<[Response, Row[]]> {
-        const response = await this.api.get(`/${tableId}/rows`)
-        const json = await response.json()
-        return [response, json]
-    }
-    async add(tableId: string, body: any): Promise<[Response, Row]> {
-        const response = await this.api.post(`/${tableId}/rows`, { body })
-        const json = await response.json()
-        return [response, json]
-    }
+  async getAll(tableId: string): Promise<[Response, Row[]]> {
+    const response = await this.api.get(`/${tableId}/rows`)
+    const json = await response.json()
+    return [response, json]
+  }
+  async add(tableId: string, body: any): Promise<[Response, Row]> {
+    const response = await this.api.post(`/${tableId}/rows`, { body })
+    const json = await response.json()
+    return [response, json]
+  }
 
-    async delete(tableId: string, body: any): Promise<[Response, Row[]]> {
-        const response = await this.api.del(`/${tableId}/rows/`, { body })
-        const json = await response.json()
-        return [response, json]
-    }
+  async delete(tableId: string, body: any): Promise<[Response, Row[]]> {
+    const response = await this.api.del(`/${tableId}/rows/`, { body })
+    const json = await response.json()
+    return [response, json]
+  }
 }

qa-core/src/config/internal-api/TestConfiguration/screens.ts

@@ -1,23 +1,23 @@
-import { Screen } from  "@budibase/types"
+import { Screen } from "@budibase/types"
 import { Response } from "node-fetch"
 import InternalAPIClient from "./InternalAPIClient"
 
-  export default class ScreenApi {
-    api: InternalAPIClient
+export default class ScreenApi {
+  api: InternalAPIClient
 
-    constructor(apiClient: InternalAPIClient) {
-      this.api = apiClient
-    }
-  
-    async create(body: any): Promise<[Response, Screen]> {
-      const response = await this.api.post(`/screens`, { body })
-      const json = await response.json()
-      return [response, json]
-    }
-
-    async delete(screenId: string, rev: string): Promise<[Response, Screen]> {
-      const response = await this.api.del(`/screens/${screenId}/${rev}`)
-      const json = await response.json()
-      return [response, json]
-    }
+  constructor(apiClient: InternalAPIClient) {
+    this.api = apiClient
   }
+
+  async create(body: any): Promise<[Response, Screen]> {
+    const response = await this.api.post(`/screens`, { body })
+    const json = await response.json()
+    return [response, json]
+  }
+
+  async delete(screenId: string, rev: string): Promise<[Response, Screen]> {
+    const response = await this.api.del(`/screens/${screenId}/${rev}`)
+    const json = await response.json()
+    return [response, json]
+  }
+}

qa-core/src/config/internal-api/TestConfiguration/tables.ts

@@ -3,38 +3,39 @@ import { Table } from "@budibase/types"
 import InternalAPIClient from "./InternalAPIClient"
 import { responseMessage } from "../fixtures/types/responseMessage"
 
-
 export default class TablesApi {
-    api: InternalAPIClient
+  api: InternalAPIClient
 
-    constructor(apiClient: InternalAPIClient) {
-        this.api = apiClient
-    }
+  constructor(apiClient: InternalAPIClient) {
+    this.api = apiClient
+  }
 
-    async getAll(expectedNumber: Number): Promise<[Response, Table[]]> {
-        const response = await this.api.get(`/tables`)
-        const json = await response.json()
-        expect(response).toHaveStatusCode(200)
-        expect(json.length).toBe(expectedNumber)
-        return [response, json]
-    }
+  async getAll(expectedNumber: Number): Promise<[Response, Table[]]> {
+    const response = await this.api.get(`/tables`)
+    const json = await response.json()
+    expect(response).toHaveStatusCode(200)
+    expect(json.length).toBe(expectedNumber)
+    return [response, json]
+  }
 
-    async getTableById(id: string): Promise<[Response, Table]> {
-        const response = await this.api.get(`/tables/${id}`)
-        const json = await response.json()
-        return [response, json]
-    }
+  async getTableById(id: string): Promise<[Response, Table]> {
+    const response = await this.api.get(`/tables/${id}`)
+    const json = await response.json()
+    return [response, json]
+  }
 
-    async save(body: any): Promise<[Response, Table]> {
-        const response = await this.api.post(`/tables`, { body })
-        const json = await response.json()
-        return [response, json]
-    }
-
-    async delete(id: string, revId: string): Promise<[Response, responseMessage]> {
-        const response = await this.api.del(`/tables/${id}/${revId}`)
-        const json = await response.json()
-        return [response, json]
-    }
+  async save(body: any): Promise<[Response, Table]> {
+    const response = await this.api.post(`/tables`, { body })
+    const json = await response.json()
+    return [response, json]
+  }
 
+  async delete(
+    id: string,
+    revId: string
+  ): Promise<[Response, responseMessage]> {
+    const response = await this.api.del(`/tables/${id}/${revId}`)
+    const json = await response.json()
+    return [response, json]
+  }
 }

qa-core/src/config/internal-api/fixtures/rows.ts

@@ -1,8 +1,8 @@
 import { Row } from "@budibase/types"
 
 export const generateNewRowForTable = (tableId: string): Row => {
-    return {
-        TestColumn: "TestRow",
-        tableId: tableId
-    }
+  return {
+    TestColumn: "TestRow",
+    tableId: tableId,
+  }
 }

qa-core/src/config/internal-api/fixtures/screens.ts

@@ -3,32 +3,32 @@ import generator from "../../generator"
 const randomId = generator.guid()
 
 const generateScreen = (roleId: string): any => ({
-    showNavigation: true,
-    width: "Large",
-    name: randomId,
-    template: "createFromScratch",
-    props: {
-        _id: randomId,
-        _component:
-            "@budibase/standard-components/container",
-        _styles: {
-            normal: {},
-            hover: {},
-            active: {},
-            selected: {}
-        },
-        _children: [],
-        _instanceName: "New Screen",
-        direction: "column",
-        hAlign: "stretch",
-        vAlign: "top",
-        size: "grow",
-        gap: "M"
-    }, routing: {
-        route: "/test",
-        roleId: roleId,
-        homeScreen: false
+  showNavigation: true,
+  width: "Large",
+  name: randomId,
+  template: "createFromScratch",
+  props: {
+    _id: randomId,
+    _component: "@budibase/standard-components/container",
+    _styles: {
+      normal: {},
+      hover: {},
+      active: {},
+      selected: {},
     },
+    _children: [],
+    _instanceName: "New Screen",
+    direction: "column",
+    hAlign: "stretch",
+    vAlign: "top",
+    size: "grow",
+    gap: "M",
+  },
+  routing: {
+    route: "/test",
+    roleId: roleId,
+    homeScreen: false,
+  },
 })
 
 export default generateScreen

qa-core/src/config/internal-api/fixtures/table.ts

@@ -1,34 +1,34 @@
 import { Table } from "@budibase/types"
 
 export const generateTable = (): Table => {
-    return {
-        name: "Test Table",
-        schema: {},
-        sourceId: "bb_internal",
-        type: "internal",
-        dataImport: {
-            valid: true,
-            schema: {}
-        }
-    }
+  return {
+    name: "Test Table",
+    schema: {},
+    sourceId: "bb_internal",
+    type: "internal",
+    dataImport: {
+      valid: true,
+      schema: {},
+    },
+  }
 }
 
 export const generateNewColumnForTable = (tableData: any): Table => {
-    const newColumn = tableData
-    newColumn.schema = {
-        TestColumn: {
-            type: "string",
-            name: "TestColumn",
-            constraints: {
-                presence: { allowEmpty: false },
-                length: { maximum: null },
-                type: "string"
-            }
-        }
-    }
-    newColumn.indexes = {
-        0: "TestColumn"
-    }
-    newColumn.updatedAt = new Date().toISOString()
-    return newColumn
+  const newColumn = tableData
+  newColumn.schema = {
+    TestColumn: {
+      type: "string",
+      name: "TestColumn",
+      constraints: {
+        presence: { allowEmpty: false },
+        length: { maximum: null },
+        type: "string",
+      },
+    },
+  }
+  newColumn.indexes = {
+    0: "TestColumn",
+  }
+  newColumn.updatedAt = new Date().toISOString()
+  return newColumn
 }

qa-core/src/config/internal-api/fixtures/types/responseMessage.ts

@@ -1 +1,3 @@
-export interface responseMessage { message: string }
+export interface responseMessage {
+  message: string
+}

qa-core/src/tests/internal-api/applications/create.spec.ts

@@ -5,7 +5,10 @@ import InternalAPIClient from "../../../config/internal-api/TestConfiguration/In
 import generateApp from "../../../config/internal-api/fixtures/applications"
 import generator from "../../../config/generator"
 import generateScreen from "../../../config/internal-api/fixtures/screens"
-import { generateTable, generateNewColumnForTable } from "../../../config/internal-api/fixtures/table"
+import {
+  generateTable,
+  generateNewColumnForTable,
+} from "../../../config/internal-api/fixtures/table"
 import { generateNewRowForTable } from "../../../config/internal-api/fixtures/rows"
 
 describe("Internal API - /applications endpoints", () => {
@@ -119,7 +122,7 @@ describe("Internal API - /applications endpoints", () => {
     const [updateResponse, updatedApp] = await config.applications.update(
       <string>app.appId,
       {
-        name: generator.word()
+        name: generator.word(),
       }
     )
     expect(updateResponse).toHaveStatusCode(200)
@@ -188,7 +191,9 @@ describe("Internal API - /applications endpoints", () => {
     await config.tables.getAll(2)
 
     // Add new table
-    const [createdTableResponse, createdTableData] = await config.tables.save(generateTable())
+    const [createdTableResponse, createdTableData] = await config.tables.save(
+      generateTable()
+    )
     expect(createdTableResponse).toHaveStatusCode(200)
     expect(createdTableData._id).toBeDefined()
     expect(createdTableData._rev).toBeDefined()
@@ -197,20 +202,27 @@ describe("Internal API - /applications endpoints", () => {
     await config.tables.getAll(3)
 
     //Get information about the table
-    const [tableInfoResponse, tableInfo] = await config.tables.getTableById(<string>createdTableData._id)
+    const [tableInfoResponse, tableInfo] = await config.tables.getTableById(
+      <string>createdTableData._id
+    )
     expect(tableInfoResponse).toHaveStatusCode(200)
     expect(tableInfo._id).toEqual(createdTableData._id)
 
     //Add Column to table
     const newColumn = generateNewColumnForTable(createdTableData)
-    const [addColumnResponse, addColumnData] = await config.tables.save(newColumn)
+    const [addColumnResponse, addColumnData] = await config.tables.save(
+      newColumn
+    )
     expect(addColumnResponse).toHaveStatusCode(200)
     expect(addColumnData._id).toEqual(createdTableData._id)
     expect(addColumnData.schema.TestColumn).toBeDefined()
 
     //Add Row to table
     const newRow = generateNewRowForTable(<string>addColumnData._id)
-    const [addRowResponse, addRowData] = await config.rows.add(<string>addColumnData._id, newRow)
+    const [addRowResponse, addRowData] = await config.rows.add(
+      <string>addColumnData._id,
+      newRow
+    )
     console.log(addRowData)
     expect(addRowResponse).toHaveStatusCode(200)
     expect(addRowData._id).toBeDefined()
@@ -218,24 +230,32 @@ describe("Internal API - /applications endpoints", () => {
     expect(addRowData.tableId).toEqual(addColumnData._id)
 
     //Get Row from table
-    const [getRowResponse, getRowData] = await config.rows.getAll(<string>addColumnData._id)
+    const [getRowResponse, getRowData] = await config.rows.getAll(
+      <string>addColumnData._id
+    )
     expect(getRowResponse).toHaveStatusCode(200)
     expect(getRowData.length).toEqual(1)
 
     //Delete Row from table
     const rowToDelete = {
-      rows: [
-        getRowData[0]
-      ]
+      rows: [getRowData[0]],
     }
-    const [deleteRowResponse, deleteRowData] = await config.rows.delete(<string>addColumnData._id, rowToDelete)
+    const [deleteRowResponse, deleteRowData] = await config.rows.delete(
+      <string>addColumnData._id,
+      rowToDelete
+    )
     expect(deleteRowResponse).toHaveStatusCode(200)
     expect(deleteRowData[0]._id).toEqual(getRowData[0]._id)
 
     //Delete the table
-    const [deleteTableResponse, deleteTable] = await config.tables.delete(<string>addColumnData._id, <string>addColumnData._rev)
+    const [deleteTableResponse, deleteTable] = await config.tables.delete(
+      <string>addColumnData._id,
+      <string>addColumnData._rev
+    )
     expect(deleteTableResponse).toHaveStatusCode(200)
-    expect(deleteTable.message).toEqual(`Table ${createdTableData._id} deleted.`)
+    expect(deleteTable.message).toEqual(
+      `Table ${createdTableData._id} deleted.`
+    )
 
     //Table was deleted
     await config.tables.getAll(2)

qa-core/src/tests/internal-api/screens/screens.spec.ts

@@ -5,7 +5,6 @@ import generateApp from "../../../config/internal-api/fixtures/applications"
 import { Screen } from "@budibase/types"
 import generateScreen from "../../../config/internal-api/fixtures/screens"
 
-
 describe("Internal API - /screens endpoints", () => {
   const api = new InternalAPIClient()
   const config = new TestConfiguration<Screen>(api)
@@ -27,7 +26,9 @@ describe("Internal API - /screens endpoints", () => {
     const roleArray = ["BASIC", "POWER", "ADMIN", "PUBLIC"]
     appConfig.applications.api.appId = app.appId
     for (let role in roleArray) {
-      const [response, screen] = await config.screen.create(generateScreen(roleArray[role]))
+      const [response, screen] = await config.screen.create(
+        generateScreen(roleArray[role])
+      )
       expect(response).toHaveStatusCode(200)
       expect(screen.routing.roleId).toEqual(roleArray[role])
     }
@@ -39,7 +40,9 @@ describe("Internal API - /screens endpoints", () => {
 
     // Create Screen
     appConfig.applications.api.appId = app.appId
-    const [response, screen] = await config.screen.create(generateScreen("BASIC"))
+    const [response, screen] = await config.screen.create(
+      generateScreen("BASIC")
+    )
 
     // Check screen exists
     const [routesResponse, routes] = await appConfig.applications.getRoutes()
@@ -53,7 +56,9 @@ describe("Internal API - /screens endpoints", () => {
 
     // Create Screen
     appConfig.applications.api.appId = app.appId
-    const [screenResponse, screen] = await config.screen.create(generateScreen("BASIC"))
+    const [screenResponse, screen] = await config.screen.create(
+      generateScreen("BASIC")
+    )
 
     // Delete Screen
     const [response] = await config.screen.delete(screen._id!, screen._rev!)