Merge pull request #5243 from systeminit/feat/actions-list-shows-head…

…-queue-while-in-changeset Feat: users can see actions queue'd on HEAD while in a changeset
systeminit · Jan 13, 2025 · adaa1d3 · adaa1d3
2 parents f348981 + 5800846
commit adaa1d3
Show file tree

Hide file tree

Showing 4 changed files with 112 additions and 44 deletions.
diff --git a/app/web/src/components/Actions/ActionsList.vue b/app/web/src/components/Actions/ActionsList.vue
@@ -81,7 +81,7 @@
     >
       <ActionCard
         :action="action"
-        :noInteraction="props.noInteraction || props.kind === 'history'"
+        :noInteraction="props.noInteraction"
         :selected="isSelected(action)"
         :slim="props.slim"
         @click="props.clickAction && props.clickAction(action, $event)"

diff --git a/app/web/src/components/ChangesPanelHistory.vue b/app/web/src/components/ChangesPanelHistory.vue
@@ -25,6 +25,7 @@
             :changeSet="getChangeSet(detail)"
             :clickAction="clickActionOrMgmtRun"
             :selectedFuncRunIds="selectedFuncRunId ? [selectedFuncRunId] : []"
+            noInteraction
             kind="history"
             @history="openHistory"
           />

diff --git a/app/web/src/components/ChangesPanelProposed.vue b/app/web/src/components/ChangesPanelProposed.vue
@@ -1,56 +1,116 @@
 <template>
-  <div v-if="actionsStore.proposedActions.length > 0">
-    <!-- TODO(Wendy)- SEARCH BAR SHOULD GO HERE -->
-    <div class="flex flex-row place-content-center">
-      <VButton
-        :disabled="disabledMultiple"
-        class="flex-1 m-xs dark:hover:bg-action-900 hover:bg-action-100 dark:hover:text-action-300 hover:text-action-700 hover:underline"
-        icon="circle-stop"
-        iconClass="text-warning-400"
-        label="Put On Hold"
-        size="xs"
-        tone="empty"
-        variant="solid"
-        @click="holdAll"
+  <div>
+    <ConfirmHoldModal ref="confirmRef" :ok="finishHold" />
+    <div v-if="actionsStore.proposedActions.length > 0">
+      <!-- TODO(Wendy)- SEARCH BAR SHOULD GO HERE -->
+      <div class="flex flex-row place-content-center">
+        <VButton
+          :disabled="disabledMultiple"
+          class="flex-1 m-xs dark:hover:bg-action-900 hover:bg-action-100 dark:hover:text-action-300 hover:text-action-700 hover:underline"
+          icon="circle-stop"
+          iconClass="text-warning-400"
+          label="Put On Hold"
+          size="xs"
+          tone="empty"
+          variant="solid"
+          @click="holdAll"
+        />
+        <VButton
+          :disabled="disabledMultiple"
+          class="flex-1 m-xs dark:hover:bg-action-900 hover:bg-action-100 dark:hover:text-action-300 hover:text-action-700 hover:underline"
+          icon="x"
+          iconClass="dark:text-destructive-600 text-destructive-500"
+          label="Remove"
+          size="xs"
+          tone="empty"
+          variant="solid"
+          @click="removeAll"
+        />
+      </div>
+    </div>
+    <div v-if="changeSetStore.headSelected">
+      <ActionsList
+        v-if="actionsStore.proposedActions.length > 0"
+        :clickAction="clickAction"
+        :selectedActionIds="selectedActionIds"
+        kind="proposed"
       />
-      <VButton
-        :disabled="disabledMultiple"
-        class="flex-1 m-xs dark:hover:bg-action-900 hover:bg-action-100 dark:hover:text-action-300 hover:text-action-700 hover:underline"
-        icon="x"
-        iconClass="dark:text-destructive-600 text-destructive-500"
-        label="Remove"
-        size="xs"
-        tone="empty"
-        variant="solid"
-        @click="removeAll"
+      <EmptyStateCard
+        v-else
+        iconName="actions"
+        primaryText="All Actions on HEAD have been run"
+        secondaryText="You can see those actions in the history tab."
       />
     </div>
