refactor: Better typings for flags

Author: ptbrowne

app/flags/ls-adapter.ts

@@ -1,7 +1,10 @@
 import { FlagName, FlagValue } from "./types";
 
 export const prefix = "flag__";
-export const getKey = (name: FlagName) => prefix + name;
+
+type FlagNameOrString = FlagName | (string & {});
+
+export const getKey = (name: FlagNameOrString) => prefix + name;
 
 const listFlagLocalStorage = () => {
   return Object.keys(localStorage)
@@ -14,7 +17,7 @@ const listFlagLocalStorage = () => {
  *
  * @param  {String} flag
  */
-const getItem = (flag: FlagName) => {
+const getItem = (flag: FlagNameOrString) => {
   const val = localStorage.getItem(getKey(flag));
   const parsed = val ? JSON.parse(val) : val;
   return parsed;
@@ -26,7 +29,7 @@ const getItem = (flag: FlagName) => {
  * @param  {String} flag
  * @param  {String} value
  */
-const setItem = (flag: FlagName, value: FlagValue) => {
+const setItem = (flag: FlagNameOrString, value: FlagValue) => {
   const str = JSON.stringify(value);
   return localStorage.setItem(getKey(flag), str);
 };
@@ -36,7 +39,7 @@ const setItem = (flag: FlagName, value: FlagValue) => {
  *
  * @param  {String} flag
  */
-const removeItem = (flag: FlagName) => {
+const removeItem = (flag: FlagNameOrString) => {
   return localStorage.removeItem(getKey(flag));
 };
 

app/flags/types.ts

@@ -12,4 +12,6 @@ export type FlagName =
   /** Whether we can use the free canvas dashboard layout */
   | "layouter.dashboard.free-canvas"
   /** Whether we can use shared filters on dashboard layout */
-  | "layouter.dashboard.shared-filters";
+  | "layouter.dashboard.shared-filters"
+  /** Whether server side cache is disabled */
+  | "server-side-cache.disable";

app/flags/useFlag.ts

@@ -30,5 +30,5 @@ export function useFlags() {
       flag.store.removeListener("change", handleChange);
     };
   }, [setFlags]);
-  return flags;
+  return flags as FlagName[];
 }

app/gql-flamegraph/devtool.tsx

@@ -33,6 +33,7 @@ import { pipe, tap } from "wonka";
 
 import useDisclosure from "@/components/use-disclosure";
 import { flag, useFlag, useFlags } from "@/flags";
+import { FlagName } from "@/flags/types";
 import { RequestQueryMeta } from "@/graphql/query-meta";
 import useEvent from "@/utils/use-event";
 
@@ -543,7 +544,7 @@ const FlagSwitch = ({
   flagName,
   onChange,
   ...props
-}: { flagName: string; onChange?: (value: Boolean) => void } & Omit<
+}: { flagName: FlagName; onChange?: (value: Boolean) => void } & Omit<
   SwitchProps,
   "onChange"
 >) => {