systeminit · jobelenus · May 19, 2025 · May 18, 2025
diff --git a/app/web/src/newhotness/AddComponentModal.vue b/app/web/src/newhotness/AddComponentModal.vue
@@ -246,19 +246,22 @@ keyEmitter.on("Enter", async () => {
   else
     params = {
       schemaType,
-      schemaVariantId: selectedAsset.value.variant.schemaId,
+      schemaId: selectedAsset.value.variant.schemaId,
     };
 
   // TODO "force changeset"
   const payload = createComponentPayload(params);
   const call = api.endpoint<{ componentId: string }>(routes.CreateComponent, {
     viewId: viewId.value,
   });
-  const resp = await call.post<CreateComponentPayload>(payload);
-  if (api.ok(resp)) {
+  const { req, newChangeSetId } = await call.post<CreateComponentPayload>(
+    payload,
+  );
+  if (api.ok(req)) {
     const params = {
-      ...route.params,
-      componentId: resp.data.componentId,
+      workspacePk: route.params.workspacePk,
+      changeSetId: newChangeSetId || route.params.changeSetId,
+      componentId: req.data.componentId,
     };
     router.push({
       name: "new-hotness-component",

diff --git a/app/web/src/newhotness/AttributePanel.vue b/app/web/src/newhotness/AttributePanel.vue
@@ -24,6 +24,7 @@
 <script lang="ts" setup>
 import { computed, reactive, ref, watch } from "vue";
 import { Fzf } from "fzf";
+import { useRoute, useRouter } from "vue-router";
 import {
   AttributeTree,
   BifrostComponent,
@@ -205,6 +206,8 @@ const save = async (path: string, _id: string, value: string) => {
   await call.put<UpdateComponentAttributesArgs>(payload);
 };
 
+const router = useRouter();
+const route = useRoute();
 const remove = async (path: string, _id: string) => {
   const call = api.endpoint<{ success: boolean }>(
     routes.UpdateComponentAttributes,
@@ -213,7 +216,19 @@ const remove = async (path: string, _id: string) => {
   const payload: UpdateComponentAttributesArgs = {};
   path = path.replace("root", ""); // endpoint doesn't want it
   payload[path] = { $source: null };
-  await call.put<UpdateComponentAttributesArgs>(payload);
+  const { req, newChangeSetId } = await call.put<UpdateComponentAttributesArgs>(
+    payload,
+  );
+  if (newChangeSetId && api.ok(req)) {
+    router.push({
+      name: "new-hotness-component",
+      params: {
+        workspacePk: route.params.workspacePk,
+        changeSetId: newChangeSetId,
+        componentId: props.component.id,
+      },
+    });
+  }
 };
 
 // attributeValue is not "value" for maps.. look at children! i suspect the same for arrays, etc

diff --git a/app/web/src/newhotness/Component.vue b/app/web/src/newhotness/Component.vue
@@ -190,7 +190,7 @@ import {
   IconButton,
 } from "@si/vue-lib/design-system";
 import { computed, ref, nextTick } from "vue";
-import { useRouter } from "vue-router";
+import { useRoute, useRouter } from "vue-router";
 import { bifrost, useMakeArgs, useMakeKey } from "@/store/realtime/heimdall";
 import {
   BifrostComponent,
@@ -291,14 +291,28 @@ const nameFormData = computed<NameFormData>(() => {
 
 const wForm = useWatchedForm<NameFormData>();
 
+const route = useRoute();
+
 const nameForm = wForm.newForm(nameFormData, async ({ value }) => {
   const name = value.name;
   // i wish the validator narrowed this type to always be a string
   if (name) {
     const id = component.value?.id;
     if (!id) throw new Error("Missing id");
     const call = api.endpoint(routes.UpdateComponentName, { id });
-    await call.put<UpdateComponentNameArgs>({ name });
+    const { req, newChangeSetId } = await call.put<UpdateComponentNameArgs>({
+      name,
+    });
+    if (newChangeSetId && api.ok(req)) {
+      router.push({
+        name: "new-hotness-component",
+        params: {
+          workspacePk: route.params.workspacePk,
+          changeSetId: newChangeSetId,
+          componentId: props.componentId,
+        },
+      });
+    }
   }
 });
 

diff --git a/app/web/src/newhotness/Workspace.vue b/app/web/src/newhotness/Workspace.vue
@@ -90,6 +90,7 @@ import { useFeatureFlagsStore } from "@/store/feature_flags.store";
 import * as heimdall from "@/store/realtime/heimdall";
 import { useAuthStore } from "@/store/auth.store";
 import { useChangeSetsStore } from "@/store/change_sets.store";
+import { useRealtimeStore } from "@/store/realtime/realtime.store";
 import Explore from "./Explore.vue";
 import ComponentDetail from "./Component.vue";
 import FuncRunDetails from "./FuncRunDetails.vue";
@@ -110,6 +111,7 @@ const props = defineProps<{
 const authStore = useAuthStore();
 const featureFlagsStore = useFeatureFlagsStore();
 const changeSetsStore = useChangeSetsStore();
+const realtimeStore = useRealtimeStore();
 
 const workspacePk = computed(() => props.workspacePk);
 const changeSetId = computed(() => props.changeSetId);
@@ -120,6 +122,7 @@ const context = computed<Context>(() => {
     changeSetId,
     user: authStore.user,
     onHead: computed(() => changeSetsStore.headSelected),
+    headChangeSetId: computed(() => changeSetsStore.headChangeSetId ?? ""),
   };
 });
 
@@ -192,6 +195,22 @@ watch(
     heimdall.niflheim(props.workspacePk, props.changeSetId, true);
   },
 );
+realtimeStore.subscribe(
+  "TOP_LEVEL_WORKSPACE",
+  `workspace/${props.workspacePk}`,
+  [
+    {
+      eventType: "ChangeSetCreated",
+      callback: async (data) => {
+        await heimdall.linkNewChangeset(
+          props.workspacePk,
+          data.changeSetId,
+          data.workspaceSnapshotAddress,
+        );
+      },
+    },
+  ],
+);
 
 const connectionShouldBeEnabled = computed(() => {
   try {

diff --git a/app/web/src/newhotness/api_composables/index.ts b/app/web/src/newhotness/api_composables/index.ts
@@ -1,4 +1,4 @@
-import { unref, inject } from "vue";
+import { unref, inject, ref, Ref } from "vue";
 import { AxiosResponse } from "axios";
 import { sdfApiInstance as sdf } from "@/store/apis.web";
 import { ChangeSetId } from "@/api/sdf/dal/change_set";
@@ -204,6 +204,12 @@ export enum routes {
   CreateComponent = "CreateComponent",
 }
 
+/**
+ * Once we implement the action API calls in here
+ * Those routes would also exist in here
+ */
+const CAN_MUTATE_ON_HEAD: readonly routes[] = [] as const;
+
 const _routes: Record<routes, string> = {
   GetFuncRunsPaginated: "/funcs/runs/paginated",
   FuncRun: "/funcs/runs/<id>",
@@ -219,51 +225,91 @@ export class APICall<Response> {
   workspaceId: string;
   changeSetId: string;
   path: string;
-  url: string;
   ctx: Context;
+  canMutateHead: boolean;
+  description: string;
+  inFlight: Ref<boolean>;
 
-  constructor(ctx: Context, path: string) {
+  constructor(
+    ctx: Context,
+    path: string,
+    canMutateHead: boolean,
+    description: string,
+    inFlight: Ref<boolean>,
+  ) {
     this.ctx = ctx;
     const workspaceId = unref(ctx.workspacePk);
     const changeSetId = unref(ctx.changeSetId);
-    const API_PREFIX = `v2/workspaces/${workspaceId}/change-sets/${changeSetId}`;
     this.workspaceId = workspaceId;
     this.changeSetId = changeSetId;
     this.path = path;
-    this.url = `${API_PREFIX}${this.path}`;
+    this.canMutateHead = canMutateHead;
+    this.description = description;
+    this.inFlight = inFlight;
+  }
+
+  url(): string {
+    const API_PREFIX = `v2/workspaces/${this.workspaceId}/change-sets/${this.changeSetId}`;
+    return `${API_PREFIX}${this.path}`;
   }
 
   async get(params?: URLSearchParams) {
+    this.inFlight.value = true;
     const req = await sdf<Response>({
       method: "GET",
-      url: this.url,
+      url: this.url(),
       params,
     });
+    this.inFlight.value = false;
     return req;
   }
 
+  async makeChangeSet() {
+    const req = await sdf<{ id: string }>({
+      method: "POST",
+      url: `v2/workspaces/${this.workspaceId}/change-sets/create_change_set`,
+      data: { name: this.description },
+    });
+    if (req.status === 200) {
+      const newChangeSetId = req.data.id;
+      // following API calls will use the new changeSetId
+      this.changeSetId = newChangeSetId;
+      return newChangeSetId;
+    } else throw new Error("Unable to make change set");
+  }
+
   async put<D = Record<string, unknown>>(data: D, params?: URLSearchParams) {
-    if (this.ctx.onHead.value) throw new Error("Can't make changes on head");
+    this.inFlight.value = true;
+    let newChangeSetId;
+    if (!this.canMutateHead && this.ctx.onHead.value) {
+      newChangeSetId = await this.makeChangeSet();
+    }
 
     const req = await sdf<Response>({
       method: "PUT",
-      url: this.url,
+      url: this.url(),
       params,
       data,
     });
-    return req;
+    this.inFlight.value = false;
+    return { req, newChangeSetId };
   }
 
   async post<D = Record<string, unknown>>(data: D, params?: URLSearchParams) {
-    if (this.ctx.onHead.value) throw new Error("Can't make changes on head");
+    this.inFlight.value = true;
+    let newChangeSetId;
+    if (!this.canMutateHead && this.ctx.onHead.value) {
+      newChangeSetId = await this.makeChangeSet();
+    }
 
     const req = await sdf<Response>({
       method: "POST",
-      url: this.url,
+      url: this.url(),
       params,
       data,
     });
-    return req;
+    this.inFlight.value = false;
+    return { req, newChangeSetId };
   }
 
   // very odd, i tried having a private `innerPostPut` to pass `method = "POST" | "PUT"`
@@ -285,14 +331,19 @@ export const useApi = () => {
     }
   };
 
+  const inFlight = ref(false);
   const endpoint = <Response>(key: routes, args?: Record<string, string>) => {
     let path = _routes[key];
     if (args)
       Object.entries(args).forEach(([k, v]) => {
         path = path.replace(`<${k}>`, v);
       });
-    return new APICall<Response>(ctx, path);
+    const canMutateHead = CAN_MUTATE_ON_HEAD.includes(key);
+    const desc = `${key} ${
+      args ? [...Object.entries(args)].flatMap((m) => m).join(": ") : ""
+    } by ${ctx.user?.name} on ${new Date().toLocaleDateString()}`;
+    return new APICall<Response>(ctx, path, canMutateHead, desc, inFlight);
   };
 
-  return { ok, endpoint };
+  return { ok, endpoint, inFlight };
 };
diff --git a/app/web/src/newhotness/layout_components/ComponentAttribute.vue b/app/web/src/newhotness/layout_components/ComponentAttribute.vue
@@ -79,6 +79,7 @@
 <script setup lang="ts">
 import { computed, ref, watch } from "vue";
 import { VButton, IconButton, Icon } from "@si/vue-lib/design-system";
+import { useRoute, useRouter } from "vue-router";
 import { BifrostComponent } from "@/workers/types/dbinterface";
 import AttributeChildLayout from "./AttributeChildLayout.vue";
 import AttributeInput from "./AttributeInput.vue";
@@ -157,6 +158,8 @@ const add = async () => {
   );
 };
 
+const router = useRouter();
+const route = useRoute();
 const showKey = ref(false);
 const wForm = useWatchedForm<{ key: string }>();
 const keyData = ref({ key: "" });
@@ -171,7 +174,19 @@ const keyForm = wForm.newForm(keyData, async ({ value }) => {
       .replace("root", "")
       .replaceAll("\u000b", "/") ?? ""; // endpoint doesn't want it
   payload[`${path}/${value.key}`] = "";
-  await call.put<UpdateComponentAttributesArgs>(payload);
+  const { req, newChangeSetId } = await call.put<UpdateComponentAttributesArgs>(
+    payload,
+  );
+  if (newChangeSetId && api.ok(req)) {
+    router.push({
+      name: "new-hotness-component",
+      params: {
+        workspacePk: route.params.workspacePk,
+        changeSetId: newChangeSetId,
+        componentId: props.component.id,
+      },
+    });
+  }
 });
 
 const saveKey = async () => {

diff --git a/app/web/src/newhotness/types.ts b/app/web/src/newhotness/types.ts
@@ -6,6 +6,7 @@ export interface Context {
   changeSetId: ComputedRef<string>;
   user: User | null;
   onHead: ComputedRef<boolean>;
+  headChangeSetId: ComputedRef<string>;
 }
 
 export function assertIsDefined<T>(value: T | undefined): asserts value is T {

diff --git a/app/web/src/store/realtime/heimdall.ts b/app/web/src/store/realtime/heimdall.ts
@@ -125,6 +125,21 @@ export const getPossibleConnections = async (args: {
   );
 };
 
+export const linkNewChangeset = async (
+  workspaceId: string,
+  changeSetId: string,
+  workspaceSnapshotAddress: string,
+) => {
+  const changeSetsStore = useChangeSetsStore();
+  if (!changeSetsStore.headChangeSetId) throw new Error("Don't have HEAD");
+  await db.linkNewChangeset(
+    workspaceId,
+    changeSetsStore.headChangeSetId,
+    changeSetId,
+    workspaceSnapshotAddress,
+  );
+};
+
 export const getOutgoingConnections = async (args: {
   workspaceId: string;
   changeSetId: ChangeSetId;

diff --git a/app/web/src/store/realtime/realtime.store.ts b/app/web/src/store/realtime/realtime.store.ts
@@ -336,7 +336,7 @@ export const useRealtimeStore = defineStore("realtime", () => {
         eventMetadata.actor !== "System" &&
         eventMetadata.actor.User === authStore.userPk
       ) {
-        bufferWatchList.push(eventData);
+        bufferWatchList.push(eventData.changeSetId);
       }
     }
     if (eventKind === "ChangeSetApplied") {

diff --git a/app/web/src/store/realtime/realtime_events.ts b/app/web/src/store/realtime/realtime_events.ts
@@ -90,7 +90,10 @@ export type WsEventPayloadMap = {
     changeSetId: string | null;
     viewId: string | null;
   };
-  ChangeSetCreated: string;
+  ChangeSetCreated: {
+    changeSetId: string;
+    workspaceSnapshotAddress: string;
+  };
   ChangeSetWritten: string;
   ChangeSetCancelled: string;
   Conflict: string;

diff --git a/app/web/src/workers/types/dbinterface.ts b/app/web/src/workers/types/dbinterface.ts
@@ -71,6 +71,12 @@ export interface DBInterface {
   initBifrost(): void;
   bifrostClose(): void;
   bifrostReconnect(): void;
+  linkNewChangeset(
+    workspaceId: string,
+    headChangeSetId: string,
+    changeSetId: string,
+    workspaceSnapshotAddress: string,
+  ): Promise<void>;
   getConnectionByAnnotation(
     workspaceId: string,
     changeSetId: string,