feat(adding extension example for merging explore queries by url)

package.json

@@ -32,6 +32,7 @@
     "dev:map-iframe": "yarn workspace map-iframe develop",
     "dev:access-key-demo": "cd react/typescript/access-key-demo && yarn develop",
     "dev:access-key-demo-server": "cd react/typescript/access-key-demo && yarn start-server",
+    "dev:explore-query-merge": "cd react/typescript/explore-query-merge && yarn develop",
     "dev:helloworld-ts": "cd react/typescript/helloworld-ts && yarn develop",
     "dev:kitchensink": "cd react/typescript/kitchensink && yarn develop",
     "dev:looks-query": "cd react/typescript/looks-query-redux && yarn develop",

react/typescript/explore-query-merge/.gitignore

@@ -0,0 +1,8 @@
+node_modules/
+.npm
+.eslintcache
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+yarn.lock
+node_modules

react/typescript/explore-query-merge/.prettierrc.json

@@ -0,0 +1,5 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "es5"
+}

react/typescript/explore-query-merge/README.md

@@ -0,0 +1,85 @@
+# Looker Extension explore-query-merge
+
+explore-query-merge is a Looker extension using React and TypeScript.
+
+## Getting Started for Development
+
+1. Install the dependencies with [Yarn](https://yarnpkg.com/).
+
+    ```sh
+    yarn install
+    ```
+
+2. Build the project
+
+    ```sh
+    yarn build
+    ```
+
+3. Start the development server
+
+    ```sh
+    yarn develop
+    ```
+
+    The development server is now running and serving the JavaScript at http://localhost:8080/bundle.js.
+
+4. Now log in to Looker and create a new project.
+
+    Depending on the version of Looker, a new project can be created under:
+
+    - **Develop** => **Manage LookML Projects** => **New LookML Project**, or
+    - **Develop** => **Projects** => **New LookML Project**
+
+    Select "Blank Project" as the "Starting Point". This creates a new LookML project with no files.
+
+5. Create a `manifest` file
+
+   Either drag and upload the `manifest.lkml` file in this directory into your Looker project, or create a `manifest.lkml` with the same content. Change the `id`, `label`, or `url` as needed.
+
+   ```
+    project_name: "explore-query-merge"
+    application: explore-query-merge {
+        label: "explore-query-merge React/TypeScript extension"
+        url: "http://localhost:8080/bundle.js"
+        entitlements: {
+          core_api_methods: ["me"]
+        }
+    }
+   ```
+
+6. Create a `model` LookML file in your project.
+
+   Typically, the model is named the same as the extension project. The model is used to control access to the extension.
+
+   - [Configure the model you created](https://docs.looker.com/data-modeling/getting-started/create-projects#configuring_a_model) so that it has access to some connection (any connection).
+
+7. Connect the new project to Git.
+
+   - 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)
+
+8. Commit the changes and deploy them to production through the Project UI.
+
+9. Reload the page and click the `Browse` dropdown menu. You should see the extension label in the list.
+
+   - The extension will load the JavaScript from the `url` you 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`.
+   - Reloading the extension page will bring in any new code changes from the extension template.
+
+## Deploying the extension
+
+To allow other people to use the extension, build the JavaScript bundle file and directly include it in the project.
+
+1. Build the extension with `yarn build` in the extension project directory on your development machine.
+2. Drag and drop the generated `dist/bundle.js` file into the Looker project interface
+3. Modify your `manifest.lkml` to use `file` instead of `url`:
+
+   ```
+    project_name: "explore-query-merge"
+    application: explore-query-merge {
+        label: "A Looker React/TypeScript extension"
+        file: "bundle.js"
+        entitlements: {
+          core_api_methods: ["me"]
+        }
+    }
+   ```

react/typescript/explore-query-merge/babel.config.js

@@ -0,0 +1,58 @@
+// Copyright 2021 Google LLC
+
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+
+//     https://www.apache.org/licenses/LICENSE-2.0
+
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+module.exports = (api) => {
+  api.cache(true)
+
+  return {
+    presets: [
+      [
+        '@babel/env',
+        {
+          targets: {
+            esmodules: true,
+          },
+          modules: false,
+        },
+      ],
+      [
+        '@babel/preset-react',
+        {
+          development: process.env.BABEL_ENV !== 'build',
+        },
+      ],
+      '@babel/preset-typescript',
+    ],
+    env: {
+      build: {
+        ignore: [
+          '**/*.d.ts',
+          '**/*.test.js',
+          '**/*.test.jsx',
+          '**/*.test.ts',
+          '**/*.test.tsx',
+          '__snapshots__',
+          '__tests__',
+        ],
+      },
+    },
+    ignore: ['node_modules'],
+    plugins: [
+      '@babel/plugin-proposal-class-properties',
+      '@babel/plugin-proposal-object-rest-spread',
+      '@babel/plugin-transform-runtime',
+      'babel-plugin-styled-components',
+    ],
+  }
+}

react/typescript/explore-query-merge/manifest.lkml

@@ -0,0 +1,11 @@
+
+project_name: "explore-query-merge"
+
+application: explore-query-merge {
+  label: "explore-query-merge"
+  url: "http://localhost:8080/bundle.js"
+  # file: "bundle.js
+  entitlements: {
+    core_api_methods: ["me"] #Add more entitlements here as you develop new functionality
+  }
+}

react/typescript/explore-query-merge/package.json

@@ -0,0 +1,83 @@
+{
+  "name": "explore-query-merge",
+  "version": "0.0.1",
+  "description": "Bootstrapped Looker Extension with React and Typescript",
+  "main": "dist/bundle.js",
+  "author": "yournamehere",
+  "license": "Apache-2.0",
+  "scripts": {
+    "analyze": "export ANALYZE_MODE=static && yarn build",
+    "build": "export BABEL_ENV=build && webpack --config webpack.prod.js",
+    "clean": "rm -rf dist",
+    "develop": "webpack serve --hot --port 8080 --disable-host-check --config webpack.develop.js",
+    "prebuild": "yarn clean"
+  },
+  "dependencies": {
+    "@looker/components": "^2.8.9",
+    "@looker/icons": "^1.5.9",
+    "@looker/embed-sdk": "^1.6.1",
+    "@looker/extension-sdk": "^21.18.1",
+    "@looker/extension-sdk-react": "^21.18.1",
+    "@looker/sdk": "^21.18.1",
+    "@looker/sdk-rtl": "^21.1.1",
+    "@styled-icons/material": "10.34.0",
+    "@styled-icons/material-outlined": "10.34.0",
+    "@styled-icons/material-rounded": "10.34.0",
+    "date-fns": "^2.25.0",
+    "lodash": "^4.17.21",
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0",
+    "react-is": "^16.13.1",
+    "react-router-dom": "^5.3.0",
+    "semver": "^7.3.5",
+    "styled-components": "^5.3.3"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.16.0",
+    "@babel/core": "^7.16.0",
+    "@babel/plugin-proposal-class-properties": "^7.16.0",
+    "@babel/plugin-proposal-object-rest-spread": "^7.16.0",
+    "@babel/plugin-transform-react-jsx": "^7.16.0",
+    "@babel/plugin-transform-runtime": "^7.16.0",
+    "@babel/preset-env": "^7.16.0",
+    "@babel/preset-react": "^7.16.0",
+    "@babel/preset-typescript": "^7.16.0",
+    "@babel/runtime": "^7.16.0",
+    "@types/lodash": "^4.14.176",
+    "@types/node": "^14.14.12",
+    "@types/react": "^16.14.2",
+    "@types/react-dom": "^16.9.10",
+    "@types/react-router-dom": "^5.1.5",
+    "@types/readable-stream": "^2.3.5",
+    "@types/semver": "^7.3.1",
+    "@types/styled-components": "5.1.5",
+    "babel-loader": "^8.2.3",
+    "babel-loader-exclude-node-modules-except": "^1.2.1",
+    "babel-preset-nano-react-app": "^0.1.0",
+    "minimist": "^1.2.5",
+    "nodemon": "^2.0.14",
+    "npm-run-all": "^4.1.5",
+    "react-hot-loader": "^4.13.0",
+    "typescript": "4.4.4",
+    "webpack": "^5.10.0",
+    "webpack-bundle-analyzer": "^4.5.0",
+    "webpack-cli": "^4.9.1",
+    "webpack-dev-server": "^3.11.2"
+  },
+  "babel": {
+    "presets": [
+      "nano-react-app"
+    ],
+    "plugins": [
+      [
+        "@babel/plugin-proposal-class-properties"
+      ],
+      [
+        "@babel/plugin-transform-react-jsx",
+        {
+          "pragmaFrag": "React.Fragment"
+        }
+      ]
+    ]
+  }
+}

react/typescript/explore-query-merge/src/App.tsx

@@ -0,0 +1,30 @@
+// Copyright 2021 Google LLC
+
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+
+//     https://www.apache.org/licenses/LICENSE-2.0
+
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+/**
+  * This is a sample Looker Extension written in typescript and React. It imports one component, <HelloWorld>.
+  * HelloWorld makes a simple call to the Looker API using the Extension Framework's built in authentication,
+  * and returns the logged in user.
+*/
+import React from 'react'
+import { ExtensionProvider } from '@looker/extension-sdk-react'
+import { hot } from 'react-hot-loader/root'
+
+import { MergeMain } from './MergeMain'
+
+export const App = hot(() => (
+  <ExtensionProvider>
+    <MergeMain />
+  </ExtensionProvider>
+))