-    <ConfirmHoldModal ref="confirmRef" :ok="finishHold" />
-    <ActionsList
-      :clickAction="clickAction"
-      :selectedActionIds="selectedActionIds"
-      kind="proposed"
-    />
-
-    <FuncRunTabGroup
-      :close="deselectAction"
-      :funcRun="funcRun"
-      :open="!!singleSelectedAction"
-      :selectedTab="selectedTab"
-    />
+    <div v-else>
+      <TreeNode
+        enableDefaultHoverClasses
+        enableGroupToggle
+        alwaysShowArrow
+        indentationSize="none"
+        leftBorderSize="none"
+        defaultOpen
+        internalScrolling
+        class="min-h-[50vh]"
+        primaryIconClasses=""
+        label="Proposed Actions In This Change Set"
+      >
+        <FuncRunTabGroup
+          :close="deselectAction"
+          :funcRun="funcRun"
+          :open="!!singleSelectedAction"
+          :selectedTab="selectedTab"
+        />
+        <ActionsList
+          v-if="actionsStore.proposedActions.length > 0"
+          class="mt-sm"
+          :clickAction="clickAction"
+          :selectedActionIds="selectedActionIds"
+          kind="proposed"
+        />
+        <EmptyStateCard
+          v-else
+          iconName="actions"
+          primaryText="No Actions Have Been Proposed In This Change Set"
+          secondaryText="Propose some actions to see them here."
+        />
+      </TreeNode>
+      <TreeNode
+        enableDefaultHoverClasses
+        enableGroupToggle
+        alwaysShowArrow
+        indentationSize="none"
+        leftBorderSize="none"
+        defaultOpen
+        internalScrolling
+        class="min-h-[32px]"
+        primaryIconClasses=""
+        label="Actions In Queue on HEAD"
+      >
+        <ActionsList
+          v-if="actionsStore.headActions.length > 0"
+          class="mt-sm"
+          :clickAction="clickAction"
+          :selectedActionIds="selectedActionIds"
+          :actions="actionsStore.headActions"
+          kind="proposed"
+          noInteraction
+        />
+        <EmptyStateCard
+          v-else
+          iconName="actions"
+          primaryText="All Actions on HEAD have been run"
+          secondaryText="You can see those actions in the history tab."
+        />
+      </TreeNode>
+    </div>
   </div>
-  <EmptyStateCard
-    v-else
-    iconName="actions"
-    primaryText="No Actions Have Been Proposed"
-    secondaryText="Propose some actions in this change set to see them here."
-  />
 </template>
 
 <script lang="ts" setup>
 import * as _ from "lodash-es";
 import { ref, reactive, computed, watch, WatchStopHandle } from "vue";
-import { VButton } from "@si/vue-lib/design-system";
+import { VButton, TreeNode } from "@si/vue-lib/design-system";
 import { ActionId, ActionState } from "@/api/sdf/dal/action";
 import {
   useActionsStore,
@@ -59,12 +119,14 @@ import {
 } from "@/store/actions.store";
 import FuncRunTabGroup from "@/components/Actions/FuncRunTabGroup.vue";
 import { FuncRun, useFuncRunsStore } from "@/store/func_runs.store";
+import { useChangeSetsStore } from "@/store/change_sets.store";
 import ConfirmHoldModal from "./Actions/ConfirmHoldModal.vue";
 import ActionsList from "./Actions/ActionsList.vue";
 import EmptyStateCard from "./EmptyStateCard.vue";
 
 const actionsStore = useActionsStore();
 const funcRunsStore = useFuncRunsStore();
+const changeSetStore = useChangeSetsStore();
 
 const confirmRef = ref<InstanceType<typeof ConfirmHoldModal> | null>(null);
 

diff --git a/app/web/src/store/actions.store.ts b/app/web/src/store/actions.store.ts
@@ -146,6 +146,11 @@ export const useActionsStore = () => {
               (av) => av.originatingChangeSetId === changeSetId,
             );
           },
+          headActions(state): ActionProposedView[] {
+            return Object.values(state.actions).filter(
+              (av) => av.originatingChangeSetId !== changeSetId,
+            );
+          },
           historyActions(): ActionHistoryView[] {
             return this.actionHistory;
           },