Better scenario variable editing

Some users have gotten confused by the scenario variable editing interface. This change makes the interface easier to understand.

app/src/utils/hooks.ts

@@ -157,3 +157,12 @@ export const useSelectedProject = () => {
     { enabled: !!selectedProjectId },
   );
 };
+
+export const useScenarioVars = () => {
+  const experiment = useExperiment();
+
+  return api.scenarioVars.list.useQuery(
+    { experimentId: experiment.data?.id ?? "" },
+    { enabled: experiment.data?.id != null },
+  );
+};

app/src/utils/standardResponses.ts

@@ -0,0 +1,31 @@
+import { toast } from "~/theme/ChakraThemeProvider";
+
+export function error(message: string): { status: "error"; message: string } {
+  return {
+    status: "error",
+    message,
+  };
+}
+export function success<T>(payload: T): { status: "success"; payload: T };
+export function success(payload?: undefined): { status: "success"; payload: undefined };
+export function success<T>(payload?: T) {
+  return { status: "success", payload };
+}
+
+type SuccessType<T> = ReturnType<typeof success<T>>;
+type ErrorType = ReturnType<typeof error>;
+
+// Used client-side to report generic errors
+export function maybeReportError<T>(response: SuccessType<T> | ErrorType): response is ErrorType {
+  if (response.status === "error") {
+    toast({
+      description: response.message,
+      status: "error",
+      duration: 5000,
+      isClosable: true,
+    });
+    return true;
+  }
+
+  return false;
+}