feat: Playground for extension SDK changes (#605)

* Playground for extension SDK changes

An extension that allows changes to the extension SDKs to be tested locally. Means less need for canary builds of the SDK.

packages/extension-playground/CHANGELOG.md

@@ -0,0 +1 @@
+# Changelog

packages/extension-playground/README.md

@@ -0,0 +1,47 @@
+# Extension Playground
+
+## Purpose
+
+The extension playground is a simple extension that allows changes to the extension SDKs to be
+quickly prototyped and tested. Do not save prototyping to this repo as this extension should
+remain simple. Instead, demos of extension SDK changes should be added to the
+[extension examples repo](https://github.com/looker-open-source/extension-examples).
+
+## Using the Extension Playground
+
+The extension playground can be manually installed and run with a Looker instance using the following steps:
+
+1. create a new LookML project called `extension-playground`
+1. create a new model. In `extension-playground.model`, put:
+   ```lookml
+   connection: "<any valid connection name>"
+   ```
+1. in `manifest.lkml` put:
+   ```lookml
+   project_name: "extension-playground"
+   application: extension-playground {
+      label: "Extension Playground"
+      url: "http://localhost:8080/dist/bundle.js"
+      entitlements: {
+         local_storage: no
+         navigation: no
+         new_window: no
+         raw_api_request: yes
+         use_form_submit: yes
+         use_embeds: yes
+         core_api_methods: []
+         external_api_urls: []
+         oauth2_urls: []
+      }
+   }
+   ```
+1. save all changes and deploy to production
+1. in the root of `sdk-codegen`:
+   ```sh
+   yarn && yarn build
+   ```
+1. in `packages/extension-playground`:
+   ```sh
+   yarn develop
+   ```
+1. on the Looker web page, click `Browse|Extension Playground` to view the Extension Playground

packages/extension-playground/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@looker/extension-playground",
+  "version": "21.4.1",
+  "description": "Extension Playground",
+  "main": "lib/index.js",
+  "module": "lib/esm/index.js",
+  "sideEffects": "false",
+  "typings": "lib/index.d.ts",
+  "license": "MIT",
+  "private": true,
+  "scripts": {
+    "bundle": "tsc && webpack --config webpack.prod.config.js",
+    "develop": "webpack-dev-server --hot --disable-host-check --port 8080 --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'"
+  },
+  "dependencies": {
+    "@looker/extension-sdk": "^21.4.1",
+    "@looker/extension-sdk-react": "^21.4.1",
+    "@looker/sdk": "^21.4.1",
+    "@looker/sdk-codegen": "^21.0.12",
+    "@looker/components": "^1.1.3",
+    "@looker/icons": "1.1.3",
+    "@styled-icons/material": "^10.28.0",
+    "@styled-icons/material-outlined": "^10.28.0",
+    "@styled-icons/material-rounded": "^10.28.0",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-redux": "^7.2.3",
+    "react-router-dom": "^5.2.0",
+    "redux": "^4.0.5",
+    "react-hot-loader": "^4.12.20",
+    "webpack-cli": "^3.3.12",
+    "webpack-dev-server": "^3.11.0"
+  },
+  "devDependencies": {
+    "@types/redux": "^3.6.0"
+  }
+}

packages/extension-playground/src/App.tsx

@@ -0,0 +1,36 @@
+/*
+
+ MIT License
+
+ Copyright (c) 2021 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 { ExtensionProvider } from '@looker/extension-sdk-react'
+import { hot } from 'react-hot-loader/root'
+
+import { Playground } from './Playground'
+
+export const App = hot(() => (
+  <ExtensionProvider>
+    <Playground />
+  </ExtensionProvider>
+))

packages/extension-playground/src/Playground.tsx

@@ -0,0 +1,44 @@
+/*
+
+ MIT License
+
+ Copyright (c) 2021 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, Space, Text } from '@looker/components'
+
+/**
+ * Playground for testing extension SDK functionality.
+ * Changes are not expected to be kept and may be thrown
+ * away at anytime. Keep this simple.
+ */
+export const Playground: React.FC = () => {
+  return (
+    <ComponentsProvider>
+      <Space p="xxxxxlarge" width="100%" height="50vh" around>
+        <Text p="xxxxxlarge" fontSize="xxxxxlarge">
+          Welcome to the Playground
+        </Text>
+      </Space>
+    </ComponentsProvider>
+  )
+}

packages/extension-playground/src/index.tsx

@@ -0,0 +1,34 @@
+/*
+
+ MIT License
+
+ Copyright (c) 2021 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 ReactDOM from 'react-dom'
+import { App } from './App'
+
+window.addEventListener('DOMContentLoaded', (_) => {
+  const root = document.createElement('div')
+  document.body.appendChild(root)
+  ReactDOM.render(<App />, root)
+})

packages/extension-playground/tsconfig.build.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig.build.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "outDir": "./lib"
+  },
+  "include": ["src/**/*"]
+}

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

@@ -0,0 +1,42 @@
+/*
+
+ MIT License
+
+ Copyright (c) 2021 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.
+
+ */
+
+const base = require('../../webpack.base.config')(__dirname)
+
+module.exports = {
+  ...base,
+  devServer: {
+    historyApiFallback: true,
+    publicPath: '/dist/',
+    headers: {
+      'Access-Control-Allow-Origin': '*',
+      'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, OPTIONS',
+      'Access-Control-Allow-Headers':
+        'X-Requested-With, content-type, Authorization',
+    },
+  },
+  devtool: 'inline-source-map',
+}

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

@@ -0,0 +1,31 @@
+/*
+
+ MIT License
+
+ Copyright (c) 2021 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.
+
+ */
+const base = require('../../webpack.base.config')(__dirname)
+
+module.exports = {
+  ...base,
+  mode: 'production',
+}