@equinor/echo-cli 1.0.0-beta-1 → 1.0.0-beta-3

package/echo-dev-host/.env

@@ -0,0 +1,29 @@
+/* eslint-disable */
+
+Never use PROCESS.ENV/process.env use env() instead. (Except for process.env.NODE_ENV)
+---------------------------------
+
+Based on: https://www.freecodecamp.org/news/how-to-implement-runtime-environment-variables-with-create-react-app-docker-and-nginx-7f9d42a91d70/
+
+All variables in this files are converted to env() during build, and values here are replaced
+by environment variables if they exists. This is done by running the env.sh bash script before the
+build.
+
+env.sh generates env-config.js containing all the variables, which is included in index.html,
+and appended to Window._env_. env() is a shortcut for Window._env_ and should be used in code.
+
+NOTE: Seems like window._env_ is not available in a worker
+
+*/
+WEBSITE_HOSTNAME=localhost:3000;
+REACT_APP_DEFAULT_CACHE_LOCATION=localstorage
+REACT_APP_API_URL=https://dt-echopedia-api-dev.azurewebsites.net
+REACT_APP_WEB_URL=https://dt-echopedia-web-dev.azurewebsites.net
+REACT_APP_WEB_PROD_URL=https://echo.equinor.com
+REACT_APP_AZURE_AD_TENNANT=StatoilSRM.onmicrosoft.com
+REACT_APP_AZURE_AD_TENNANT_ID=3aa4a235-b6e2-48d5-9195-7fcf05b459b0
+REACT_APP_AZURE_AD_CLIENT_ID=751d2504-0b66-4b78-9807-4b60525a14c6
+REACT_APP_API_CLIENT_ID=aef35d97-53d4-4fd0-adaf-c5a514b38436
+REACT_APP_APPINSIGHTS_CONNECTION_STRING=InstrumentationKey=e5299075-a00d-4012-96f9-42861e8d8a9e;IngestionEndpoint=https://northeurope-3.in.applicationinsights.azure.com/;LiveEndpoint=https://northeurope.livediagnostics.monitor.azure.com/;ApplicationId=a9b64222-d4a9-42e6-a615-7428fe1a26af
+REACT_APP_AZURE_BUILD_NUMBER=0.8.dev.9
+REACT_APP_LOGGER_ACTIVE=false

package/echo-dev-host/.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+    "cSpell.words": [
+        "equinor"
+    ]
+}

package/{lib/echo-client → echo-dev-host}/README.md

@@ -1,6 +1,8 @@
-# echo-client
+# echo-dev-host
 
-Lightweight client for Echo Module development, shipped with `echo-cli`
+TODO: update this readme
+
+Lightweight host application for Echo Module development, shipped with `echo-cli`
 
 ## Why it's needed
 
@@ -24,9 +26,9 @@ of EchopediaWeb.
 
 Development goes as usual:
 
--   change code
--   save changes
--   hot reload will take care of applying the changes
+- change code
+- save changes
+- hot reload will take care of applying the changes
 
 ## Maintaining dependencies
 

package/echo-dev-host/env.sh

