merge: #2949

2949: feat(web): Wire up the ChangeSetApplied modal r=stack72 a=stack72

This will allow a user to see that the changeset they were on was merged and to redirect to head. We don’t give the ability for a user to redirect to another changeset at this time

<img width="623" alt="Screenshot 2023-11-13 at 22 47 59" src="https://github.com/systeminit/si/assets/227823/10e55e1b-f95c-42ab-8d38-dccacc76baff">


Co-authored-by: stack72 <[email protected]>

app/web/src/components/layout/navbar/ChangeSetPanel.vue

@@ -84,10 +84,29 @@
         </div>
       </template>
     </Wipe>
-    <ChangeSetAppliedPopover
-      ref="changeSetAppliedRef"
-      :anchorTo="dropdownRef"
-    />
+    <Modal ref="changeSetAppliedRef" noExit>
+      <div
+        class="bg-white dark:bg-neutral-700 rounded-lg flex flex-col items-center w-96 max-h-[90vh] shadow-md overflow-hidden pb-xs"
+      >
+        <div class="px-sm pt-sm pb-xs w-full">
+          The change set you were in was merged by:
+        </div>
+
+        <div v-if="applyUser" class="pr-xs">
+          <UserCard :user="applyUser" hideChangesetInfo />
+        </div>
+        <div class="px-sm pb-sm pt-xs w-full">
+          You are now on Head. You can continue your work by creating a new
+          change set or joining another existing change set.
+        </div>
+        <VButton
+          label="Ok"
+          variant="ghost"
+          size="sm"
+          @click="changeSetAppliedHandler()"
+        />
+      </div>
+    </Modal>
   </div>
 </template>
 
@@ -107,14 +126,18 @@ import { storeToRefs } from "pinia";
 import { nilId } from "@/utils/nilId";
 import { useChangeSetsStore } from "@/store/change_sets.store";
 import { useFixesStore } from "@/store/fixes.store";
+import UserCard from "@/components/layout/navbar/UserCard.vue";
+import { usePresenceStore } from "@/store/presence.store";
+import { useAuthStore } from "@/store/auth.store";
 import Wipe from "../../Wipe.vue";
-import ChangeSetAppliedPopover from "./ChangeSetAppliedPopover.vue";
 
 const dropdownRef = ref();
 const changeSetAppliedRef = ref();
 const wipeRef = ref<InstanceType<typeof Wipe>>();
 
 const changeSetsStore = useChangeSetsStore();
+const presenceStore = usePresenceStore();
+const authStore = useAuthStore();
 const fixesStore = useFixesStore();
 const openChangeSets = computed(() => changeSetsStore.openChangeSets);
 const selectedChangeSetId = computed(() => changeSetsStore.selectedChangeSetId);
@@ -197,20 +220,32 @@ function openCreateModal() {
   createModalRef.value?.open();
 }
 
-const openChangeSetAppliedPopover = () => {
-  const dropDownRect = dropdownRef.value.inputRef.getBoundingClientRect();
-
-  changeSetAppliedRef.value.openAt({
-    x: dropDownRect.x + dropDownRect.width / 2 - 16,
-    y: dropDownRect.bottom,
-  });
-};
-
-// TODO(Wendy) - Eventually we should replace this to not be reliant on the WSEvent
 const { postApplyActor } = storeToRefs(changeSetsStore);
 watch(postApplyActor, () => {
-  if (postApplyActor.value !== null) {
-    openChangeSetAppliedPopover();
+  if (
+    postApplyActor.value !== null &&
+    postApplyActor.value !== authStore.user?.pk
+  ) {
+    changeSetAppliedRef.value?.open();
+  }
+});
+
+function changeSetAppliedHandler() {
+  changeSetAppliedRef.value?.close();
+  // Redirect the user to head changeset
+  if (route.name) {
+    router.push({
+      name: route.name,
+      params: {
+        ...route.params,
+        changeSetId: "head",
+      },
+    });
   }
+}
+
+const applyUser = computed(() => {
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  return presenceStore.usersById[changeSetsStore.postApplyActor!];
 });
 </script>

app/web/src/store/change_sets.store.ts

@@ -7,6 +7,7 @@ import { ApiRequest, addStoreHooks } from "@si/vue-lib/pinia";
 
 import { ChangeSet, ChangeSetStatus } from "@/api/sdf/dal/change_set";
 import router from "@/router";
+import { UserId } from "@/store/auth.store";
 import { useWorkspacesStore } from "./workspaces.store";
 import { useRealtimeStore } from "./realtime/realtime.store";
 import { useFeatureFlagsStore } from "./feature_flags.store";
@@ -189,9 +190,9 @@ export function useChangeSetsStore() {
             eventType: "ChangeSetApplied",
             callback: (data) => {
               // eslint-disable-next-line @typescript-eslint/no-explicit-any
-              const { changeSetPk, actor } = data as any as {
+              const { changeSetPk, userPk } = data as any as {
                 changeSetPk: string;
-                actor: string;
+                userPk: UserId;
               };
               const changeSet = this.changeSetsById[changeSetPk];
               if (changeSet) {
@@ -200,7 +201,7 @@ export function useChangeSetsStore() {
                   this.selectedChangeSetId === changeSetPk &&
                   featureFlagsStore.MUTLIPLAYER_CHANGESET_APPLY
                 ) {
-                  this.postApplyActor = actor;
+                  this.postApplyActor = userPk;
                 }
                 this.changeSetsById[changeSetPk] = changeSet;
               }

lib/dal/src/change_set.rs

@@ -136,19 +136,19 @@ impl ChangeSet {
         )
         .await?;
 
-        let actor = match ctx.history_actor() {
+        let user_pk = match ctx.history_actor() {
             HistoryActor::User(user_pk) => {
                 let user = User::get_by_pk(ctx, *user_pk)
                     .await?
                     .ok_or(ChangeSetError::InvalidActor(*user_pk))?;
 
-                user.email().to_string()
+                Some(user.pk())
             }
 
-            HistoryActor::SystemInit => "SystemInitiativeUser".to_string(),
+            HistoryActor::SystemInit => None,
         };
 
-        WsEvent::change_set_applied(ctx, self.pk, actor)
+        WsEvent::change_set_applied(ctx, self.pk, user_pk)
             .await?
             .publish_on_commit(ctx)
             .await?;
@@ -246,13 +246,13 @@ impl WsEvent {
     pub async fn change_set_applied(
         ctx: &DalContext,
         change_set_pk: ChangeSetPk,
-        actor: String,
+        user_pk: Option<UserPk>,
     ) -> WsEventResult<Self> {
         WsEvent::new(
             ctx,
             WsPayload::ChangeSetApplied(ChangeSetAppliedPayload {
                 change_set_pk,
-                actor,
+                user_pk,
             }),
         )
         .await
@@ -278,5 +278,5 @@ impl WsEvent {
 #[serde(rename_all = "camelCase")]
 pub struct ChangeSetAppliedPayload {
     change_set_pk: ChangeSetPk,
-    actor: String,
+    user_pk: Option<UserPk>,
 }