@salesforcedevs/dx-components 1.4.0 → 1.5.0-alpha

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.4.0",
+    "version": "1.5.0-alpha",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -45,6 +45,5 @@
     },
     "volta": {
         "node": "18.18.0"
-    },
-    "gitHead": "052e1a61657dec2c9299570814e2d7c561517fe2"
+    }
 }

package/src/modules/dx/darkModeManager/darkModeManager.ts

@@ -1,4 +1,5 @@
 /* eslint-disable @lwc/lwc/no-document-query */
+import { OPTIMIZELY_INSTANCE, USER_ID } from "dx/featureFlag";
 import { LightningElement } from "lwc";
 
 export const LOCAL_STORAGE_KEY = "dx-dark-mode-theme";
@@ -29,10 +30,7 @@ declare module globalThis {
 
 export const DARK_MODE_THEMES = ["dark", "light"];
 export const DARKMODE_TOGGLE_EVENT_NAME = "UPDATE_DARK_MODE";
-
-export const isDarkModeEnabled = () => {
-    return process.env.DARK_MODE;
-};
+const DARK_MODE_FEATURE_FLAG = "dark-mode";
 
 export const dispatchDarkModeToggleEvent = () => {
     window.dispatchEvent(new Event(DARKMODE_TOGGLE_EVENT_NAME));
@@ -55,32 +53,40 @@ export const setLocalStorageDarkModeSetting = (theme: string) => {
 
 export default class DarkModeManager extends LightningElement {
     renderedCallback(): void {
-        if (
-            isDarkModeEnabled() &&
-            !globalThis.singletonDarkModeManagerRendered
-        ) {
-            const theme = getLocalStorageDarkModeSetting();
-            if (theme) {
-                if (DARK_MODE_THEMES.includes(theme)) {
-                    setTheme(theme);
+        OPTIMIZELY_INSTANCE!.onReady().then(({ success }) => {
+            if (
+                success &&
+                OPTIMIZELY_INSTANCE!.isFeatureEnabled(
+                    DARK_MODE_FEATURE_FLAG,
+                    USER_ID
+                )
+            ) {
+                if (!globalThis.singletonDarkModeManagerRendered) {
+                    const theme = getLocalStorageDarkModeSetting();
+                    if (theme) {
+                        if (DARK_MODE_THEMES.includes(theme)) {
+                            setTheme(theme);
+                        }
+                    } else if (isBrowserDarkModeEnabled()) {
+                        setTheme("dark");
+                    }
+                    window.addEventListener(
+                        DARKMODE_TOGGLE_EVENT_NAME,
+                        onDarkModeToggle
+                    );
+                    globalThis.singletonDarkModeManagerRendered = true;
                 }
-            } else if (isBrowserDarkModeEnabled()) {
-                setTheme("dark");
             }
-            window.addEventListener(
-                DARKMODE_TOGGLE_EVENT_NAME,
-                onDarkModeToggle
-            );
-            globalThis.singletonDarkModeManagerRendered = true;
-        }
+        });
     }
 
     disconnectedCallback(): void {
-        if (isDarkModeEnabled()) {
+        if (globalThis.singletonDarkModeManagerRendered) {
             window.removeEventListener(
                 DARKMODE_TOGGLE_EVENT_NAME,
                 onDarkModeToggle
             );
+            globalThis.singletonDarkModeManagerRendered = false;
         }
     }
 }

package/src/modules/dx/featureFlag/featureFlag.ts

@@ -3,37 +3,42 @@ import optimizelySdk from "@optimizely/optimizely-sdk";
 
 // This is needed to specify user context (such as logged in, admin, ...etc).
 // leave this as hard-coded for now until we create audiences in Optimizely.
-const userId = "user123";
+export const USER_ID = "sf-dwo";
+const LOCAL_ENVIRONMENT_SDK_KEY = "DzwQxncbVQsbMnXfjpasL";
+const SDK_KEY = process.env.OPTIMIZELY_SDK_KEY;
+const DATAFILE_ACCESS_TOKEN = process.env.OPTIMIZELY_DATAFILE_ACCESS_TOKEN;
+const DATAFILE_OPTIONS =
+    SDK_KEY && DATAFILE_ACCESS_TOKEN
+        ? {
+              urlTemplate: `https://config.optimizely.com/datafiles/auth/${SDK_KEY}.json`,
+              datafileAccessToken: DATAFILE_ACCESS_TOKEN
+          }
+        : undefined;
+export const OPTIMIZELY_INSTANCE = optimizelySdk.createInstance({
+    sdkKey: SDK_KEY || LOCAL_ENVIRONMENT_SDK_KEY,
+    datafileOptions: DATAFILE_OPTIONS
+});
 
 export default class FeatureFlag extends LightningElement {
     @api flag!: string;
 
-    private optimizelyInstance: any;
-
     private showElements(slot: any) {
         slot.classList.remove("hidden");
     }
 
-    connectedCallback(): void {
-        this.optimizelyInstance = optimizelySdk.createInstance({
-            sdkKey: process.env.OPTIMIZELY_SDK_KEY
-        });
-    }
-
+    /*
+        Note that this component only stops the element from being redered to the screen.
+        If you want to stop the execution of the code for the element, you will need to also check
+        the feature flag in that component.
+    */
     renderedCallback(): void {
         const slotEl = this.template.querySelector("slot") as any;
 
-        this.optimizelyInstance?.onReady().then(({ success, reason }: any) => {
-            if (!success) {
-                console.log(
-                    `Optimizely client initialization unsuccessful, reason: ${reason}`
-                );
-                return;
-            }
-            const user = this.optimizelyInstance?.createUserContext(userId);
-            const decision = user?.decide(this.flag);
-
-            if (decision?.enabled) {
+        OPTIMIZELY_INSTANCE!.onReady().then(({ success }) => {
+            if (
+                success &&
+                OPTIMIZELY_INSTANCE!.isFeatureEnabled(this.flag, USER_ID)
+            ) {
                 this.showElements(slotEl);
             }
         });

package/src/modules/dx/featuredContentHeader/featuredContentHeader.html

@@ -21,14 +21,14 @@
                 <div>
                     <slot name="language-selector"></slot>
                 </div>
-                <template lwc:if={isDarkModeEnabled}>
+                <dx-feature-flag flag="dark_mode">
                     <div
                         class="dark-mode-button"
                         onclick={onDarkModeButtonClick}
                     >
                         <div class="dark-mode-icon"></div>
                     </div>
-                </template>
+                </dx-feature-flag>
             </div>
         </div>
         <div class="container-layout">

package/src/modules/dx/featuredContentHeader/featuredContentHeader.ts

@@ -5,10 +5,7 @@ import { toJson } from "dxUtils/normalizers";
 import { track } from "dxUtils/analytics";
 import svgs from "./svgs";
 import ImageAndLabel from "dx/imageAndLabel";
-import {
-    dispatchDarkModeToggleEvent,
-    isDarkModeEnabled
-} from "dx/darkModeManager";
+import { dispatchDarkModeToggleEvent } from "dx/darkModeManager";
 
 export default class FeaturedContentHeader extends LightningElement {
     @api label?: string | null = null;
@@ -95,7 +92,7 @@ export default class FeaturedContentHeader extends LightningElement {
     }
 
     private get isDarkModeEnabled() {
-        return this.enableDarkModeToggle && isDarkModeEnabled();
+        return this.enableDarkModeToggle;
     }
 
     private get hasPlainImage() {

package/LICENSE

@@ -1,12 +0,0 @@
-Copyright (c) 2020, Salesforce.com, Inc.
-All rights reserved.
-
-Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
-
-* Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
-
-* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
-
-* Neither the name of Salesforce.com nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
-
-THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.