@@ -0,0 +1,51 @@
+#!/bin/bash
+
+#https://www.freecodecamp.org/news/how-to-implement-runtime-environment-variables-with-create-react-app-docker-and-nginx-7f9d42a91d70/
+#
+
+# Recreate config file
+rm -rf ./env-config.js
+touch ./env-config.js
+
+echo "creating env-config.js"
+
+# Add assignment 
+echo "window._env_ = {" >> ./env-config.js
+
+# Read each line in .env file
+# Each line represents key=value pairs
+while read -r line || [[ -n "$line" ]];
+do
+  #only process lines containting =
+  if [[ $line == *"="* ]]; then
+
+    # Split env variables by character `=`
+    if printf '%s\n' "$line" | grep -q -e '='; then
+      varname=$(printf '%s\n' "$line" | sed -e 's/=.*//')
+      varvalue=$(printf '%s\n' "$line" | sed -e 's/^[^=]*=//')
+    fi
+
+    # Read value of current variable if exists as Environment variable
+    value=$(printf '%s\n' "${!varname}")
+    # Otherwise use value from .env file
+    [[ -z $value ]] && value=${varvalue}
+  
+    # Append configuration property to JS file
+    echo "  $varname: \"$value\"," >> ./env-config.js
+
+    #print variables
+    valueObfuscated=$(printf '%s' "$value" | cut -c 1-3)
+    #echo "  $varname: \"$value\"," #print the environment variables
+    echo "  $varname=\"$valueObfuscated***\"," #print the environment variables obfuscated
+  fi
+done < .env
+
+echo "}" >> ./env-config.js
+
+#if directory exists, copy to public folder. Needed for dev enironment (npm start)
+if [ -d "public" ]; then
+  rm -rf ./public/env-config.js
+  cp ./env-config.js ./public/env-config.js
+fi
+
+echo "done creating env-config.js"

package/{lib/echo-client → echo-dev-host}/package-lock.json

