feat: Extension framework firebase example

package.json

@@ -44,6 +44,7 @@
     "dev:xapix": "yarn workspace @looker/extension-api-explorer develop",
     "dev:playground": "yarn workspace @looker/extension-playground develop",
     "dev:tile": "yarn workspace @looker/extension-tile-playground develop",
+    "dev:firestore": "yarn workspace @looker/extension-firestore develop",
     "clean": "rm -Rf packages/*/lib",
     "prepublishOnly": "jest packages/sdk-rtl packages/sdk-node/test",
     "fix": "yarn lint:es --fix",

packages/extension-firestore/.gitignore

@@ -0,0 +1,6 @@
+node_modules
+dist
+.cache
+.vscode
+.env
+.eslintcache

packages/extension-firestore/README.md

@@ -0,0 +1,94 @@
+# Looker Extension Firestore Demo (React & Typescript)
+
+TODO - add firebase setup
+
+This repository demonstrate using firestore in a Looker extension using Typescript.
+
+It uses [React](https://reactjs.org/) and [Typescript](https://typescriptlang.org) for writing your extension, the [React Extension SDK](https://github.com/looker-open-source/sdk-codegen/tree/main/packages/extension-sdk-react) for interacting with Looker, [Looker Components](https://components.looker.com) for UI, and [Webpack](https://webpack.js.org/) for building your code.
+
+## Getting Started for Development
+
+1. Install the dependencies with [Yarn](https://yarnpkg.com/).
+
+   ```
+   yarn install
+   ```
+
+2. Start the development server
+
+   ```
+   yarn develop
+   ```
+
+   The extension is now running and serving the JavaScript locally at https://localhost:8080/dist/bundle.js.
+
+3. Log in to Looker and create a new project.
+
+   This is found under **Develop** => **Manage LookML Projects** => **New LookML Project**.
+
+   Select "Blank Project" as your "Starting Point". This will create a new project with no files.
+
+   1. The extension folder has a `manifest.lkml` file.
+
+   Either drag & upload this file into your Looker project, or create a `manifest.lkml` with the same content. Change the `id`, `label`, or `url` as needed.
+
+   ```
+   project_name: "firestore"
+   application: firestore {
+      label: "Firestore Example"
+      url: "https://localhost:8080/dist/bundle.js"
+      entitlements: {
+         external_api_urls : ["https://firestore.googleapis.com","https://identitytoolkit.googleapis.com","https://securetoken.googleapis.com"]
+         google_api_scopes: ["https://www.googleapis.com/auth/datastore","https://www.googleapis.com/auth/userinfo.email","https://www.googleapis.com/auth/firebase.database"]
+         scoped_user_attributes: ["firebase_config"]
+      }
+   }
+   ```
+
+4. Create a `model` LookML file in your project. The name doesn't matter but the convention is to name it the same as the project— in this case, helloworld-js.
+
+- Add a connection in this model.
+- [Configure the model you created](https://docs.looker.com/data-modeling/getting-started/create-projects#configuring_a_model) so that it has access to the selected connection.
+  We do this because Looker permissions data access via models— In order to grant / limit access to an extension, it must be associated with a model.
+
+5. Connect the project to Git. This can be done in multiple ways:
+
+- Create a new repository on GitHub or a similar service, and follow the instructions to [connect your project to Git](https://docs.looker.com/data-modeling/getting-started/setting-up-git-connection)
+- A simpler but less powerful approach is to set up git with the "Bare" repository option which does not require connecting to an external Git Service.
+
+6. Commit the changes and deploy them to production through the Project UI.
+
+7. Reload the page and click the `Browse` dropdown menu. You will see the extension in the list.
+
+- The extension will load the JavaScript from the `url` provided in the `application` definition. By default, this is http://localhost:8080/bundle.js. If you change the port your server runs on in the package.json, you will need to also update it in the manifest.lkml.
+- Refreshing the extension page will bring in any new code changes from the extension template, although some changes will hot reload.
+
+## Deployment
+
+The process above describes how to run the extension for development. Once you're done developing and ready to deploy, the production version of the extension may be deployed as follows:
+
+1. In the extension project directory build the extension by running `yarn build`.
+2. Drag and drop the generated `dist/bundle.js` file into the Looker project interface
+3. Modify the `manifest.lkml` to use `file` instead of `url`:
+
+   ```
+   project_name: "firestore"
+   application: firestore {
+      label: "Firestore Example"
+      file: "bundle.js
+      entitlements: {
+         external_api_urls : ["https://firestore.googleapis.com","https://identitytoolkit.googleapis.com","https://securetoken.googleapis.com"]
+         google_api_scopes: ["https://www.googleapis.com/auth/datastore","https://www.googleapis.com/auth/userinfo.email","https://www.googleapis.com/auth/firebase.database"]
+         scoped_user_attributes: ["firebase_config"]
+      }
+   }
+   ```
+
+## Related Projects
+
+- [Looker Extension SDK React](https://github.com/looker-open-source/sdk-codegen/tree/main/packages/extension-sdk-react)
+- [Looker Extension SDK](https://github.com/looker-open-source/sdk-codegen/tree/main/packages/extension-sdk)
+- [Looker SDK](https://github.com/looker-open-source/sdk-codegen/tree/main/packages/sdk)
+- [Looker Embed SDK](https://github.com/looker-open-source/embed-sdk)
+- [Looker Components](https://components.looker.com/)
+- [Styled components](https://www.styled-components.com/docs)

packages/extension-firestore/manifest.lkml

@@ -0,0 +1,12 @@
+project_name: "firestore"
+
+application: firestore {
+  label: "Firestore Example"
+  url: "https://localhost:8080/dist/bundle.js"
+  # file: "bundle.js
+  entitlements: {
+    external_api_urls : ["https://firestore.googleapis.com","https://identitytoolkit.googleapis.com","https://securetoken.googleapis.com"]
+    google_api_scopes: ["https://www.googleapis.com/auth/datastore","https://www.googleapis.com/auth/userinfo.email","https://www.googleapis.com/auth/firebase.database"]
+    scoped_user_attributes: ["firebase_config"]
+  }
+}

packages/extension-firestore/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@looker/extension-firestore",
+  "version": "1.1.0",
+  "description": "Looker Extension SDK Firestore Demo",
+  "main": "dist/bundle.js",
+  "scripts": {
+    "analyze": "export ANALYZE_MODE=static && yarn bundle",
+    "bundle": "tsc && webpack --config webpack.prod.config.js",
+    "develop": "webpack serve --hot --disable-host-check --port 8080 --https --config webpack.dev.config.js"
+  },
+  "author": "Looker",
+  "license": "MIT",
+  "dependencies": {
+    "@looker/extension-sdk": "^22.4.2",
+    "@looker/extension-sdk-react": "22.4.2",
+    "@looker/sdk": "^22.0.0",
+    "@looker/sdk-codegen": "^21.3.2",
+    "@looker/components": "^2.8.1",
+    "@looker/icons": "^1.5.3",
+    "@styled-icons/material": "^10.28.0",
+    "@styled-icons/material-outlined": "^10.28.0",
+    "@styled-icons/material-rounded": "^10.28.0",
+    "firebase": "^9.6.11",
+    "lodash": "^4.17.21",
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0",
+    "react-is": "^16.13.1",
+    "react-router-dom": "^5.3.0",
+    "reactfire": "^4.2.1",
+    "semver": "^7.3.4",
+    "styled-components": "^5.3.1"
+  },
+  "devDependencies": {
+    "@types/lodash": "^4.14.178",
+    "@types/redux": "^3.6.0",
+    "@types/styled-components": "^5.1.7",
+    "@looker/components-test-utils": "^1.5.5",
+    "@testing-library/react": "^11.2.2",
+    "webpack-bundle-analyzer": "^4.2.0",
+    "webpack-cli": "^4.6.0",
+    "webpack-dev-server": "^3.11.2",
+    "webpack-merge": "^5.7.3"
+  }
+}

packages/extension-firestore/src/AnimalsList.tsx

@@ -0,0 +1,147 @@
+/*
+
+ MIT License
+
+ Copyright (c) 2022 Looker Data Sciences, Inc.
+
+ Permission is hereby granted, free of charge, to any person obtaining a copy
+ of this software and associated documentation files (the "Software"), to deal
+ in the Software without restriction, including without limitation the rights
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ copies of the Software, and to permit persons to whom the Software is
+ furnished to do so, subject to the following conditions:
+
+ The above copyright notice and this permission notice shall be included in all
+ copies or substantial portions of the Software.
+
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ SOFTWARE.
+
+ */
+import React, { useState } from 'react'
+import { useFirestore, useFirestoreCollectionData } from 'reactfire'
+import type { DataTableColumns } from '@looker/components'
+import {
+  Button,
+  Spinner,
+  DataTable,
+  DataTableItem,
+  DataTableCell,
+  SpaceVertical,
+} from '@looker/components'
+import { collection, orderBy, query, addDoc } from 'firebase/firestore'
+
+/**
+ * Example based upon https://github.com/FirebaseExtended/reactfire/blob/main/example/withoutSuspense/Firestore.tsx
+ *
+ * License details:
+ *
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2016 Firebase
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+export const AnimalsList = () => {
+  const firestore = useFirestore()
+  const animalsCollection = collection(firestore, 'animals')
+  const [isAscending, setIsAscending] = useState(false)
+  const animalsQuery = query(
+    animalsCollection,
+    orderBy('commonName', isAscending ? 'asc' : 'desc')
+  )
+  const { status, data: animals } = useFirestoreCollectionData(animalsQuery, {
+    idField: 'id',
+  })
+
+  const addAnimal = () => {
+    const possibleAnimals = ['Dog', 'Cat', 'Iguana', 'Zebra']
+    const selectedAnimal =
+      possibleAnimals[Math.floor(Math.random() * possibleAnimals.length)]
+    addDoc(animalsCollection, { commonName: selectedAnimal })
+  }
+
+  if (status === 'loading') {
+    return <Spinner />
+  }
+
+  const animalColumns: DataTableColumns = [
+    {
+      id: 'id',
+      title: 'ID',
+      type: 'string',
+    },
+    {
+      id: 'name',
+      title: 'Name',
+      type: 'string',
+    },
+  ]
+
+  const animalCountColumns: DataTableColumns = [
+    {
+      id: 'name',
+      title: 'Name',
+      type: 'string',
+    },
+    {
+      id: 'count',
+      title: 'Count',
+      type: 'number',
+    },
+  ]
+
+  return (
+    <SpaceVertical>
+      <Button
+        onClick={() => {
+          setIsAscending(!isAscending)
+        }}
+      >
+        Sort
+      </Button>
+      <DataTable caption="Animals" columns={animalColumns}>
+        {animals.map(({ id, commonName }) => (
+          <DataTableItem key={id} id={id}>
+            <DataTableCell>{id}</DataTableCell>
+            <DataTableCell>{commonName}</DataTableCell>
+          </DataTableItem>
+        ))}
+      </DataTable>
+      <DataTable caption="Animal Counts" columns={animalCountColumns}>
+        {Array.from<any>(
+          animals.reduce<any>((animalCountMap, animal) => {
+            const currentCount = animalCountMap.get(animal.commonName) ?? 0
+            return animalCountMap.set(animal.commonName, currentCount + 1)
+          }, new Map<string, number>())
+        ).map((animalStat: [string, number]) => {
+          const [animalName, animalCount] = animalStat
+          return (
+            <DataTableItem key={animalName} id={animalName}>
+              <DataTableCell>{animalName}</DataTableCell>
+              <DataTableCell>{animalCount}</DataTableCell>
+            </DataTableItem>
+          )
+        })}
+      </DataTable>
+      <Button
+        onClick={() => {
+          addAnimal()
+        }}
+      >
+        Add Animal
+      </Button>
+    </SpaceVertical>
+  )
+}

packages/extension-firestore/src/App.tsx

@@ -0,0 +1,37 @@
+/*
+
+ MIT License
+
+ Copyright (c) 2022 Looker Data Sciences, Inc.
+
+ Permission is hereby granted, free of charge, to any person obtaining a copy
+ of this software and associated documentation files (the "Software"), to deal
+ in the Software without restriction, including without limitation the rights
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ copies of the Software, and to permit persons to whom the Software is
+ furnished to do so, subject to the following conditions:
+
+ The above copyright notice and this permission notice shall be included in all
+ copies or substantial portions of the Software.
+
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ SOFTWARE.
+
+ */
+import React from 'react'
+import { ComponentsProvider } from '@looker/components'
+import { ExtensionProvider40 } from '@looker/extension-sdk-react'
+import { AppConfigurator } from './AppConfigurator'
+
+export const App = () => (
+  <ExtensionProvider40>
+    <ComponentsProvider>
+      <AppConfigurator />
+    </ComponentsProvider>
+  </ExtensionProvider40>
+)