Google Cloud Storage Integration

packages/builder/src/components/backend/DatasourceNavigator/icons/GoogleCloudStorage.svelte

@@ -0,0 +1,62 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24px"
+  height="24px"
+  viewBox="0 0 24 24"
+  ><defs
+    ><style>
+      .cls-1 {
+        fill: #aecbfa;
+      }
+      .cls-2 {
+        fill: #669df6;
+      }
+      .cls-3 {
+        fill: #4285f4;
+      }
+      .cls-4 {
+        fill: #fff;
+      }
+    </style></defs
+  ><title>Icon_24px_CloudStorage_Color</title><g data-name="Product Icons"
+    ><rect class="cls-1" x="2" y="4" width="20" height="7" /><rect
+      class="cls-2"
+      x="20"
+      y="4"
+      width="2"
+      height="7"
+    /><polygon class="cls-3" points="22 4 20 4 20 11 22 4" /><rect
+      class="cls-2"
+      x="2"
+      y="4"
+      width="2"
+      height="7"
+    /><rect class="cls-4" x="6" y="7" width="6" height="1" /><rect
+      class="cls-4"
+      x="15"
+      y="6"
+      width="3"
+      height="3"
+      rx="1.5"
+    /><rect class="cls-1" x="2" y="13" width="20" height="7" /><rect
+      class="cls-2"
+      x="20"
+      y="13"
+      width="2"
+      height="7"
+    /><polygon class="cls-3" points="22 13 20 13 20 20 22 13" /><rect
+      class="cls-2"
+      x="2"
+      y="13"
+      width="2"
+      height="7"
+    /><rect class="cls-4" x="6" y="16" width="6" height="1" /><rect
+      class="cls-4"
+      x="15"
+      y="15"
+      width="3"
+      height="3"
+      rx="1.5"
+    /></g
+  ></svg
+>

packages/builder/src/components/backend/DatasourceNavigator/icons/index.js

@@ -16,6 +16,7 @@ import Firebase from "./Firebase.svelte"
 import Redis from "./Redis.svelte"
 import Snowflake from "./Snowflake.svelte"
 import Custom from "./Custom.svelte"
+import GoogleCloudStorage from "./GoogleCloudStorage.svelte"
 import { integrations } from "stores/builder"
 import { get } from "svelte/store"
 
@@ -38,6 +39,7 @@ const ICONS = {
   REDIS: Redis,
   SNOWFLAKE: Snowflake,
   CUSTOM: Custom,
+  GOOGLE_CLOUD: GoogleCloudStorage,
 }
 
 export default ICONS

packages/builder/src/components/design/settings/componentSettings.js

@@ -1,6 +1,7 @@
 import { Checkbox, Select, RadioGroup, Stepper, Input } from "@budibase/bbui"
 import DataSourceSelect from "./controls/DataSourceSelect/DataSourceSelect.svelte"
 import S3DataSourceSelect from "./controls/S3DataSourceSelect.svelte"
+import GoogleCloudStorageDataSourceSelect from "./controls/GoogleCloudStorageDataSourceSelect.svelte"
 import DataProviderSelect from "./controls/DataProviderSelect.svelte"
 import ButtonActionEditor from "./controls/ButtonActionEditor/ButtonActionEditor.svelte"
 import TableSelect from "./controls/TableSelect.svelte"
@@ -35,6 +36,7 @@ const componentMap = {
   radio: RadioGroup,
   dataSource: DataSourceSelect,
   "dataSource/s3": S3DataSourceSelect,
+  "dataSource/googleCloudStorage": GoogleCloudStorageDataSourceSelect,
   dataProvider: DataProviderSelect,
   boolean: Checkbox,
   number: Stepper,
@@ -68,6 +70,7 @@ const componentMap = {
   "field/datetime": FormFieldSelect,
   "field/attachment": FormFieldSelect,
   "field/s3": Input,
+  "field/gcs": Input,
   "field/link": FormFieldSelect,
   "field/array": FormFieldSelect,
   "field/json": FormFieldSelect,

packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/GoogleCloudUpload.svelte

@@ -0,0 +1,33 @@
+<script>
+  import { Select, Label } from "@budibase/bbui"
+  import { selectedScreen } from "stores/builder"
+  import { findAllMatchingComponents } from "helpers/components"
+
+  export let parameters
+
+  $: components = findAllMatchingComponents($selectedScreen?.props, component =>
+    component._component.endsWith("googlecloudupload")
+  )
+</script>
+
+<div class="root">
+  <Label small>Google Cloud Uploader</Label>
+  <Select
+    bind:value={parameters.componentId}
+    options={components}
+    getOptionLabel={x => x._instanceName}
+    getOptionValue={x => x._id}
+  />
+</div>
+
+<style>
+  .root {
+    display: grid;
+    column-gap: var(--spacing-l);
+    row-gap: var(--spacing-s);
+    grid-template-columns: 120px 1fr;
+    align-items: center;
+    max-width: 400px;
+    margin: 0 auto;
+  }
+</style>

packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/index.js

@@ -13,6 +13,7 @@ export { default as UpdateState } from "./UpdateState.svelte"
 export { default as RefreshDataProvider } from "./RefreshDataProvider.svelte"
 export { default as DuplicateRow } from "./DuplicateRow.svelte"
 export { default as S3Upload } from "./S3Upload.svelte"
+export { default as GoogleCloudUpload } from "./GoogleCloudUpload.svelte"
 export { default as ExportData } from "./ExportData.svelte"
 export { default as ContinueIf } from "./ContinueIf.svelte"
 export { default as UpdateFieldValue } from "./UpdateFieldValue.svelte"

packages/builder/src/components/design/settings/controls/ButtonActionEditor/manifest.json

@@ -123,6 +123,17 @@
         }
       ]
     },
