Feature/extension dashboard tile (#1071)

feat: Extensions as a Tile Support

1. Tile popups
2. Tile extensions.
3. Visualizations extensions (can be run inside of explores)

Please note that extensions as a tile is not GA in the Looker 
product and its release date has not yet been finalized. The 
tile extension and visualizations SDK are subject to change.

Author: bryans99

.eslintignore

@@ -0,0 +1 @@
+packages/extension-tile-playground/src/components/LiquidFillGaugeViz/liquid_fill_gauge.js

package.json

@@ -45,6 +45,7 @@
     "dev:hack": "yarn workspace @looker/hackathon develop",
     "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",
     "clean": "rm -Rf packages/*/lib",
     "prepublishOnly": "jest packages/sdk-rtl packages/sdk-node/test",
     "fix": "yarn lint:es --fix",

packages/extension-playground/package.json

@@ -7,6 +7,7 @@
   "license": "MIT",
   "private": true,
   "scripts": {
+    "analyze": "export ANALYZE_MODE=static && yarn bundle",
     "bundle": "tsc && webpack --config webpack.prod.config.js",
     "develop": "webpack serve --hot --allowed-hosts all --port 8080 --https --config webpack.dev.config.js",
     "watch": "yarn lerna exec --scope @looker/extension-playground --stream 'BABEL_ENV=build babel src --root-mode upward --out-dir lib/esm --source-maps --extensions .ts,.tsx --no-comments --watch'"

packages/extension-playground/webpack.dev.config.js

@@ -24,10 +24,12 @@
 
  */
 
+const { merge } = require('webpack-merge')
 const base = require('../../webpack.base.config')(__dirname)
+const browser = require('../../webpack.browser.config')()
 
-module.exports = {
-  ...base,
+module.exports = merge(base, browser, {
+  mode: 'development',
   devServer: {
     historyApiFallback: true,
     devMiddleware: {
@@ -40,5 +42,4 @@ module.exports = {
         'X-Requested-With, content-type, Authorization',
     },
   },
-  devtool: 'inline-source-map',
-}
+})

packages/extension-playground/webpack.prod.config.js

@@ -23,9 +23,13 @@
  SOFTWARE.
 
  */
+const { merge } = require('webpack-merge')
 const base = require('../../webpack.base.config')(__dirname)
+const browser = require('../../webpack.browser.config')()
 
-module.exports = {
-  ...base,
+module.exports = merge(base, browser, {
   mode: 'production',
-}
+  optimization: {
+    chunkIds: 'named',
+  },
+})

packages/extension-sdk-react/README.md

@@ -138,6 +138,20 @@ export function* sagaCallbacks() {
 }
 ```
 
+### Tile Extension Context Data
+
+```ts
+import { ExtensionContext40 } from '@looker/extension-sdk-react'
+
+export const MyExtension: React.FC = () => {
+  const {
+    extensionSDK,
+    tileSDK,
+    tileHostData: { dashboardFilters },
+  } = useContext(ExtensionContext40)
+
+```
+
 ## Related Projects
 
 - [Looker extension examples](https://github.com/looker-open-source/extension-examples).