feat: Screen Config Postgres Client APIs and Admin Logic

.envrc.template

@@ -14,6 +14,11 @@ export API_V3_URL="https://api-v3.mbta.com"
 
 export SECRET_KEY_BASE="local_secret_key_base_at_least_64_bytes_________________________________"
 
+export SCREENS_API_CLIENT_KEY="local_screens_api_client_key"
+
 ## Postgres configuration: username and password for local server
 # export DATABASE_USER=
 # export DATABASE_PASSWORD=
+
+## Feature flag. Setting to true uses the Postgres DB for screen configurations
+export CONFIG_MIGRATION="false"

assets/src/components/admin/admin_form.tsx

@@ -44,36 +44,49 @@ const AdminValidateControls = ({
 };
 
 const AdminConfirmControls = ({
-  confirmPath,
+  onConfirm,
   configRef,
   onCancel,
   onError,
   onSuccess,
 }): JSX.Element => {
-  const confirmFn = () => {
-    const config = configRef.current.value;
-    const dataToSubmit = { config };
-    fetch.post(confirmPath, dataToSubmit).then((resultJson) => {
-      if (resultJson.success === true) {
+  const [isLoading, setIsLoading] = useState(false);
+
+  const confirmFn = async () => {
+    setIsLoading(true);
+    try {
+      const config = configRef.current.value;
+      const parsedConfig = JSON.parse(config);
+      const result = await onConfirm(parsedConfig);
+
+      if (result.success === true) {
         onSuccess();
       } else {
         onError();
       }
-    });
+    } catch (_error) {
+      onError();
+    } finally {
+      setIsLoading(false);
+    }
   };
 
   return (
     <div>
-      <button onClick={onCancel}>Back</button>
-      <button onClick={confirmFn}>Confirm</button>
+      <button onClick={onCancel} disabled={isLoading}>
+        Back
+      </button>
+      <button onClick={confirmFn} disabled={isLoading}>
+        Confirm
+      </button>
     </div>
   );
 };
 
 const AdminForm = ({
   fetchConfig,
   validatePath,
-  confirmPath,
+  onConfirm,
   onUpdated,
 }): JSX.Element => {
   const [editable, setEditable] = useState(true);
@@ -111,7 +124,7 @@ const AdminForm = ({
         />
       ) : (
         <AdminConfirmControls
-          confirmPath={confirmPath}
+          onConfirm={onConfirm}
           configRef={configRef}
           onCancel={() => setEditable(true)}
           onError={() => {

assets/src/components/admin/editor.tsx

@@ -6,6 +6,7 @@ import {
   type AppId,
   type Config,
   SCREEN_APP_ENTRIES,
+  commitScreenConfigChanges,
   fetch,
   useModalDialog,
   useResetKey,
@@ -45,6 +46,7 @@ const Editor = () => {
   const [remoteConfig, setRemoteConfig] = useState<Config>(EMPTY_CONFIG);
   const [appIdFilter, setAppIdFilter] = useState<AppId | null>(null);
   const [selectedIDs, setSelectedIDs] = useState<Set<string>>(new Set());
+  const [configMigrationEnabled, setConfigMigrationEnabled] = useState(false);
 
   const { dialog: navBlockDialog, ref: navBlockDialogRef } = useModalDialog();
 
@@ -116,6 +118,7 @@ const Editor = () => {
       const config: Config = JSON.parse(response.config);
       setLocalConfig(config);
       setRemoteConfig(config);
+      setConfigMigrationEnabled(response.config_migration || false);
       setSelectedIDs(new Set());
       resetTableDataKey();
       setIsCommitReady(false);
@@ -135,9 +138,14 @@ const Editor = () => {
 
   const commitConfig = () => {
     withInFlight(setIsLoading, async () => {
-      const { success } = await fetch.post("/api/admin/screens/confirm", {
-        config: JSON.stringify(localConfig),
-      });
+      const changedIds = Array.from(changedIDs);
+      const deletedIds = Array.from(deletedIDs);
+      const success = await commitScreenConfigChanges(
+        configMigrationEnabled,
+        changedIds,
+        deletedIds,
+        localConfig,
+      );
 
       if (success) {
         setRemoteConfig(localConfig);

assets/src/components/admin/inspector.tsx

@@ -15,6 +15,7 @@ import { type AudioConfig } from "Components/screen_container";
 import {
   fetch,
   withInFlight,
+  commitScreenConfigChanges,
   SCREEN_APPS,
   type Config,
   type Screen,
@@ -49,6 +50,7 @@ const buildIframeUrl = (screen: ScreenWithId | null, isSimulation: boolean) => {
 
 const Inspector: ComponentType = () => {
   const [config, setConfig] = useState<Config | null>(null);
+  const [configMigrationEnabled, setConfigMigrationEnabled] = useState(false);
   const [frameLoadedAt, setFrameLoadedAt] = useState(0);
   const [isLoading, setIsLoading] = useState(false);
 
@@ -57,6 +59,7 @@ const Inspector: ComponentType = () => {
       const response = await fetch.get("/api/admin");
       const config: Config = JSON.parse(response.config);
       setConfig(config);
+      setConfigMigrationEnabled(response.config_migration || false);
     });
   };
 
@@ -120,6 +123,8 @@ const Inspector: ComponentType = () => {
             {screen && (
               <>
                 <ConfigControls
+                  config={config}
+                  configMigrationEnabled={configMigrationEnabled}
                   screen={screen}
                   isLoading={isLoading}
                   onUpdated={(config) => onScreenUpdated(screen.id, config)}
@@ -231,10 +236,12 @@ const ScreenSelector: ComponentType<{
 };
 
 const ConfigControls: ComponentType<{
+  config: Config | null;
+  configMigrationEnabled: boolean;
   screen: ScreenWithId;
   isLoading: boolean;
   onUpdated: (newConfig: Screen) => void;
-}> = ({ screen, isLoading, onUpdated }) => {
+}> = ({ config, configMigrationEnabled, screen, isLoading, onUpdated }) => {
   const [editableConfig, setEditableConfig] = useState<Screen | null>(null);
   const [isRequestingReload, setIsRequestingReload] = useState(false);
   const dialogRef = useRef<HTMLDialogElement>(null);
@@ -246,6 +253,24 @@ const ConfigControls: ComponentType<{
 
   const isDisabled = isLoading || isRequestingReload;
 
+  const handleConfirmEdit = async (editedConfig: Screen) => {
+    if (!config) return { success: false };
+
+    const updatedConfig: Config = {
+      ...config,
+      screens: { ...config.screens, [screen.id]: editedConfig },
+    };
+
+    const success = await commitScreenConfigChanges(
+      configMigrationEnabled,
+      [screen.id],
+      [],
+      updatedConfig,
+    );
+
+    return { success };
+  };
+
   return (
     <fieldset>
       <legend>Configuration</legend>
@@ -291,7 +316,7 @@ const ConfigControls: ComponentType<{
           <AdminForm
             fetchConfig={async () => editableConfig}
             validatePath={`/api/admin/screens/validate/${screen.id}`}
-            confirmPath={`/api/admin/screens/confirm/${screen.id}`}
+            onConfirm={handleConfirmEdit}
             onUpdated={(newConfig) => {
               alert("Success. Allow 5 seconds for changes to propagate.");
               closeDialog();

assets/src/util/admin.tsx

@@ -231,3 +231,30 @@ const doFetch = async (
     throw error;
   }
 };
+
+export const commitScreenConfigChanges = async (
+  configMigrationEnabled: boolean,
+  changedScreenIds: string[],
+  deletedScreenIds: string[],
+  localConfig: Config,
+) => {
+  if (configMigrationEnabled) {
+    const changedConfigs = changedScreenIds.map((id) => ({
+      id,
+      config: localConfig.screens[id],
+    }));
+
+    const { success } = await fetch.post("/api/admin/screen_configs", {
+      screen_configs: changedConfigs,
+      deleted_screen_ids: deletedScreenIds,
+    });
+
+    return success;
+  } else {
+    const { success } = await fetch.post("/api/admin/screens/confirm", {
+      config: JSON.stringify(localConfig),
+    });
+
+    return success;
+  }
+};

config/runtime.exs

@@ -4,6 +4,8 @@
 # remember to add this file to your .gitignore.
 import Config
 
+config :screens, :config_migration, System.get_env("CONFIG_MIGRATION", "false") == "true"
+
 config :screens, Screens.Repo,
   username: System.fetch_env!("DATABASE_USER"),
   password: System.get_env("DATABASE_PASSWORD"),

lib/screens/config/screen_config.ex

@@ -5,6 +5,8 @@ defmodule Screens.Config.ScreenConfig do
 
   import Ecto.Changeset
 
+  @derive {Jason.Encoder, except: [:__meta__]}
+
   @type t() :: %__MODULE__{
           id: String.t(),
           config: Config.t()