feat: add feature flags to devtools

Author: twlite

apps/test-bot/src/feature-flags/red-embed-color.ts

@@ -3,6 +3,9 @@ import { flag } from 'commandkit';
 export const redEmbedColor = flag({
   key: 'red-embed-color',
   description: 'Red embed color',
+  identify() {
+    return { user: '123' };
+  },
   decide() {
     return Math.random() < 0.5;
   },

packages/commandkit/src/flags/feature-flags.ts

@@ -74,7 +74,7 @@ export interface FlagRunner<E, R> {
 }
 
 export class FeatureFlag<R, T> {
-  public constructor(private options: FeatureFlagDefinition<R, T>) {
+  public constructor(public readonly options: FeatureFlagDefinition<R, T>) {
     const FlagStore = getCommandKit(true).flags;
 
     if (FlagStore.has(options.key)) {

packages/devtools-ui/src/api/client.ts

@@ -3,6 +3,7 @@ import { ClientUser } from './structures/client-user';
 import { EventManager } from './structures/events';
 import { GuildManager } from './structures/guilds';
 import { PluginManager } from './structures/plugins';
+import { FeatureFlag } from './types';
 
 export class Client<Ready extends boolean = boolean> {
   public api = axiosClient;
@@ -35,6 +36,13 @@ export class Client<Ready extends boolean = boolean> {
     return this._user;
   }
 
+  public async getFeatureFlags() {
+    const { data } = await this.api.get<{ flags: FeatureFlag[] }>(
+      '/feature-flags',
+    );
+    return data;
+  }
+
   public async login(username: string, password: string) {
     const { data } = await this.api.post('/auth/login', {
       username,

packages/devtools-ui/src/api/types.ts

@@ -61,3 +61,9 @@ export interface GuildResponse {
     bannerURL: string | null;
   }>;
 }
+
+export interface FeatureFlag {
+  key: string;
+  description: string | null;
+  hasIdentify: boolean;
+}

packages/devtools-ui/src/components/app-sidebar.tsx

@@ -1,5 +1,11 @@
 import * as React from 'react';
-import { BellIcon, PlugIcon, SquareTerminal, WrenchIcon } from 'lucide-react';
+import {
+  BellIcon,
+  PlugIcon,
+  SquareTerminal,
+  WrenchIcon,
+  ScanEye,
+} from 'lucide-react';
 import { VscGithub } from 'react-icons/vsc';
 import { FaDiscord } from 'react-icons/fa';
 
@@ -50,6 +56,12 @@ const data = {
       icon: FaDiscord,
       isActive: false,
     },
+    {
+      title: 'Feature Flags',
+      url: '/feature-flags',
+      icon: ScanEye,
+      isActive: false,
+    },
   ],
   navSecondary: [
     {

packages/devtools-ui/src/routeTree.gen.ts

@@ -10,142 +10,174 @@
 
 // Import Routes
 
-import { Route as rootRoute } from './routes/__root';
-import { Route as PluginsImport } from './routes/plugins';
-import { Route as GuildsImport } from './routes/guilds';
-import { Route as EventsImport } from './routes/events';
-import { Route as CommandsImport } from './routes/commands';
-import { Route as IndexImport } from './routes/index';
+import { Route as rootRoute } from './routes/__root'
+import { Route as PluginsImport } from './routes/plugins'
+import { Route as GuildsImport } from './routes/guilds'
+import { Route as FeatureFlagsImport } from './routes/feature-flags'
+import { Route as EventsImport } from './routes/events'
+import { Route as CommandsImport } from './routes/commands'
+import { Route as IndexImport } from './routes/index'
 
 // Create/Update Routes
 
 const PluginsRoute = PluginsImport.update({
   id: '/plugins',
   path: '/plugins',
   getParentRoute: () => rootRoute,
-} as any);
+} as any)
 
 const GuildsRoute = GuildsImport.update({
   id: '/guilds',
   path: '/guilds',
   getParentRoute: () => rootRoute,
-} as any);
+} as any)
+
+const FeatureFlagsRoute = FeatureFlagsImport.update({
+  id: '/feature-flags',
+  path: '/feature-flags',
+  getParentRoute: () => rootRoute,
+} as any)
 
 const EventsRoute = EventsImport.update({
   id: '/events',
   path: '/events',
   getParentRoute: () => rootRoute,
-} as any);
+} as any)
 
 const CommandsRoute = CommandsImport.update({
   id: '/commands',
   path: '/commands',
   getParentRoute: () => rootRoute,
-} as any);
+} as any)
 
 const IndexRoute = IndexImport.update({
   id: '/',
   path: '/',
   getParentRoute: () => rootRoute,
-} as any);
+} as any)
 
 // Populate the FileRoutesByPath interface
 
 declare module '@tanstack/react-router' {
   interface FileRoutesByPath {
     '/': {
-      id: '/';
-      path: '/';
-      fullPath: '/';
-      preLoaderRoute: typeof IndexImport;
-      parentRoute: typeof rootRoute;
-    };
+      id: '/'
+      path: '/'
+      fullPath: '/'
+      preLoaderRoute: typeof IndexImport
+      parentRoute: typeof rootRoute
+    }
     '/commands': {
-      id: '/commands';
-      path: '/commands';
-      fullPath: '/commands';
-      preLoaderRoute: typeof CommandsImport;
-      parentRoute: typeof rootRoute;
-    };
+      id: '/commands'
+      path: '/commands'
+      fullPath: '/commands'
+      preLoaderRoute: typeof CommandsImport
+      parentRoute: typeof rootRoute
+    }
     '/events': {
-      id: '/events';
-      path: '/events';
-      fullPath: '/events';
-      preLoaderRoute: typeof EventsImport;
-      parentRoute: typeof rootRoute;
-    };
+      id: '/events'
+      path: '/events'
+      fullPath: '/events'
+      preLoaderRoute: typeof EventsImport
+      parentRoute: typeof rootRoute
+    }
+    '/feature-flags': {
+      id: '/feature-flags'
+      path: '/feature-flags'
+      fullPath: '/feature-flags'
+      preLoaderRoute: typeof FeatureFlagsImport
+      parentRoute: typeof rootRoute
+    }
     '/guilds': {
-      id: '/guilds';
-      path: '/guilds';
-      fullPath: '/guilds';
-      preLoaderRoute: typeof GuildsImport;
-      parentRoute: typeof rootRoute;
-    };
+      id: '/guilds'
+      path: '/guilds'
+      fullPath: '/guilds'
+      preLoaderRoute: typeof GuildsImport
+      parentRoute: typeof rootRoute
+    }
     '/plugins': {
-      id: '/plugins';
-      path: '/plugins';
-      fullPath: '/plugins';
-      preLoaderRoute: typeof PluginsImport;
-      parentRoute: typeof rootRoute;
-    };
+      id: '/plugins'
+      path: '/plugins'
+      fullPath: '/plugins'
+      preLoaderRoute: typeof PluginsImport
+      parentRoute: typeof rootRoute
+    }
   }
 }
 
 // Create and export the route tree
 
 export interface FileRoutesByFullPath {
-  '/': typeof IndexRoute;
-  '/commands': typeof CommandsRoute;
-  '/events': typeof EventsRoute;
-  '/guilds': typeof GuildsRoute;
-  '/plugins': typeof PluginsRoute;
+  '/': typeof IndexRoute
+  '/commands': typeof CommandsRoute
+  '/events': typeof EventsRoute
+  '/feature-flags': typeof FeatureFlagsRoute
+  '/guilds': typeof GuildsRoute
+  '/plugins': typeof PluginsRoute
 }
 
 export interface FileRoutesByTo {
-  '/': typeof IndexRoute;
-  '/commands': typeof CommandsRoute;
-  '/events': typeof EventsRoute;
-  '/guilds': typeof GuildsRoute;
-  '/plugins': typeof PluginsRoute;
+  '/': typeof IndexRoute
+  '/commands': typeof CommandsRoute
+  '/events': typeof EventsRoute
+  '/feature-flags': typeof FeatureFlagsRoute
+  '/guilds': typeof GuildsRoute
+  '/plugins': typeof PluginsRoute
 }
 
 export interface FileRoutesById {
-  __root__: typeof rootRoute;
-  '/': typeof IndexRoute;
-  '/commands': typeof CommandsRoute;
-  '/events': typeof EventsRoute;
-  '/guilds': typeof GuildsRoute;
-  '/plugins': typeof PluginsRoute;
+  __root__: typeof rootRoute
+  '/': typeof IndexRoute
+  '/commands': typeof CommandsRoute
+  '/events': typeof EventsRoute
+  '/feature-flags': typeof FeatureFlagsRoute
+  '/guilds': typeof GuildsRoute
+  '/plugins': typeof PluginsRoute
 }
 
 export interface FileRouteTypes {
-  fileRoutesByFullPath: FileRoutesByFullPath;
-  fullPaths: '/' | '/commands' | '/events' | '/guilds' | '/plugins';
-  fileRoutesByTo: FileRoutesByTo;
-  to: '/' | '/commands' | '/events' | '/guilds' | '/plugins';
-  id: '__root__' | '/' | '/commands' | '/events' | '/guilds' | '/plugins';
-  fileRoutesById: FileRoutesById;
+  fileRoutesByFullPath: FileRoutesByFullPath
+  fullPaths:
+    | '/'
+    | '/commands'
+    | '/events'
+    | '/feature-flags'
+    | '/guilds'
+    | '/plugins'
+  fileRoutesByTo: FileRoutesByTo
+  to: '/' | '/commands' | '/events' | '/feature-flags' | '/guilds' | '/plugins'
+  id:
+    | '__root__'
+    | '/'
+    | '/commands'
+    | '/events'
+    | '/feature-flags'
+    | '/guilds'
+    | '/plugins'
+  fileRoutesById: FileRoutesById
 }
 
 export interface RootRouteChildren {
-  IndexRoute: typeof IndexRoute;
-  CommandsRoute: typeof CommandsRoute;
-  EventsRoute: typeof EventsRoute;
-  GuildsRoute: typeof GuildsRoute;
-  PluginsRoute: typeof PluginsRoute;
+  IndexRoute: typeof IndexRoute
+  CommandsRoute: typeof CommandsRoute
+  EventsRoute: typeof EventsRoute
+  FeatureFlagsRoute: typeof FeatureFlagsRoute
+  GuildsRoute: typeof GuildsRoute
+  PluginsRoute: typeof PluginsRoute
 }
 
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
   CommandsRoute: CommandsRoute,
   EventsRoute: EventsRoute,
+  FeatureFlagsRoute: FeatureFlagsRoute,
   GuildsRoute: GuildsRoute,
   PluginsRoute: PluginsRoute,
-};
+}
 
 export const routeTree = rootRoute
   ._addFileChildren(rootRouteChildren)
-  ._addFileTypes<FileRouteTypes>();
+  ._addFileTypes<FileRouteTypes>()
 
 /* ROUTE_MANIFEST_START
 {
@@ -156,6 +188,7 @@ export const routeTree = rootRoute
         "/",
         "/commands",
         "/events",
+        "/feature-flags",
         "/guilds",
         "/plugins"
       ]
@@ -169,6 +202,9 @@ export const routeTree = rootRoute
     "/events": {
       "filePath": "events.tsx"
     },
+    "/feature-flags": {
+      "filePath": "feature-flags.tsx"
+    },
     "/guilds": {
       "filePath": "guilds.tsx"
     },

packages/devtools-ui/src/routes/commands.tsx

@@ -220,7 +220,7 @@ function CommandHierarchy() {
   }
 
   return (
-    <div className="container mx-auto p-4">
+    <div className="container mx-auto py-4">
       <h1 className="text-2xl font-bold mb-6">Commands</h1>
 
       <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">