okteto · rberrelleza · Oct 19, 2022 · Oct 19, 2022 · Oct 19, 2022 · Oct 19, 2022
diff --git a/frontend/.stignore b/frontend/.stignore
@@ -1,2 +1,3 @@
 chart
 node_modules
+dist
diff --git a/frontend/Dockerfile b/frontend/Dockerfile
@@ -9,7 +9,8 @@ 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 --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
@@ -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
@@ -0,0 +1,19 @@
+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 (
+      <div>
+      {flags.adminDashboard && 
+      <Link className="button" role="button" to="/admin/users">
+      <svg height="20" width="20" viewBox="0 0 48 48">
+        <path fill="#fff" d="M27.3 44h-6.6q-.55 0-.975-.35-.425-.35-.525-.9l-.8-5.05q-.95-.35-2-.95t-1.85-1.25L9.9 37.65q-.55.25-1.1.075T7.95 37l-3.3-5.85q-.3-.5-.15-1.05t.6-.9l4.3-3.15q-.1-.45-.125-1.025Q9.25 24.45 9.25 24q0-.45.025-1.025T9.4 21.95L5.1 18.8q-.45-.35-.6-.9-.15-.55.15-1.05L7.95 11q.3-.55.85-.725.55-.175 1.1.075l4.65 2.15q.8-.65 1.85-1.25t2-.9l.8-5.1q.1-.55.525-.9Q20.15 4 20.7 4h6.6q.55 0 .975.35.425.35.525.9l.8 5.05q.95.35 2.025.925Q32.7 11.8 33.45 12.5l4.65-2.15q.55-.25 1.1-.075t.85.725l3.3 5.8q.3.5.175 1.075t-.625.925l-4.3 3.05q.1.5.125 1.075.025.575.025 1.075t-.025 1.05q-.025.55-.125 1.05l4.3 3.1q.45.35.6.9.15.55-.15 1.05L40.05 37q-.3.55-.85.725-.55.175-1.1-.075l-4.65-2.15q-.8.65-1.825 1.275-1.025.625-2.025.925l-.8 5.05q-.1.55-.525.9-.425.35-.975.35ZM24 30.5q2.7 0 4.6-1.9 1.9-1.9 1.9-4.6 0-2.7-1.9-4.6-1.9-1.9-4.6-1.9-2.7 0-4.6 1.9-1.9 1.9-1.9 4.6 0 2.7 1.9 4.6 1.9 1.9 4.6 1.9Z"/>
+      </svg>
+      Admin
+    </Link>}
+    </div>
+    );
+}
+
+export const AdminLink = withLDConsumer()(adminLink);
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
 import Loader from './Loader';
+import { AdminLink } from './Admin';
 import Users from './Users';
 
 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 (
       <Router>
         <div className="App" ref={this.appRef} onScroll={this.handleScroll}>
@@ -111,7 +115,7 @@ class App extends Component {
 
           <div className="App__content">
             <Switch>
-              <Route exact path="/">
+              <Route exact path="/"> 
                 <div>
                   <div className='App__nav'>
 
@@ -120,12 +124,7 @@ class App extends Component {
                       Kubecon 2022 special offer! Get a <strong>50% discount</strong> on all movies today!
                     </div> */}
 
-                    <Link className="button" role="button" to="/admin/users">
-                      <svg height="20" width="20" viewBox="0 0 48 48">
-                        <path fill="#fff" d="M27.3 44h-6.6q-.55 0-.975-.35-.425-.35-.525-.9l-.8-5.05q-.95-.35-2-.95t-1.85-1.25L9.9 37.65q-.55.25-1.1.075T7.95 37l-3.3-5.85q-.3-.5-.15-1.05t.6-.9l4.3-3.15q-.1-.45-.125-1.025Q9.25 24.45 9.25 24q0-.45.025-1.025T9.4 21.95L5.1 18.8q-.45-.35-.6-.9-.15-.55.15-1.05L7.95 11q.3-.55.85-.725.55-.175 1.1.075l4.65 2.15q.8-.65 1.85-1.25t2-.9l.8-5.1q.1-.55.525-.9Q20.15 4 20.7 4h6.6q.55 0 .975.35.425.35.525.9l.8 5.05q.95.35 2.025.925Q32.7 11.8 33.45 12.5l4.65-2.15q.55-.25 1.1-.075t.85.725l3.3 5.8q.3.5.175 1.075t-.625.925l-4.3 3.05q.1.5.125 1.075.025.575.025 1.075t-.025 1.05q-.025.55-.125 1.05l4.3 3.1q.45.35.6.9.15.55-.15 1.05L40.05 37q-.3.55-.85.725-.55.175-1.1-.075l-4.65-2.15q-.8.65-1.825 1.275-1.025.625-2.025.925l-.8 5.05q-.1.55-.525.9-.425.35-.975.35ZM24 30.5q2.7 0 4.6-1.9 1.9-1.9 1.9-4.6 0-2.7-1.9-4.6-1.9-1.9-4.6-1.9-2.7 0-4.6 1.9-1.9 1.9-1.9 4.6 0 2.7 1.9 4.6 1.9 1.9 4.6 1.9Z"/>
-                      </svg>
-                      Admin
-                    </Link>
+                    <AdminLink />
                   </div>
                   <TitleList
                     title={`${session.name}'s movies`}
@@ -322,4 +321,5 @@ const KubeconLogo = ({ size = '21'}) => {
     </svg>
   );
 }
+
 export default App;
diff --git 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;

diff --git 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,12 @@ if (module.hot) {
   module.hot.accept();
 }
 
-const Root = hot(App);
+const app = withLDProvider({ 
+  clientSideID: process.env.LD_CLIENT_ID,  
+  user: {
+  "key": "aa0ceb",
+  "name": "Cindy Lopez",
+  "email": "[email protected]"
+}, })(App);
+const Root = hot(app);
 render(<Root />, document.getElementById('root'));
diff --git 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
@@ -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==
+
 [email protected]:
   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==
+
 [email protected]:
   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==
 
+[email protected]:
+  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"
+
+[email protected]:
+  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 @@ [email protected]:
   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
@@ -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
   catalog:
     command: yarn start
     sync: