From 3cff22c14c4b5b72eab57fea970ce025bd195f77 Mon Sep 17 00:00:00 2001 From: Ramiro Berrelleza Date: Tue, 18 Oct 2022 22:44:59 -0700 Subject: [PATCH 1/5] Add the new admin experience --- frontend/.stignore | 1 + frontend/Dockerfile | 4 ++- frontend/package.json | 9 ++++-- frontend/src/Admin.jsx | 17 ++++++++++ frontend/src/App.jsx | 18 +++++------ frontend/src/index.jsx | 4 ++- frontend/webpack.config.js | 5 ++- frontend/yarn.lock | 63 +++++++++++++++++++++++++++++++++++++- okteto.yml | 4 +++ 9 files changed, 109 insertions(+), 16 deletions(-) create mode 100644 frontend/src/Admin.jsx diff --git a/frontend/.stignore b/frontend/.stignore index 5b9365ee..6e8eec90 100644 --- a/frontend/.stignore +++ b/frontend/.stignore @@ -1,2 +1,3 @@ chart node_modules +dist \ No newline at end of file diff --git a/frontend/Dockerfile b/frontend/Dockerfile index 788a12c0..169070a6 100644 --- a/frontend/Dockerfile +++ b/frontend/Dockerfile @@ -9,7 +9,9 @@ COPY package.json yarn.lock ./ RUN --mount=type=cache,target=/root/.yarn YARN_CACHE_FOLDER=/root/.yarn yarn install COPY . . -RUN --mount=type=cache,target=./node_modules/.cache/webpack yarn build +ARG LD_CLIENT_ID +RUN echo $LD_CLIENT_ID +RUN --mount=type=cache,target=./node_modules/.cache/webpack LD_CLIENT_ID=$LD_CLIENT_ID yarn build FROM nginx:alpine diff --git a/frontend/package.json b/frontend/package.json index d880108a..4a57f8ed 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -5,10 +5,13 @@ "private": true, "dependencies": { "@hot-loader/react-dom": "^17.0.2", + "add": "^2.0.6", + "launchdarkly-react-client-sdk": "^2.29.0", "react": "17.0.2", "react-dom": "^17.0.1", "react-hot-loader": "^4.13.0", - "react-router-dom": "5.3.3" + "react-router-dom": "5.3.3", + "yarn": "^1.22.19" }, "devDependencies": { "@babel/core": "^7.12.3", @@ -29,8 +32,8 @@ }, "scripts": { "start": "yarn devel", - "devel": "webpack serve --mode=development", - "build": "webpack", + "devel": "webpack serve --mode=development --env LD_CLIENT_ID=$LD_CLIENT_ID ", + "build": "webpack --env LD_CLIENT_ID=$LD_CLIENT_ID", "test": "echo \"Error: no test specified\" && exit 1" }, "browserslist": [ diff --git a/frontend/src/Admin.jsx b/frontend/src/Admin.jsx new file mode 100644 index 00000000..9aac14d0 --- /dev/null +++ b/frontend/src/Admin.jsx @@ -0,0 +1,17 @@ +import React from 'react'; +import { BrowserRouter as Switch, Route, Link } from 'react-router-dom'; +import { withLDConsumer } from 'launchdarkly-react-client-sdk'; + +const adminLink = ({flags}) => { + return ( + flags.adminDashboard && + + + + + Admin + + ); +} + +export const AdminLink = withLDConsumer()(adminLink); diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index ba2173e2..245d31be 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -1,7 +1,8 @@ import React, { Component } from 'react'; import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom'; import Loader from './Loader'; -import Users from './Users'; +import { AdminLink, AdminSwitch } from './Admin'; + import './App.css'; @@ -16,10 +17,12 @@ const financial = (x) => { } class App extends Component { + constructor(props) { super(props); - + this.state = { + flags: props.flags, catalog: { data: [], loaded: false @@ -92,6 +95,7 @@ class App extends Component { render() { const { catalog, rental, session, cost } = this.state; + return (
@@ -111,7 +115,7 @@ class App extends Component {
- +
@@ -120,12 +124,7 @@ class App extends Component { Kubecon 2022 special offer! Get a 50% discount on all movies today!
*/} - - - - - Admin - +
{ ); } + export default App; diff --git a/frontend/src/index.jsx b/frontend/src/index.jsx index 51e01415..1dbaf60a 100644 --- a/frontend/src/index.jsx +++ b/frontend/src/index.jsx @@ -1,6 +1,7 @@ import { hot } from 'react-hot-loader/root'; import React from 'react'; import { render } from 'react-dom'; +import { withLDProvider } from 'launchdarkly-react-client-sdk'; import App from './App'; import './index.css'; @@ -9,5 +10,6 @@ if (module.hot) { module.hot.accept(); } -const Root = hot(App); +const app = withLDProvider({ clientSideID: process.env.LD_CLIENT_ID })(App); +const Root = hot(app); render(, document.getElementById('root')); diff --git a/frontend/webpack.config.js b/frontend/webpack.config.js index b19b1b1d..3a5a1a7a 100644 --- a/frontend/webpack.config.js +++ b/frontend/webpack.config.js @@ -6,7 +6,7 @@ const CopyPlugin = require('copy-webpack-plugin'); const srcPath = path.join(__dirname, 'src'); const distPath = path.join(__dirname, 'dist'); -module.exports = (_, argv) => { +module.exports = (env, argv) => { const mode = argv.mode ?? 'production'; const includeSourceMap = mode === 'production' ? 'hidden-nosources-source-map' : 'source-map'; return { @@ -69,6 +69,9 @@ module.exports = (_, argv) => { }), new DefinePlugin({ MODE: JSON.stringify(mode), + }), + new DefinePlugin({ + 'process.env.LD_CLIENT_ID': JSON.stringify(env.LD_CLIENT_ID), }) ], devServer: { diff --git a/frontend/yarn.lock b/frontend/yarn.lock index cc4e9af8..ce3bc91b 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -1314,6 +1314,11 @@ acorn@^8.4.1, acorn@^8.5.0: resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.7.0.tgz#90951fde0f8f09df93549481e5fc141445b791cf" integrity sha512-V/LGr1APy+PXIwKebEWrkZPwoeoF+w1jiOBUmuxuiUIaOHtob8Qc9BTrYo7VuI5fR8tqsy+buA2WFooR5olqvQ== +add@^2.0.6: + version "2.0.6" + resolved "https://registry.yarnpkg.com/add/-/add-2.0.6.tgz#248f0a9f6e5a528ef2295dbeec30532130ae2235" + integrity sha512-j5QzrmsokwWWp6kUcJQySpbG+xfOBqqKnup3OIk1pz+kB/80SLorZ9V8zHFLO92Lcd+hbvq8bT+zOGoPkmBV0Q== + aggregate-error@^3.0.0: version "3.1.0" resolved "https://registry.yarnpkg.com/aggregate-error/-/aggregate-error-3.1.0.tgz#92670ff50f5359bdb7a3e0d40d0ec30c5737687a" @@ -1464,6 +1469,11 @@ balanced-match@^1.0.0: resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee" integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw== +base64-js@^1.3.0: + version "1.5.1" + resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.5.1.tgz#1b1b440160a5bf7ad40b650f095963481903930a" + integrity sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA== + batch@0.6.1: version "0.6.1" resolved "https://registry.yarnpkg.com/batch/-/batch-0.6.1.tgz#dc34314f4e679318093fc760272525f94bf25c16" @@ -2019,6 +2029,11 @@ escape-string-regexp@^1.0.5: resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4" integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ= +escape-string-regexp@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz#14ba83a5d373e3d311e5afca29cf5bfad965bf34" + integrity sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA== + eslint-scope@5.1.1: version "5.1.1" resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-5.1.1.tgz#e786e59a66cb92b3f6c1fb0d508aab174848f48c" @@ -2115,6 +2130,11 @@ express@^4.17.1: utils-merge "1.0.1" vary "~1.1.2" +fast-deep-equal@^2.0.1: + version "2.0.1" + resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz#7b05218ddf9667bf7f370bf7fdb2cb15fdd0aa49" + integrity sha512-bCK/2Z4zLidyB4ReuIsvALH6w31YfAQDmXMqMx6FyfHqvBxtjC0eRumeSu4Bs3XtXwpyIywtSTrVT99BxY1f9w== + fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3: version "3.1.3" resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525" @@ -2383,7 +2403,7 @@ history@^4.9.0: tiny-warning "^1.0.0" value-equal "^1.0.1" -hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0: +hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2: version "3.3.2" resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45" integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw== @@ -2734,6 +2754,32 @@ kind-of@^6.0.2: resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.3.tgz#07c05034a6c349fa06e24fa35aa76db4580ce4dd" integrity sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw== +launchdarkly-js-client-sdk@2.24.0: + version "2.24.0" + resolved "https://registry.yarnpkg.com/launchdarkly-js-client-sdk/-/launchdarkly-js-client-sdk-2.24.0.tgz#8aa796dbd9af6caf1934fee2e503a5ae055884ca" + integrity sha512-7Bk5QxgFgfebo+PQJyD3ZglojWF6+Z2y5YC5NafVe6jHxS6GqrTt/B/xsJo9cE2KvO8Bc0+1/IgjBr7sNEJ0tA== + dependencies: + escape-string-regexp "^4.0.0" + launchdarkly-js-sdk-common "3.8.1" + +launchdarkly-js-sdk-common@3.8.1: + version "3.8.1" + resolved "https://registry.yarnpkg.com/launchdarkly-js-sdk-common/-/launchdarkly-js-sdk-common-3.8.1.tgz#67f0684784fe181bf6c6483c4116cb8730d555e9" + integrity sha512-2U7Z1Q3z8+q5hH93F/HiKTgThZ+tUtgwucE7uLP+xOTTb9xMCNt14NqtSD8Vjpptaol0g9cVhQV5n+Im+0fV4w== + dependencies: + base64-js "^1.3.0" + fast-deep-equal "^2.0.1" + uuid "^3.3.2" + +launchdarkly-react-client-sdk@^2.29.0: + version "2.29.0" + resolved "https://registry.yarnpkg.com/launchdarkly-react-client-sdk/-/launchdarkly-react-client-sdk-2.29.0.tgz#2ee849d4014f131440cb703abf7c1273696cf8e4" + integrity sha512-iKjzz9v30GS+nwyfY36teucihqRMQg2LPwo+haU3HsY29/6/8JDnejzf/Wnulg0Fj9d7AzTrPydm4FP2dVW+bQ== + dependencies: + hoist-non-react-statics "^3.3.2" + launchdarkly-js-client-sdk "2.24.0" + lodash.camelcase "^4.3.0" + loader-runner@^4.2.0: version "4.2.0" resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-4.2.0.tgz#d7022380d66d14c5fb1d496b89864ebcfd478384" @@ -2764,6 +2810,11 @@ locate-path@^5.0.0: dependencies: p-locate "^4.1.0" +lodash.camelcase@^4.3.0: + version "4.3.0" + resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6" + integrity sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA== + lodash.debounce@^4.0.8: version "4.0.8" resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af" @@ -3952,6 +4003,11 @@ utils-merge@1.0.1: resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713" integrity sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM= +uuid@^3.3.2: + version "3.4.0" + resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.4.0.tgz#b23e4358afa8a202fe7a100af1f5f883f02007ee" + integrity sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A== + uuid@^8.3.2: version "8.3.2" resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2" @@ -4125,3 +4181,8 @@ ws@^8.4.2: version "8.5.0" resolved "https://registry.yarnpkg.com/ws/-/ws-8.5.0.tgz#bfb4be96600757fe5382de12c670dab984a1ed4f" integrity sha512-BWX0SWVgLPzYwF8lTzEy1egjhS4S4OEAHfsO8o65WOVsrnSRGaSiUaa9e0ggGlkMTtBlmOpEXiie9RUcBO86qg== + +yarn@^1.22.19: + version "1.22.19" + resolved "https://registry.yarnpkg.com/yarn/-/yarn-1.22.19.tgz#4ba7fc5c6e704fce2066ecbfb0b0d8976fe62447" + integrity sha512-/0V5q0WbslqnwP91tirOvldvYISzaqhClxzyUKXYxs07yUILIs5jx/k6CFe8bvKSkds5w+eiOqta39Wk3WxdcQ== diff --git a/okteto.yml b/okteto.yml index 6f026482..8909ec29 100644 --- a/okteto.yml +++ b/okteto.yml @@ -3,6 +3,8 @@ icon: https://apps.okteto.com/movies/icon.png build: frontend: context: frontend + args: + - LD_CLIENT_ID=$LD_CLIENT_ID frontend-dev: context: frontend target: dev @@ -45,6 +47,8 @@ dev: command: bash sync: - frontend:/usr/src/app + environment: + - LD_CLIENT_ID=$LD_CLIENT_ID catalog: command: yarn start sync: From 7abda3c4fc946025921fea2dd0f1d108ec2d970d Mon Sep 17 00:00:00 2001 From: Ramiro Berrelleza Date: Tue, 18 Oct 2022 22:49:29 -0700 Subject: [PATCH 2/5] Fix user loader --- frontend/src/App.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index 245d31be..148f1902 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -1,8 +1,8 @@ import React, { Component } from 'react'; import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom'; import Loader from './Loader'; -import { AdminLink, AdminSwitch } from './Admin'; - +import { AdminLink } from './Admin'; +import Users from './Users'; import './App.css'; From 20aa49465d1e6620acfd008c72da80cf78fb0e32 Mon Sep 17 00:00:00 2001 From: Ramiro Berrelleza Date: Tue, 18 Oct 2022 23:19:36 -0700 Subject: [PATCH 3/5] Make text more noticeable --- frontend/Dockerfile | 1 - frontend/src/Users.css | 1 + 2 files changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/Dockerfile b/frontend/Dockerfile index 169070a6..8f7156f1 100644 --- a/frontend/Dockerfile +++ b/frontend/Dockerfile @@ -10,7 +10,6 @@ RUN --mount=type=cache,target=/root/.yarn YARN_CACHE_FOLDER=/root/.yarn yarn ins COPY . . ARG LD_CLIENT_ID -RUN echo $LD_CLIENT_ID RUN --mount=type=cache,target=./node_modules/.cache/webpack LD_CLIENT_ID=$LD_CLIENT_ID yarn build FROM nginx:alpine diff --git a/frontend/src/Users.css b/frontend/src/Users.css index fb811c39..4b0c27d0 100644 --- a/frontend/src/Users.css +++ b/frontend/src/Users.css @@ -36,6 +36,7 @@ .Table__head .Table__row { height: 60px; + background: #00D1CA; background: #2a2332; font-size: 16px; font-weight: bold; From 332070eda69e58b2cc91459ae01cc0a2574c294a Mon Sep 17 00:00:00 2001 From: Ramiro Berrelleza Date: Wed, 19 Oct 2022 00:47:12 -0700 Subject: [PATCH 4/5] register user with LD --- frontend/src/Admin.jsx | 6 ++++-- frontend/src/index.jsx | 8 +++++++- 2 files changed, 11 insertions(+), 3 deletions(-) diff --git a/frontend/src/Admin.jsx b/frontend/src/Admin.jsx index 9aac14d0..4a9367a8 100644 --- a/frontend/src/Admin.jsx +++ b/frontend/src/Admin.jsx @@ -4,13 +4,15 @@ import { withLDConsumer } from 'launchdarkly-react-client-sdk'; const adminLink = ({flags}) => { return ( - flags.adminDashboard && +
+ {flags.adminDashboard && Admin - + } +
); } diff --git a/frontend/src/index.jsx b/frontend/src/index.jsx index 1dbaf60a..bc0a28d9 100644 --- a/frontend/src/index.jsx +++ b/frontend/src/index.jsx @@ -10,6 +10,12 @@ if (module.hot) { module.hot.accept(); } -const app = withLDProvider({ clientSideID: process.env.LD_CLIENT_ID })(App); +const app = withLDProvider({ + clientSideID: process.env.LD_CLIENT_ID, + user: { + "key": "aa0ceb", + "name": "Cindy Lopez", + "email": "cindy@okteto.com" +}, })(App); const Root = hot(app); render(, document.getElementById('root')); From 59bddb956aee0cbf3d2a3921eaec9baf31922215 Mon Sep 17 00:00:00 2001 From: Ramiro Berrelleza Date: Wed, 19 Oct 2022 16:18:58 -0700 Subject: [PATCH 5/5] inject env var --- okteto.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/okteto.yml b/okteto.yml index 8909ec29..992bbe2d 100644 --- a/okteto.yml +++ b/okteto.yml @@ -48,7 +48,7 @@ dev: sync: - frontend:/usr/src/app environment: - - LD_CLIENT_ID=$LD_CLIENT_ID + - LD_CLIENT_ID catalog: command: yarn start sync: