refactor: Use existing FlagName for flag name type

Author: ptbrowne

app/flags/flag.tsx

@@ -28,7 +28,7 @@ export const listFlags = () => {
 
 /** Resets all the flags */
 export const resetFlags = () => {
-  listFlags().forEach((name) => store.remove(name));
+  listFlags().forEach((name) => store.remove(name as FlagName));
 };
 
 /**
@@ -63,7 +63,10 @@ const initFromSearchParams = (locationSearch: string) => {
   for (const [param, value] of Object.entries(params)) {
     if (param.startsWith(FLAG_PREFIX) && typeof value === "string") {
       try {
-        flag(param.substring(FLAG_PREFIX.length), JSON.parse(value));
+        flag(
+          param.substring(FLAG_PREFIX.length) as FlagName,
+          JSON.parse(value)
+        );
       } catch (e) {
         console.error(e);
       }

app/flags/store.ts

@@ -3,7 +3,18 @@ import mitt, { Emitter } from "mitt";
 import lsAdapter from "./ls-adapter";
 
 export type FlagValue = any;
-export type FlagName = string;
+
+export type FlagName =
+  /** Whether we can search by termsets */
+  | "search.termsets"
+  /** Whether we can add dataset from shared dimensions */
+  | "configurator.add-dataset.shared"
+  /** Whether we can add a new dataset */
+  | "configurator.add-dataset.new"
+  /** Whether we can use the free canvas dashboard layout */
+  | "layoutor.dashboard.free-canvas"
+  /** Whether we can use shared filters on dashboard layout */
+  | "layoutor.dashboard.shared-filters";
 
 type Events = { change: string };
 /**
@@ -51,15 +62,15 @@ class FlagStore {
     return this.store[name];
   }
 
-  set(name: string, value: FlagValue) {
+  set(name: FlagName, value: FlagValue) {
     if (this.longtermStore) {
       this.longtermStore.setItem(name, value);
     }
     this.store[name] = value;
     this.ee.emit("change", name);
   }
 
-  remove(name: string) {
+  remove(name: FlagName) {
     delete this.store[name];
     if (this.longtermStore) {
       this.longtermStore.removeItem(name);

app/flags/useFlag.ts

@@ -1,20 +1,10 @@
 import { useEffect, useState } from "react";
 
-import { flag } from "./flag";
+import { FlagName } from "@/flags/store";
 
-type Flag =
-  /** Whether we can search by termsets */
-  | "search.termsets"
-  /** Whether we can add dataset from shared dimensions */
-  | "configurator.add-dataset.shared"
-  /** Whether we can add a new dataset */
-  | "configurator.add-dataset.new"
-  /** Whether we can use the free canvas dashboard layout */
-  | "layoutor.dashboard.free-canvas"
-  /** Whether we can use shared filters on dashboard layout */
-  | "layoutor.dashboard.shared-filters";
+import { flag } from "./flag";
 
-export default function useFlag(name: Flag) {
+export default function useFlag(name: FlagName) {
   const [flagValue, setFlag] = useState(() => flag(name));
   useEffect(() => {
     const handleChange = (changed: string) => {