Skip to content

feat: Feature Flag Folders for Organization (#271) #350

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
mendarb wants to merge 2 commits into
base: main
Choose a base branch
from
Open

feat: Feature Flag Folders for Organization (#271) #350

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6e7b039
feat: add folder organization for feature flags
mendarb Mar 20, 2026
20eda0d
fix: address review comments - folder property typo and restore path
mendarb Mar 20, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 34 additions & 0 deletions apps/dashboard/app/(main)/websites/[id]/flags/_components/flag-sheet.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import {
ClockIcon,
CodeIcon,
FlagIcon,
FolderIcon,
GitBranchIcon,
SpinnerGapIcon,
UserIcon,
Expand Down Expand Up @@ -247,6 +248,7 @@ export function FlagSheet({
variants: [],
dependencies: [],
environment: undefined,
folder: undefined,
targetGroupIds: [],
},
schedule: undefined,
Expand Down Expand Up @@ -289,6 +291,7 @@ export function FlagSheet({
variants: flag.variants ?? [],
dependencies: flag.dependencies ?? [],
environment: flag.environment || undefined,
folder: flag.folder || undefined,
targetGroupIds: extractTargetGroupIds(),
},
schedule: undefined,
Expand All @@ -310,6 +313,7 @@ export function FlagSheet({
rules: template.rules ?? [],
variants: template.type === "multivariant" ? template.variants : [],
dependencies: [],
folder: undefined,
targetGroupIds: [],
},
schedule: undefined,
Expand All @@ -331,6 +335,7 @@ export function FlagSheet({
rules: [],
variants: [],
dependencies: [],
folder: undefined,
targetGroupIds: [],
},
schedule: undefined,
Expand Down Expand Up @@ -400,6 +405,7 @@ export function FlagSheet({
rolloutPercentage: data.rolloutPercentage ?? 0,
rolloutBy: data.rolloutBy || undefined,
targetGroupIds: data.targetGroupIds || [],
folder: data.folder?.trim() || null,
};
await updateMutation.mutateAsync(updateData);
} else {
Expand All @@ -418,6 +424,7 @@ export function FlagSheet({
rolloutPercentage: data.rolloutPercentage ?? 0,
rolloutBy: data.rolloutBy || undefined,
targetGroupIds: data.targetGroupIds || [],
folder: data.folder?.trim() || undefined,
};
await createMutation.mutateAsync(createData);
}
Expand Down Expand Up @@ -549,6 +556,33 @@ export function FlagSheet({
</FormItem>
)}
/>
<FormField
control={form.control}
name="flag.folder"
render={({ field }) => (
<FormItem>
<FormLabel className="text-muted-foreground">
<FolderIcon
className="mr-1 inline-block"
size={14}
weight="duotone"
/>
Folder (optional)
</FormLabel>
<FormControl>
<Input
placeholder="e.g. auth/login, checkout"
{...field}
value={field.value ?? ""}
onChange={(e) =>
field.onChange(e.target.value || undefined)
}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</div>

{/* Separator */}
Expand Down
146 changes: 133 additions & 13 deletions apps/dashboard/app/(main)/websites/[id]/flags/_components/flags-list.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,19 @@

import {
ArchiveIcon,
CaretDownIcon,
DotsThreeIcon,
FlagIcon,
FlaskIcon,
FolderIcon,
GaugeIcon,
LinkIcon,
PencilSimpleIcon,
ShareNetworkIcon,
TrashIcon,
} from "@phosphor-icons/react";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { useMemo } from "react";
import { useMemo, useState } from "react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
Expand Down Expand Up @@ -326,7 +328,15 @@ function FlagRow({
flagMap={flagMap}
/>
</div>
<FlagKey className="-ms-1.5" flag={flag} />
<div className="flex items-center gap-1.5">
<FlagKey className="-ms-1.5" flag={flag} />
{flag.folder && (
<span className="flex items-center gap-0.5 rounded bg-accent px-1.5 py-0.5 text-muted-foreground text-xs">
<FolderIcon className="size-3" weight="duotone" />
{flag.folder}
</span>
)}
</div>
</div>
</div>

Expand Down Expand Up @@ -404,7 +414,44 @@ function FlagRow({
);
}

function FolderHeader({
folder,
count,
isExpanded,
onToggleAction,
}: {
folder: string;
count: number;
isExpanded: boolean;
onToggleAction: () => void;
}) {
return (
<button
className="flex w-full cursor-pointer items-center gap-2 border-b bg-secondary/50 px-4 py-2 text-left transition-colors hover:bg-secondary"
onClick={onToggleAction}
type="button"
>
<FolderIcon className="size-4 text-muted-foreground" weight="duotone" />
<span className="font-medium text-sm">{folder}</span>
<span className="rounded-full bg-muted px-1.5 py-0.5 text-muted-foreground text-xs tabular-nums">
{count}
</span>
<CaretDownIcon
className={cn(
"ml-auto size-3.5 text-muted-foreground transition-transform",
isExpanded && "rotate-180"
)}
weight="fill"
/>
</button>
);
}

export function FlagsList({ flags, groups, onEdit, onDelete }: FlagsListProps) {
const [collapsedFolders, setCollapsedFolders] = useState<Set<string>>(
new Set()
);

const flagMap = useMemo(() => {
const map = new Map<string, Flag>();
for (const f of flags) {
Expand All @@ -427,19 +474,92 @@ export function FlagsList({ flags, groups, onEdit, onDelete }: FlagsListProps) {
return map;
}, [flags]);

const groupedFlags = useMemo(() => {
const folderMap = new Map<string, Flag[]>();
const uncategorized: Flag[] = [];

for (const flag of flags) {
const folder = flag.folder;
if (folder) {
const existing = folderMap.get(folder) || [];
existing.push(flag);
folderMap.set(folder, existing);
} else {
uncategorized.push(flag);
}
}

const sortedFolders = Array.from(folderMap.entries()).sort(([a], [b]) =>
a.localeCompare(b)
);

return { sortedFolders, uncategorized };
}, [flags]);

const hasFolders = groupedFlags.sortedFolders.length > 0;

const toggleFolder = (folder: string) => {
setCollapsedFolders((prev) => {
const next = new Set(prev);
if (next.has(folder)) {
next.delete(folder);
} else {
next.add(folder);
}
return next;
});
};

const renderFlags = (flagsToRender: Flag[]) =>
flagsToRender.map((flag) => (
<FlagRow
dependents={dependentsMap.get(flag.key) ?? []}
flag={flag}
flagMap={flagMap}
groups={groups.get(flag.id) ?? []}
key={flag.id}
onDelete={onDelete}
onEdit={onEdit}
/>
));

if (!hasFolders) {
return (
<div className="w-full overflow-x-auto">{renderFlags(flags)}</div>
);
}

return (
<div className="w-full overflow-x-auto">
{flags.map((flag) => (
<FlagRow
dependents={dependentsMap.get(flag.key) ?? []}
flag={flag}
flagMap={flagMap}
groups={groups.get(flag.id) ?? []}
key={flag.id}
onDelete={onDelete}
onEdit={onEdit}
/>
))}
{groupedFlags.sortedFolders.map(([folder, folderFlags]) => {
const isExpanded = !collapsedFolders.has(folder);
return (
<div key={folder}>
<FolderHeader
count={folderFlags.length}
folder={folder}
isExpanded={isExpanded}
onToggleAction={() => toggleFolder(folder)}
/>
{isExpanded && renderFlags(folderFlags)}
</div>
);
})}

{groupedFlags.uncategorized.length > 0 && (
<div>
{groupedFlags.sortedFolders.length > 0 && (
<FolderHeader
count={groupedFlags.uncategorized.length}
folder="Uncategorized"
isExpanded={!collapsedFolders.has("__uncategorized")}
onToggleAction={() => toggleFolder("__uncategorized")}
/>
)}
{!collapsedFolders.has("__uncategorized") &&
renderFlags(groupedFlags.uncategorized)}
</div>
)}
</div>
);
}
Expand Down
1 change: 1 addition & 0 deletions apps/dashboard/app/(main)/websites/[id]/flags/_components/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ export interface Flag {
variants?: Variant[];
dependencies?: string[];
environment?: string;
folder?: string | null;
persistAcrossAuth?: boolean;
websiteId?: string | null;
organizationId?: string | null;
Expand Down
5 changes: 5 additions & 0 deletions packages/db/src/drizzle/schema.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -669,11 +669,16 @@ export const flags = pgTable(
dependencies: text("dependencies").array(),
targetGroupIds: text("target_group_ids").array(),
environment: text("environment"),
folder: text("folder"),
createdAt: timestamp("created_at").defaultNow().notNull(),
updatedAt: timestamp("updated_at").defaultNow().notNull(),
deletedAt: timestamp("deleted_at"),
},
(table) => [
index("flags_folder_idx").using(
"btree",
table.folder.asc().nullsLast().op("text_ops")
),
uniqueIndex("flags_key_website_unique")
.on(table.key, table.websiteId)
.where(isNotNull(table.websiteId)),
Expand Down
Loading