@@ -1,11 +1,11 @@
 {
-    "name": "@equinor/echo-client",
+    "name": "@equinor/echo-dev-host",
     "version": "0.0.1",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
-            "name": "@equinor/echo-client",
+            "name": "@equinor/echo-dev-host",
             "version": "0.0.1",
             "license": "MIT",
             "dependencies": {

package/{lib/echo-client → echo-dev-host}/src/app.tsx

@@ -12,7 +12,7 @@ export const EchoApp: React.FC = () => {
     useInitial(async () => {
         await Syncer.configuration.setApiBaseUrl(EchoEnv.env().REACT_APP_API_URL);
         fireAndForget(getCorePlants, {
-            userFriendlyErrorMessage: '[echo-client] Failed to load plants data',
+            userFriendlyErrorMessage: '[echo-dev-host][app.tsx] Failed to load plants data',
             displayToast: true
         });
     });

package/{lib/echo-client → echo-dev-host}/src/index.tsx

@@ -69,7 +69,7 @@ const Echo: React.FC = (): JSX.Element => {
                         Property '#private' in type 'QueryClient' refers to a different member that cannot be accessed from within type 'QueryClient'.
                         Based on my research we used the same version of react-query in echopediaWeb and echo-client.
                     */}
-                    <QueryClientProvider client={queryClient as unknown as QueryClient}>
+                    <QueryClientProvider client={queryClient}>
                         <EventHubProvider>
                             <Mediator options={moduleOptions} />
                             <BrowserRouter>

package/{lib/echo-client → echo-dev-host}/webpack.config.js

@@ -5,14 +5,14 @@ import path from 'path';
 import WebpackBar from 'webpackbar';
 
 const webpackConfig = (env) => {
-    console.log('Building the client for EchoCli.');
+    console.log('Building the dev host application for EchoCli.');
     return {
         entry: ['@babel/polyfill', './src/index.tsx'],
         mode: 'production',
         devtool: 'source-map',
         output: {
             clean: true,
-            path: path.resolve(process.cwd(), 'client'),
+            path: path.resolve(process.cwd(), 'echo-dev-host'),
             filename: '[name].echo.bundle.js',
             chunkFilename: 'assets/[name].[contenthash].chunk.js',
             publicPath: '/'
@@ -117,11 +117,11 @@ const webpackConfig = (env) => {
                 patterns: [
                     {
                         from: path.resolve(import.meta.dirname, './public/index.css'),
-                        to: path.resolve(process.cwd(), 'client', 'index.css')
+                        to: path.resolve(process.cwd(), 'echo-dev-host', 'index.css')
                     },
                     {
                         from: path.resolve(import.meta.dirname, './public/env-config.js'),
-                        to: path.resolve(process.cwd(), 'client', 'env-config.js')
+                        to: path.resolve(process.cwd(), 'echo-dev-host', 'env-config.js')
                     }
                 ]
             })

package/lib/{echo-build-client.d.ts → echo-build-dev-host.d.ts}

@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 import { Command } from '@oclif/command';
-export default class BuildClient extends Command {
+export default class BuildDevHost extends Command {
     static description: string;
     run(): Promise<void>;
 }

package/lib/echo-build-dev-host.js

@@ -0,0 +1,35 @@
+#!/usr/bin/env node
+import { Command } from '@oclif/command';
+import { execSync } from 'child_process';
+import fs from 'fs-extra';
+import path from 'path';
+export default class BuildDevHost extends Command {
+    static description = 'Build echo-dev-host locally with current echo lib versions';
+    async run() {
+        // Paths
+        const cliNodeModules = path.resolve(process.cwd(), 'node_modules', '@equinor', 'echo-cli');
+        const devHostSrc = path.join(cliNodeModules, './lib/echo-dev-host');
+        const tmpDevHost = path.resolve(process.cwd(), 'echo-dev-host-tmp');
+        const buildOutput = path.join(tmpDevHost, 'echo-dev-host');
+        const finalOutput = path.join(cliNodeModules, 'echo-dev-host');
+        // 1. Prepare echo-dev-host-tmp
+        if (!fs.existsSync(tmpDevHost)) {
+            this.log(`echo-dev-host-tmp does not exist. Copying echo-dev-host to ${tmpDevHost}...`);
+            fs.copySync(devHostSrc, tmpDevHost);
+        }
+        else {
+            this.log(`echo-dev-host-tmp exists. Reusing it.`);
+        }
+        // 2. Run npm install and build in temp folder
+        this.log('Installing dependencies and building echo-dev-host...');
+        execSync('npm install', { cwd: tmpDevHost, stdio: 'inherit' });
+        execSync('npm run build', { cwd: tmpDevHost, stdio: 'inherit' });
+        // 3. Copy build output back to echo-cli's client folder
+        this.log(`Copying build output to ${finalOutput}...`);
+        fs.removeSync(finalOutput);
+        fs.copySync(buildOutput, finalOutput);
+        this.log('echo-dev-host build complete.');
+    }
+}
+BuildDevHost.run();
+//# sourceMappingURL=echo-build-dev-host.js.map

package/lib/echo-build-dev-host.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"echo-build-dev-host.js","sourceRoot":"","sources":["../src/echo-build-dev-host.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,MAAM,UAAU,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,OAAO;IAC7C,MAAM,CAAC,WAAW,GAAG,4DAA4D,CAAC;IAElF,KAAK,CAAC,GAAG;QACL,QAAQ;QACR,MAAM,cAAc,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,cAAc,EAAE,UAAU,EAAE,UAAU,CAAC,CAAC;QAC3F,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE,qBAAqB,CAAC,CAAC;QACpE,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,mBAAmB,CAAC,CAAC;QACpE,MAAM,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,eAAe,CAAC,CAAC;QAC3D,MAAM,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE,eAAe,CAAC,CAAC;QAE/D,+BAA+B;QAC/B,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,UAAU,CAAC,EAAE,CAAC;YAC7B,IAAI,CAAC,GAAG,CAAC,8DAA8D,UAAU,KAAK,CAAC,CAAC;YACxF,EAAE,CAAC,QAAQ,CAAC,UAAU,EAAE,UAAU,CAAC,CAAC;QACxC,CAAC;aAAM,CAAC;YACJ,IAAI,CAAC,GAAG,CAAC,uCAAuC,CAAC,CAAC;QACtD,CAAC;QAED,8CAA8C;QAC9C,IAAI,CAAC,GAAG,CAAC,uDAAuD,CAAC,CAAC;QAClE,QAAQ,CAAC,aAAa,EAAE,EAAE,GAAG,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC;QAC/D,QAAQ,CAAC,eAAe,EAAE,EAAE,GAAG,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC;QAEjE,wDAAwD;QACxD,IAAI,CAAC,GAAG,CAAC,2BAA2B,WAAW,KAAK,CAAC,CAAC;QACtD,EAAE,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC;QAC3B,EAAE,CAAC,QAAQ,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;QAEtC,IAAI,CAAC,GAAG,CAAC,+BAA+B,CAAC,CAAC;IAC9C,CAAC;;AAGL,YAAY,CAAC,GAAG,EAAE,CAAC"}

package/lib/echo-dev-host/.env

@@ -0,0 +1,29 @@
+/* eslint-disable */
+
+Never use PROCESS.ENV/process.env use env() instead. (Except for process.env.NODE_ENV)
+---------------------------------
+
+Based on: https://www.freecodecamp.org/news/how-to-implement-runtime-environment-variables-with-create-react-app-docker-and-nginx-7f9d42a91d70/
+
+All variables in this files are converted to env() during build, and values here are replaced
+by environment variables if they exists. This is done by running the env.sh bash script before the
+build.
+
+env.sh generates env-config.js containing all the variables, which is included in index.html,
+and appended to Window._env_. env() is a shortcut for Window._env_ and should be used in code.
+
+NOTE: Seems like window._env_ is not available in a worker
+
+*/
+WEBSITE_HOSTNAME=localhost:3000;
+REACT_APP_DEFAULT_CACHE_LOCATION=localstorage
+REACT_APP_API_URL=https://dt-echopedia-api-dev.azurewebsites.net
+REACT_APP_WEB_URL=https://dt-echopedia-web-dev.azurewebsites.net
+REACT_APP_WEB_PROD_URL=https://echo.equinor.com
+REACT_APP_AZURE_AD_TENNANT=StatoilSRM.onmicrosoft.com
+REACT_APP_AZURE_AD_TENNANT_ID=3aa4a235-b6e2-48d5-9195-7fcf05b459b0
+REACT_APP_AZURE_AD_CLIENT_ID=751d2504-0b66-4b78-9807-4b60525a14c6
+REACT_APP_API_CLIENT_ID=aef35d97-53d4-4fd0-adaf-c5a514b38436
+REACT_APP_APPINSIGHTS_CONNECTION_STRING=InstrumentationKey=e5299075-a00d-4012-96f9-42861e8d8a9e;IngestionEndpoint=https://northeurope-3.in.applicationinsights.azure.com/;LiveEndpoint=https://northeurope.livediagnostics.monitor.azure.com/;ApplicationId=a9b64222-d4a9-42e6-a615-7428fe1a26af
+REACT_APP_AZURE_BUILD_NUMBER=0.8.dev.9
+REACT_APP_LOGGER_ACTIVE=false

package/lib/echo-dev-host/README.md

@@ -0,0 +1,46 @@
+# echo-dev-host
+
+TODO: update this readme
+
+Lightweight host application for Echo Module development, shipped with `echo-cli`
+
+## Why it's needed
+
+Each Echo Module needs EchopediaWeb as a host to run.
+
+This makes development of Echo Modules difficult, since every time a
+new change is introduced, one would need to release and deploy new version of the given Echo Module to see the newly developed features, changes.
+
+Echo Client (with the help of `echo-cli`) solves this issue: it provides an "empty shell" of EchopediaWeb's framework, providing the same dependencies.
+
+Echo Module devs can run their module via `npm start`, and develop their module "as normal": their module will show up in echo client, so they can see their changes right away with hot module reload.
+
+To make sure that Echo Client mimics the same environment as the original echopediaWeb app, their dependencies are linked, and they need to be kept in sync.
+
+## How it works
+
+`echo-client` ships together with `echo-cli`, so each Echo Module should have `echo-cli` as a dev dependency.
+
+When you run the script `npm start` in your Echo Module, `echo-client` will start up providing the dev environment and the empty shell
+of EchopediaWeb.
+
+Development goes as usual:
+
+- change code
+- save changes
+- hot reload will take care of applying the changes
+
+## Maintaining dependencies
+
+### Echo packages
+
+With new echo packages released (for example: `echo-framework`, `echo-components`) the `echo-client` needs to be updated with these new versions as well,
+and a new `echo-cli` release needs to be done.
+
+When that's done, your Echo Module needs to be bumped to this new version of `echo-cli`.
+
+See [here](../echo-cli/README.md) how to release new version of `echo-cli` (which ships `echo-client`)
+
+### Non-Echo packages
+
+Non echo package dependencies are linked to echopediaWeb dependencies, so they are aligned and don't require maintenance.

package/lib/echo-dev-host/babel.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+    presets: ['@babel/preset-env', ['@babel/preset-react', {'runtime': 'automatic'}]],
+    plugins: [
+        '@babel/plugin-syntax-dynamic-import'
+    ],
+    env: {
+        test: {
+            plugins: ['@babel/plugin-transform-runtime'],
+        },
+    },
+};

package/lib/echo-dev-host/env.sh

@@ -0,0 +1,51 @@
+#!/bin/bash
+
+#https://www.freecodecamp.org/news/how-to-implement-runtime-environment-variables-with-create-react-app-docker-and-nginx-7f9d42a91d70/
+#
+
+# Recreate config file
+rm -rf ./env-config.js
+touch ./env-config.js
+
+echo "creating env-config.js"
+
+# Add assignment 
+echo "window._env_ = {" >> ./env-config.js
+
+# Read each line in .env file
+# Each line represents key=value pairs
+while read -r line || [[ -n "$line" ]];
+do
+  #only process lines containting =
+  if [[ $line == *"="* ]]; then
+
+    # Split env variables by character `=`
+    if printf '%s\n' "$line" | grep -q -e '='; then
+      varname=$(printf '%s\n' "$line" | sed -e 's/=.*//')
+      varvalue=$(printf '%s\n' "$line" | sed -e 's/^[^=]*=//')
+    fi
+
+    # Read value of current variable if exists as Environment variable
+    value=$(printf '%s\n' "${!varname}")
+    # Otherwise use value from .env file
+    [[ -z $value ]] && value=${varvalue}
+  
+    # Append configuration property to JS file
+    echo "  $varname: \"$value\"," >> ./env-config.js
+
+    #print variables
+    valueObfuscated=$(printf '%s' "$value" | cut -c 1-3)
+    #echo "  $varname: \"$value\"," #print the environment variables
+    echo "  $varname=\"$valueObfuscated***\"," #print the environment variables obfuscated
+  fi
+done < .env
+
+echo "}" >> ./env-config.js
+
+#if directory exists, copy to public folder. Needed for dev enironment (npm start)
+if [ -d "public" ]; then
+  rm -rf ./public/env-config.js
+  cp ./env-config.js ./public/env-config.js
+fi
+
+echo "done creating env-config.js"

package/lib/echo-dev-host/jest.config.js

@@ -0,0 +1,21 @@
+module.exports = {
+    testEnvironment: 'jsdom',
+    moduleNameMapper: {
+        '\\.css$': 'identity-obj-proxy',
+        '\\.svg$': '<rootDir>/src/__mocks__/svgrMock.ts'
+    },
+    preset: 'ts-jest',
+    coveragePathIgnorePatterns: ['src/types/*', 'src/index.ts', 'src/typings/*'],
+    collectCoverageFrom: ['src/**/*.{js,jsx,ts,tsx}', '!<rootDir>/node_modules/'],
+    coverageThreshold: {
+        global: {
+            lines: 90,
+            statements: 90
+        }
+    },
+    transform: {
+        '^.+\\.(j|t)sx?$': 'ts-jest'
+    },
+    testMatch: ['**/__tests__/**/*.test.[jt]s?(x)', '**/?(*.)+(spec|test).[tj]s?(x)'],
+    setupFilesAfterEnv: ['<rootDir>/src/setupTests.ts']
+};