+
+
-
-
+ {showBanner && (
+
+
+ No projects.
+ Add one via
+
+ ldcli dev-server add-project --help
+
+
+
+ )}
+ {!showBanner && (
+
+
+
+
+ )}
+ {selectedProject && (
+
+
+
+ )}
-
-
+
);
}
diff --git a/internal/dev_server/ui/src/Flags.tsx b/internal/dev_server/ui/src/Flags.tsx
new file mode 100644
index 00000000..ac6a2711
--- /dev/null
+++ b/internal/dev_server/ui/src/Flags.tsx
@@ -0,0 +1,347 @@
+import { LDFlagSet, LDFlagValue } from 'launchdarkly-js-client-sdk';
+import {
+ Button,
+ Checkbox,
+ IconButton,
+ Label,
+ Switch,
+ Modal,
+ ModalOverlay,
+ DialogTrigger,
+ Dialog,
+ TextArea,
+} from '@launchpad-ui/components';
+import {
+ Box,
+ CopyToClipboard,
+ InlineEdit,
+ TextField,
+} from '@launchpad-ui/core';
+import Theme from '@launchpad-ui/tokens';
+import { useEffect, useRef, useState } from 'react';
+import { Icon } from '@launchpad-ui/icons';
+import { apiRoute, sortFlags } from './util.ts';
+
+type FlagProps = {
+ selectedProject: string;
+ flags: LDFlagSet | null;
+ setFlags: (flags: LDFlagSet) => void;
+};
+
+function Flags({ selectedProject, flags, setFlags }: FlagProps) {
+ const [overrides, setOverrides] = useState
| null>(null);
+ const [onlyShowOverrides, setOnlyShowOverrides] = useState(false);
+ const overridesPresent = overrides && Object.keys(overrides).length > 0;
+ const textAreaRef = useRef(null);
+
+ const updateOverride = (flagKey: string, overrideValue: LDFlagValue) => {
+ fetch(apiRoute(`/dev/projects/${selectedProject}/overrides/${flagKey}`), {
+ method: 'PUT',
+ body: JSON.stringify(overrideValue),
+ })
+ .then(async (res) => {
+ if (!res.ok) {
+ return; // todo
+ }
+
+ const updatedOverrides = {
+ ...overrides,
+ ...{
+ [flagKey]: {
+ value: overrideValue,
+ },
+ },
+ };
+
+ setOverrides(updatedOverrides);
+ })
+ .catch((_e) => {
+ // todo
+ });
+ };
+
+ const removeOverride = (flagKey: string, updateState: boolean = true) => {
+ return fetch(
+ apiRoute(`/dev/projects/${selectedProject}/overrides/${flagKey}`),
+ {
+ method: 'DELETE',
+ },
+ )
+ .then((res) => {
+ // todo: clean this up.
+ //
+ // In the remove-all-override case, we need to fan out and make the
+ // request for every override, so we don't want to be interleaving
+ // local state updates. Expect the consumer to update the local state
+ // when all requests are done
+ if (res.ok && updateState) {
+ const updatedOverrides = { ...overrides };
+ delete updatedOverrides[flagKey];
+
+ setOverrides(updatedOverrides);
+
+ if (Object.keys(updatedOverrides).length === 0)
+ setOnlyShowOverrides(false);
+ }
+ })
+ .catch((_e) => {
+ // todo
+ });
+ };
+
+ const fetchFlags = async () => {
+ const res = await fetch(
+ apiRoute(`/dev/projects/${selectedProject}?expand=overrides`),
+ );
+ const json = await res.json();
+ if (!res.ok) {
+ throw new Error(`Got ${res.status}, ${res.statusText} from flag fetch`);
+ }
+
+ const { flagsState: flags, overrides } = json;
+
+ setFlags(sortFlags(flags));
+ setOverrides(overrides);
+ };
+
+ // Fetch flags / overrides on mount
+ useEffect(() => {
+ fetchFlags().catch(
+ console.error.bind(console, 'error when fetching flags'),
+ );
+ }, [selectedProject]);
+
+ if (!flags) {
+ return null;
+ }
+
+ return (
+ <>
+
+
+
+
+
+
+ {Object.entries(flags).map(
+ ([flagKey, { value: flagValue }], index) => {
+ const overrideValue = overrides?.[flagKey]?.value;
+ const hasOverride = overrideValue !== undefined;
+ let valueNode;
+
+ if (onlyShowOverrides && !hasOverride) {
+ return null;
+ }
+
+ switch (typeof flagValue) {
+ case 'boolean':
+ valueNode = (
+ {
+ updateOverride(flagKey, newValue);
+ }}
+ />
+ );
+ break;
+ case 'number':
+ valueNode = (
+ {
+ updateOverride(flagKey, Number(e.target.value));
+ }}
+ />
+ );
+ break;
+ case 'string':
+ valueNode = (
+ {
+ updateOverride(flagKey, newValue);
+ }}
+ renderInput={
+
+ }
+ >
+ {hasOverride ? overrideValue : flagValue}
+
+ );
+ break;
+ default:
+ valueNode = (
+
+
+
+
+
+
+
+
+ );
+ }
+
+ return (
+ -
+
+
+
+ {flagKey}
+
+
+
+ {valueNode}
+
+ {hasOverride && (
+ {
+ removeOverride(flagKey);
+ }}
+ variant="destructive"
+ />
+ )}
+
+
+ );
+ },
+ )}
+
+
+
+
Projects are loading
+