Merge pull request #5949 from logto-io/gao-show-dev-features-status

feat(console): support localStorage override and show dev feature status

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));

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>);

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;
-  }
 }

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);
+}

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>
   );
 }