sales-embedding-demo - v2 WIP

sales-embedding-demo/CONFIGURATION.md

@@ -33,18 +33,18 @@ The purpose of running this app on your localhost is that you can alter it to yo
 
 ### Change the Domain and Workspace
 
-* Open sales-embedding-demo in VSCode
+* Open sales-embedding-demo folder in VSCode
   * If you don't know how, click [here](#opening-sales-embedding-demo-in-visual-studio-code) and then return back here
-* While in VSCode, click Go --> Go to File… and type in `constants` to open `src/constants.js` file
-* Change the value of `backend` to your domain (e.g. https://leilani.internal.gooddata.com)
+* Open file `src/config.js` in VSCode
+* Change the value of `domain` to your actual domain (e.g. https://leilani.internal.gooddata.com)
   * This can be whatever domain you want this Sales Embedding Demo to work against
   * By default it is https://e2e-demo28.na.gooddata.com, but you can change it to anything
   * You most likely want to change it to https://yourname.internal.gooddata.com
 * Change the value of `workspace` to the workspace you'll be working with
   * This can be whatever workspace you want this Sales Embedding Demo to work against
   * When you log into platform using the domain URL, the workspace id is part of the URL, check the screenshots below
   * E.g. if you changed your domain to https://leilani.internal.gooddata.com/, when you log in to GoodData platform and navigate to Dashboards, you are redirected to https://leilani.internal.gooddata.com/dashboards/#/project/no6focgukfj3ohfds9dexvkqazugwo, then you want to change worksace to `no6focgukfj3ohfds9dexvkqazugwo`
-* Save the changes in `src/constants.js` file (`CMD + S`)
+* Save the changes in `src/config.js` file (`CMD + S`)
 * Restart the app by running `yarn start` again in the Terminal
   * If your app is still running, kill it first with `CTRL + C`, then restart with `yarn start`
 * You'll need to `Log out` from the application, and then `Log in` again for changes to take effect
@@ -57,11 +57,11 @@ The purpose of running this app on your localhost is that you can alter it to yo
 
 ### Change the Name of the Application
 
-* Open sales-embedding-demo in VSCode
+* Open sales-embedding-demo folder in VSCode
   * If you don't know how, click [here](#opening-sales-embedding-demo-in-visual-studio-code) and then return back here
-* While in VSCode, click Go --> Go to File… and type in `constants` to open `src/constants.js` file
+* Open file `src/config.js` in VSCode
 * Change the value of `appName` to from `sales-embedding-demo` to `ShopBoard Demo`
-* Save the changes in `src/constants.js` file
+* Save the changes in `src/config.js` file (`CMD + S`)
 * Wait till your app refreshes in your browser (or refresh manually)
 
 ---
@@ -71,11 +71,12 @@ The purpose of running this app on your localhost is that you can alter it to yo
 * In your browser, navigate to the Dashboard that you want to embed
 * Click the three horizontal dots in the top right corner, and select "Embed", check the screenshot below
 * After choosing your configuration options (e.g. show/hide Navigation panel), select the URL tab and click the `Copy URL` button, again check the screenshot below
-* Open sales-embedding-demo in VSCode
+* Open sales-embedding-demo folder in VSCode
   * If you don't know how, click [here](#opening-sales-embedding-demo-in-visual-studio-code) and then return back here
-* Open `src/routes/Home.js` in VSCode
-* Look for the `iframe` tag
-* Replace the value of `src` attribute with the URL in your clipboard (`CMD + V` to paste)
+* Open `src/config.js` in VSCode
+* Replace the value of `dashboardUrl` with the URL in your clipboard (`CMD + V` to paste)
+* Save the changes in `src/config.js` file (`CMD + S`)
+* Wait till your app refreshes in your browser (or refresh manually)
 
 <img src="public/configuration/02-embed-dashboard-01.png" width=800>
 <img src="public/configuration/02-embed-dashboard-02.png" width=800>
@@ -92,7 +93,20 @@ TODO
 
 ### Change the Colors
 
-TODO
+* Open sales-embedding-demo folder in VSCode
+  * If you don't know how, click [here](#opening-sales-embedding-demo-in-visual-studio-code) and then return back here
+* Open `src/config.js` in VSCode
+* Look for the following variables
+  * `headerBackgroundColor`
+  * `headerBorderBottomColor`
+  * `leftPaneBackgroundColor`
+  * `linkColor`
+* Uncomment the lines (delete the preceding `// `) and change HEX values to different colors
+  * To get the HEX value of a color, you can use [ColorZilla](https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp)
+* Save the changes in `src/config.js` file (`CMD + S`)
+* Wait till your app refreshes in your browser (or refresh manually)
+
+<img src="public/configuration/03-change-colors-01.png" width=800>
 
 ---
 

sales-embedding-demo/src/components/Header/Aside.js

@@ -5,6 +5,7 @@ import cx from "classnames";
 import { useAuth } from "../../contexts/Auth";
 import { AuthStatus } from "../../contexts/Auth/state";
 import InlineLoading from "../InlineLoading";
+import config from "../../config";
 
 import styles from "./Header.module.scss";
 
@@ -17,11 +18,19 @@ const Aside = () => {
             {[LOGGING_IN, LOGGING_OUT, AUTHORIZING].includes(authStatus) ? (
                 <InlineLoading />
             ) : authStatus === AUTHORIZED ? (
-                <Link to="/logout" className={cx(styles.Link, "s-logout-link")}>
+                <Link
+                    to="/logout"
+                    className={cx(styles.Link, "s-logout-link")}
+                    style={{ color: config.linkColor }}
+                >
                     Logout
                 </Link>
             ) : (
-                <Link to="/login" className={cx(styles.Link, "s-login-link")}>
+                <Link
+                    to="/login"
+                    className={cx(styles.Link, "s-login-link")}
+                    style={{ color: config.linkColor }}
+                >
                     Login
                 </Link>
             )}

sales-embedding-demo/src/components/Header/Header.js

@@ -10,6 +10,8 @@ import Logo from "./Logo";
 import Links from "./Links";
 import Aside from "./Aside";
 
+import config from "../../config";
+
 import styles from "./Header.module.scss";
 
 const VerticalDelimiter = ({ ...restProps }) => <div className={styles.VerticalDelimiter} {...restProps} />;
@@ -39,8 +41,8 @@ const BurgerMenu = () => {
                     <ProtectedItems>
                         {/* Uncomment these lines to add a workspace picker into the burger menu */}
                         {/* <div className={styles.Centered}>
-               <WorkspacePicker />
-            </div> */}
+                            <WorkspacePicker />
+                        </div> */}
                     </ProtectedItems>
                 </div>
             )}
@@ -70,7 +72,14 @@ const Header = () => {
     // You need to set this manually to the smallest window width that can still fit all menu items
     const isTooSmall = windowWidth && windowWidth < 666;
     return (
-        <nav className={styles.Header}>
+        <nav
+            className={styles.Header}
+            style={{
+                color: config.linkColor,
+                backgroundColor: config.headerBackgroundColor,
+                borderBottomColor: config.headerBorderBottomColor,
+            }}
+        >
             {isTooSmall ? (
                 <>
                     <BurgerMenu />

sales-embedding-demo/src/components/Header/Links.js

@@ -2,6 +2,8 @@ import React from "react";
 import cx from "classnames";
 import { NavLink } from "react-router-dom";
 
+import config from "../../config";
+
 import styles from "./Header.module.scss";
 
 const Links = () => {
@@ -10,20 +12,27 @@ const Links = () => {
             <NavLink
                 to="/welcome"
                 className={cx(styles.Link, "s-welcome-link")}
+                style={{ color: config.linkColor }}
                 activeClassName={styles.LinkActive}
             >
                 Welcome
             </NavLink>
-            <NavLink to={"/"} className={styles.Link}>
+            <NavLink to={"/"} className={styles.Link} style={{ color: config.linkColor }}>
                 Home
             </NavLink>
-            <NavLink to={"/"} className={styles.Link}>
+            <NavLink to={"/"} className={styles.Link} style={{ color: config.linkColor }}>
                 My Work
             </NavLink>
-            <NavLink to={"/"} className={styles.Link} activeClassName={styles.LinkActive} exact>
+            <NavLink
+                to={"/"}
+                className={styles.Link}
+                style={{ color: config.linkColor }}
+                activeClassName={styles.LinkActive}
+                exact
+            >
                 Reports
             </NavLink>
-            <NavLink to={"/"} className={styles.Link}>
+            <NavLink to={"/"} className={styles.Link} style={{ color: config.linkColor }}>
                 Settings
             </NavLink>
         </>

sales-embedding-demo/src/components/Header/Logo.js

@@ -3,12 +3,13 @@ import cx from "classnames";
 import { NavLink } from "react-router-dom";
 
 import { appName } from "../../constants";
+import config from "../../config";
 
 import styles from "./Header.module.scss";
 
 const Logo = () => {
     return (
-        <NavLink to="/" className={cx(styles.Link, styles.Logo)}>
+        <NavLink to="/" className={cx(styles.Link, styles.Logo)} style={{ color: config.linkColor }}>
             {appName}
         </NavLink>
     );

sales-embedding-demo/src/config.js

@@ -0,0 +1,40 @@
+/************************************************************************/
+/**************** Sales Embedding Demo Configuration File ***************/
+/************************************************************************/
+/*
+/* Note: Common mistake is to forget the comma at the end of each line.
+/*       Except for lines that are commented out (they start with //).
+/*
+/* Note: Values must be inside of quotes.
+/*       It doesn't matter if single ' or double ", but they must match.
+/*
+/************************************************************************/
+
+export default {
+    // EXAMPLE: 'ShopBoard App'
+    appName: "sales-embedding-demo",
+
+    // EXAMPLE: 'https://leilani.internal.gooddata.com'
+    domain: "https://e2e-demo28.na.gooddata.com",
+
+    // Workspace ID for the customer you are doing the workshop with
+    // EXAMPLE: If your URL says https://leilani.internal.gooddata.com/dashboards/#/project/no6focgukfj3ohfds9dexvkqazugwo
+    //   then you should change this to 'no6focgukfj3ohfds9dexvkqazugwo'
+    workspace: "gf5ar7e02sth33atdbzpabhvbddaqva3",
+
+    // URL of the embedded Dashboard
+    dashboardUrl:
+        "https://e2e-demo28.na.gooddata.com/dashboards/embedded/#/project/gf5ar7e02sth33atdbzpabhvbddaqva3/dashboard/aadPCE04gggj?showNavigation=false",
+
+    // Uncomment line below to change the header background color
+    // headerBackgroundColor: "#303442",
+
+    // Uncomment line below to change the color of the header bottom border
+    // headerBorderBottomColor: "#FFFFFF",
+
+    // Uncomment line below to change the navigation background color
+    // leftPaneBackgroundColor: "#303442",
+
+    // uncomment line below to change the navigation text color
+    // linkColor: "#ffffff",
+};

sales-embedding-demo/src/constants.js

@@ -1,22 +1,16 @@
-// The name of the application. It is rendered in a header of the web application.
+import config from "./config";
 
-// EXAMPLE: "ShopBoard App"
-export const appName = "sales-embedding-demo";
+// The name of the application. It is rendered in a header of the web application.
+export const appName = config.appName;
 
 // The URL of analytical GoodData backend with workspaces, insights, metrics, attributes, datasets, and users
 // that will be available to the application.
-
-// EXAMPLE: "https://leilani.internal.gooddata.com"
-export const backend = "https://e2e-demo28.na.gooddata.com";
+export const backend = config.domain;
 
 // The ID of workspace that is selected by default in the optional workspace picker component (located in the web
 // application header). It is also a default setting for script that refreshes LDM data used by the application.
 // LDM script shows list of available workspaces on backend in the case when the value is not set to any ID.
-
-// EXAMPLE: Workspace ID for the customer you are doing the workshop with
-// https://leilani.internal.gooddata.com/dashboards/#/project/no6focgukfj3ohfds9dexvkqazugwo
-// --> "no6focgukfj3ohfds9dexvkqazugwo"
-export const workspace = "gf5ar7e02sth33atdbzpabhvbddaqva3";
+export const workspace = config.workspace;
 
 // RegExp used by optional workspace picker component (located in the web application header) to filter out
 // workspaces that should not be rendered to the application user. Only the workspaces with title that match

sales-embedding-demo/src/routes/Home.js

@@ -2,36 +2,39 @@ import React from "react";
 import { NavLink } from "react-router-dom";
 
 import Page from "../components/Page";
+import config from "../config";
 
 import styles from "./Home.module.scss";
 
 const Home = () => {
     return (
         <Page mainClassName={styles.Home}>
-            <nav className={styles.Nav}>
+            <nav className={styles.Nav} style={{ backgroundColor: config.leftPaneBackgroundColor }}>
                 <ul>
                     <li>
-                        <NavLink to={"/"} className={styles.Link} activeClassName={styles.LinkActive}>
+                        <NavLink
+                            to={"/"}
+                            className={styles.Link}
+                            activeClassName={styles.LinkActive}
+                            style={{ color: config.linkColor }}
+                        >
                             Analytics Dashboard (iframe)
                         </NavLink>
                     </li>
                     <li>
-                        <NavLink to={"/"} className={styles.Link}>
+                        <NavLink to={"/"} className={styles.Link} style={{ color: config.linkColor }}>
                             DashboardView
                         </NavLink>
                     </li>
                     <li>
-                        <NavLink to={"/"} className={styles.Link}>
+                        <NavLink to={"/"} className={styles.Link} style={{ color: config.linkColor }}>
                             InsightView
                         </NavLink>
                     </li>
                 </ul>
             </nav>
             <div className={styles.Content}>
-                <iframe
-                    src="https://e2e-demo28.na.gooddata.com/dashboards/embedded/#/project/gf5ar7e02sth33atdbzpabhvbddaqva3/dashboard/aadPCE04gggj?showNavigation=true"
-                    title="Embedded Dashboard"
-                ></iframe>
+                <iframe src={config.dashboardUrl} title="Embedded Dashboard"></iframe>
             </div>
         </Page>
     );