From 0866b6ea40dafd834f280949c17033ea9c1d578f Mon Sep 17 00:00:00 2001
From: Gao Sun <gao@silverhand.io>
Date: Thu, 30 May 2024 22:04:36 +0800
Subject: [PATCH] feat(console): show dev feature status

---
 packages/console/src/consts/env.ts                       | 7 ++++++-
 packages/console/src/consts/storage.ts                   | 5 ++++-
 .../containers/ConsoleContent/Sidebar/index.module.scss  | 9 ---------
 .../src/containers/ConsoleContent/index.module.scss      | 7 +++++++
 packages/console/src/containers/ConsoleContent/index.tsx | 7 +++++++
 5 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/packages/console/src/consts/env.ts b/packages/console/src/consts/env.ts
index 888eb2d73..11da2ead1 100644
--- a/packages/console/src/consts/env.ts
+++ b/packages/console/src/consts/env.ts
@@ -1,8 +1,13 @@
 import { yes } from '@silverhand/essentials';
 
+import { storageKeys } from './storage';
+
 const isProduction = process.env.NODE_ENV === 'production';
 export const isCloud = yes(process.env.IS_CLOUD);
 export const adminEndpoint = process.env.ADMIN_ENDPOINT;
 
 export const isDevFeaturesEnabled =
-  !isProduction || yes(process.env.DEV_FEATURES_ENABLED) || yes(process.env.INTEGRATION_TEST);
+  !isProduction ||
+  yes(process.env.DEV_FEATURES_ENABLED) ||
+  yes(process.env.INTEGRATION_TEST) ||
+  yes(localStorage.getItem(storageKeys.isDevFeaturesEnabled));
diff --git a/packages/console/src/consts/storage.ts b/packages/console/src/consts/storage.ts
index 859f41f01..7bdc95509 100644
--- a/packages/console/src/consts/storage.ts
+++ b/packages/console/src/consts/storage.ts
@@ -7,7 +7,8 @@ export type StorageType =
   | 'linking_social_connector'
   | 'checkout_session'
   | 'redirect_after_sign_in'
-  | 'webhook_test_result';
+  | 'webhook_test_result'
+  | 'is_dev_features_enabled';
 
 export const getStorageKey = <T extends StorageType>(forType: T) =>
   `logto:admin_console:${forType}` as const;
@@ -19,4 +20,6 @@ export const storageKeys = Object.freeze({
   /** The react-router redirect location after sign in. The value should be a stringified Location object. */
   redirectAfterSignIn: getStorageKey('redirect_after_sign_in'),
   webhookTestResult: getStorageKey('webhook_test_result'),
+  /** Whether the under-development features are enabled. */
+  isDevFeaturesEnabled: getStorageKey('is_dev_features_enabled'),
 } satisfies Record<CamelCase<StorageType>, string>);
diff --git a/packages/console/src/containers/ConsoleContent/Sidebar/index.module.scss b/packages/console/src/containers/ConsoleContent/Sidebar/index.module.scss
index b95b364dc..2fc004c1d 100644
--- a/packages/console/src/containers/ConsoleContent/Sidebar/index.module.scss
+++ b/packages/console/src/containers/ConsoleContent/Sidebar/index.module.scss
@@ -1,16 +1,7 @@
 @use '@/scss/underscore' as _;
 
 .sidebar {
-  display: flex;
-  flex-direction: column;
-  flex-grow: 0;
-  flex-shrink: 0;
   width: 248px;
   overflow-y: auto;
   margin-bottom: _.unit(6);
-
-  .spacer {
-    margin: 0;
-    flex: 1 1 0;
-  }
 }
diff --git a/packages/console/src/containers/ConsoleContent/index.module.scss b/packages/console/src/containers/ConsoleContent/index.module.scss
index 59d832d3d..4f2b34bea 100644
--- a/packages/console/src/containers/ConsoleContent/index.module.scss
+++ b/packages/console/src/containers/ConsoleContent/index.module.scss
@@ -24,3 +24,10 @@
     @include _.main-content-width;
   }
 }
+
+.devStatus {
+  color: var(--color-text-secondary);
+  position: absolute;
+  bottom: _.unit(3);
+  left: _.unit(4);
+}
diff --git a/packages/console/src/containers/ConsoleContent/index.tsx b/packages/console/src/containers/ConsoleContent/index.tsx
index 457df0d3b..8deffe847 100644
--- a/packages/console/src/containers/ConsoleContent/index.tsx
+++ b/packages/console/src/containers/ConsoleContent/index.tsx
@@ -1,6 +1,8 @@
 import { useOutletContext, useRoutes } from 'react-router-dom';
 
+import { isDevFeaturesEnabled } from '@/consts/env';
 import OverlayScrollbar from '@/ds-components/OverlayScrollbar';
+import Tag from '@/ds-components/Tag';
 import { useConsoleRoutes } from '@/hooks/use-console-routes';
 import { usePlausiblePageview } from '@/hooks/use-plausible-pageview';
 
@@ -27,6 +29,11 @@ function ConsoleContent() {
           {routes}
         </div>
       </OverlayScrollbar>
+      {isDevFeaturesEnabled && (
+        <Tag type="state" status="success" variant="plain" className={styles.devStatus}>
+          Dev features enabled
+        </Tag>
+      )}
     </div>
   );
 }