From f99de7e5bf590056b797b4b05c7a0a1c60f9d8dd Mon Sep 17 00:00:00 2001 From: Bryn Ryans Date: Tue, 20 Apr 2021 11:08:26 -0700 Subject: [PATCH] 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 | 1 + packages/extension-playground/README.md | 47 +++++++++++++++++++ packages/extension-playground/package.json | 38 +++++++++++++++ packages/extension-playground/src/App.tsx | 36 ++++++++++++++ .../extension-playground/src/Playground.tsx | 44 +++++++++++++++++ packages/extension-playground/src/index.tsx | 34 ++++++++++++++ .../extension-playground/tsconfig.build.json | 8 ++++ .../webpack.dev.config.js | 42 +++++++++++++++++ .../webpack.prod.config.js | 31 ++++++++++++ 9 files changed, 281 insertions(+) create mode 100644 packages/extension-playground/CHANGELOG.md create mode 100644 packages/extension-playground/README.md create mode 100644 packages/extension-playground/package.json create mode 100644 packages/extension-playground/src/App.tsx create mode 100644 packages/extension-playground/src/Playground.tsx create mode 100644 packages/extension-playground/src/index.tsx create mode 100644 packages/extension-playground/tsconfig.build.json create mode 100644 packages/extension-playground/webpack.dev.config.js create mode 100644 packages/extension-playground/webpack.prod.config.js diff --git a/packages/extension-playground/CHANGELOG.md b/packages/extension-playground/CHANGELOG.md new file mode 100644 index 000000000..825c32f0d --- /dev/null +++ b/packages/extension-playground/CHANGELOG.md @@ -0,0 +1 @@ +# Changelog diff --git a/packages/extension-playground/README.md b/packages/extension-playground/README.md new file mode 100644 index 000000000..2850bf382 --- /dev/null +++ b/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: "" + ``` +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 diff --git a/packages/extension-playground/package.json b/packages/extension-playground/package.json new file mode 100644 index 000000000..c55405898 --- /dev/null +++ b/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" + } +} diff --git a/packages/extension-playground/src/App.tsx b/packages/extension-playground/src/App.tsx new file mode 100644 index 000000000..e1479ea1a --- /dev/null +++ b/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(() => ( + + + +)) diff --git a/packages/extension-playground/src/Playground.tsx b/packages/extension-playground/src/Playground.tsx new file mode 100644 index 000000000..50afd279a --- /dev/null +++ b/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 ( + + + + Welcome to the Playground + + + + ) +} diff --git a/packages/extension-playground/src/index.tsx b/packages/extension-playground/src/index.tsx new file mode 100644 index 000000000..3071d2aed --- /dev/null +++ b/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(, root) +}) diff --git a/packages/extension-playground/tsconfig.build.json b/packages/extension-playground/tsconfig.build.json new file mode 100644 index 000000000..51db2ccb4 --- /dev/null +++ b/packages/extension-playground/tsconfig.build.json @@ -0,0 +1,8 @@ +{ + "extends": "../../tsconfig.build.json", + "compilerOptions": { + "rootDir": "./src", + "outDir": "./lib" + }, + "include": ["src/**/*"] +} diff --git a/packages/extension-playground/webpack.dev.config.js b/packages/extension-playground/webpack.dev.config.js new file mode 100644 index 000000000..8edfcc138 --- /dev/null +++ b/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', +} diff --git a/packages/extension-playground/webpack.prod.config.js b/packages/extension-playground/webpack.prod.config.js new file mode 100644 index 000000000..8043faaae --- /dev/null +++ b/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', +}