+    {
+      "name": "Upload File to GoogleCloud",
+      "type": "data",
+      "component": "GoogleCloudUpload",
+      "context": [
+        {
+          "label": "File URL",
+          "value": "publicUrl"
+        }
+      ]
+    },
     {
       "name": "Export Data",
       "type": "data",

packages/builder/src/components/design/settings/controls/GoogleCloudStorageDataSourceSelect.svelte

@@ -0,0 +1,15 @@
+<script>
+  import { Select } from "@budibase/bbui"
+  import { datasources } from "stores/builder"
+
+  export let value = null
+
+  $: gcDataSources = $datasources.list
+    .filter(ds => ds.source === "GOOGLE_CLOUD")
+    .map(ds => ({
+      label: ds.name,
+      value: ds._id,
+    }))
+</script>
+
+<Select options={gcDataSources} {value} on:change />

packages/builder/src/components/integration/QueryFieldsBuilder.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { Label, Layout, Input } from "@budibase/bbui"
+  import { Label, Layout, Input, Select, Toggle } from "@budibase/bbui"
   import Editor from "./QueryEditor.svelte"
   import KeyValueBuilder from "./KeyValueBuilder.svelte"
   import { capitalise } from "helpers"
@@ -45,6 +45,20 @@
             value={fields[field]}
           />
         </div>
+      {:else if schema.fields[field]?.type === "select"}
+        <Select
+          options={schema.fields[field].config.options}
+          value={fields[field]}
+          on:change={({ detail }) => (fields[field] = detail)}
+          label={schema.fields[field].display}
+        />
+      {:else if schema.fields[field]?.type === "boolean"}
+        <Toggle
+          value={fields[field]}
+          on:change={({ detail }) => (fields[field] = detail)}
+          label={schema.fields[field].display}
+          text={"The contents of the entire bucket will be available online. Please make sure this is the intended behaviour"}
+        />
       {:else}
         <div class="horizontal">
           <Label small>{getDisplayName(field)}</Label>

packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/new/_components/componentStructure.json

@@ -72,6 +72,7 @@
       "multifieldselect",
       "s3upload",
       "codescanner",
+      "googlecloudupload",
       "bbreferencefield"
     ]
   },

packages/client/manifest.json

@@ -4592,6 +4592,66 @@
       }
     ]
   },
+  "googlecloudupload": {
+    "name": "Google Cloud Storage File Upload",
+    "icon": "UploadToCloud",
+    "styles": ["size"],
+    "editable": true,
+    "size": {
+      "width": 400,
+      "height": 200
+    },
+    "settings": [
+      {
+        "type": "field/gcs",
+        "label": "Field",
+        "key": "field",
+        "required": true
+      },
+      {
+        "type": "text",
+        "label": "Label",
+        "key": "label"
+      },
+      {
+        "type": "dataSource/googleCloudStorage",
+        "label": "Google Cloud Storage",
+        "key": "datasourceId"
+      },
+      {
+        "type": "text", 
+        "label": "Bucket",
+        "key": "bucket"
+      },
+      {
+        "type": "text",
+        "label": "File name",
+        "key": "key"
+      },
+      {
+        "type": "event",
+        "label": "On change",
+        "key": "onChange",
+        "context": [
+          {
+            "label": "Field Value",
+            "key": "value"
+          }
+        ]
+      },
+      {
+        "type": "boolean",
+        "label": "Disabled",
+        "key": "disabled",
+        "defaultValue": false
+      },
+      {
+        "type": "validation/attachment",
+        "label": "Validation",
+        "key": "validation"
+      }
+    ]
+  },
   "dataprovider": {
     "name": "Data Provider",
     "icon": "Data",

packages/client/src/components/app/forms/GoogleCloudUpload.svelte

@@ -0,0 +1,24 @@
+<script>
+  import StoreUpload from "./StoreUpload.svelte"
+
+  export let datasourceId
+  export let bucket
+  export let key
+  export let field
+  export let label
+  export let disabled = false
+  export let validation
+  export let onChange
+</script>
+
+<StoreUpload
+  {datasourceId}
+  {bucket}
+  {key}
+  {field}
+  {label}
+  {disabled}
+  {validation}
+  {onChange}
+  storeFieldType={"googlecloudupload"}
+/>