mock UI and endpoints

systeminit · Jan 26, 2025 · 70dfe41 · 70dfe41
1 parent 6870da8
commit 70dfe41
Show file tree

Hide file tree

Showing 25 changed files with 834 additions and 88 deletions.
diff --git a/app/web/src/api/sdf/dal/property_editor.ts b/app/web/src/api/sdf/dal/property_editor.ts
@@ -23,6 +23,10 @@ export interface PropertyEditorPropWidgetKindArray {
   kind: "array";
 }
 
+export interface PropertyEditorPropWidgetKindUsers {
+  kind: "users";
+}
+
 export interface PropertyEditorPropWidgetKindCheckBox {
   kind: "checkbox";
 }
@@ -85,6 +89,7 @@ export type PropertyEditorPropWidgetKind =
   | PropertyEditorPropWidgetKindInteger
   | PropertyEditorPropWidgetKindHeader
   | PropertyEditorPropWidgetKindArray
+  | PropertyEditorPropWidgetKindUsers
   | PropertyEditorPropWidgetKindCodeEditor
   | PropertyEditorPropWidgetKindComboBox
   | PropertyEditorPropWidgetKindSelect

diff --git a/app/web/src/components/Actions/ActionsList.vue b/app/web/src/components/Actions/ActionsList.vue
@@ -33,7 +33,7 @@
             </div>
           </div>
           <div class="flex-none font-bold">
-            {{ displayActions.length }} Actions
+            {{ displayActions.length }} Action(s)
           </div>
           <!-- TODO(Wendy) - maybe a PillCounter makes more sense here? -->
           <!-- <PillCounter

diff --git a/app/web/src/components/AttributesPanel/TreeFormItem.vue b/app/web/src/components/AttributesPanel/TreeFormItem.vue
@@ -129,11 +129,28 @@
                 )
               "
             >
-              <template v-if="treeDef.children.length === 0">(empty)</template>
-              <template v-else-if="treeDef.children.length === 1"
-                >(1 item)</template
-              >
-              <template v-else>({{ treeDef.children.length }} items)</template>
+              <template v-if="widgetKind === 'users'">
+                <template v-if="treeDef.children.length === 0"
+                  >(empty)</template
+                >
+                <template v-else-if="treeDef.children.length === 1"
+                  >(1 user)</template
+                >
+                <template v-else
+                  >({{ treeDef.children.length }} users)</template
+                >
+              </template>
+              <template v-else>
+                <template v-if="treeDef.children.length === 0"
+                  >(empty)</template
+                >
+                <template v-else-if="treeDef.children.length === 1"
+                  >(1 item)</template
+                >
+                <template v-else
+                  >({{ treeDef.children.length }} items)</template
+                >
+              </template>
             </div>
           </div>
           <SourceIconWithTooltip
@@ -205,6 +222,15 @@
         v-show="isOpen && headerHasContent"
         class="attributes-panel-item__children"
       >
+        <div
+          v-if="widgetKind === 'users' && isArray && propManual"
+          :style="{ marginLeft: indentPx }"
+          class="flex flex-col grow gap-xs relative pt-2xs px-xs"
+        >
+          <div class="text-xs">Add an approver user for this requirement -</div>
+          <UserSelectMenu class="flex-none" @select="addUser" />
+        </div>
+
         <TreeFormItem
           v-for="childProp in treeDef.children"
           :key="`${propName}/${childProp.propDef?.name}`"
@@ -231,6 +257,21 @@
 
         <template v-if="(isArray || isMap) && propManual">
           <div
+            v-if="widgetKind === 'users'"
+            :style="{ marginLeft: indentPx }"
+            class="flex flex-row grow relative overflow-hidden items-center justify-center pt-xs"
+          >
+            <VButton
+              label="Delete Requirement"
+              tone="destructive"
+              variant="ghost"
+              icon="trash"
+              size="sm"
+              @click="deleteRequirement"
+            />
+          </div>
+          <div
+            v-else
             :style="{ marginLeft: indentPx }"
             class="h-[34px] flex flex-row grow gap-xs relative overflow-hidden items-center pt-2xs"
           >
@@ -455,6 +496,7 @@
       </div>
       <!-- Actual input, to the right -->
       <div
+        v-if="widgetKind !== 'users'"
         :class="
           clsx(
             'attributes-panel-item__input-wrap group/input',
@@ -726,6 +768,20 @@
           @click="openNonEditableModal"
         />
       </div>
+      <!-- users widget is just a delete button -->
+      <IconButton
+        v-else
+        icon="trash"
+        iconTone="destructive"
+        iconIdleTone="shade"
+        :tooltip="
+          treeDef.propDef.isReadonly
+            ? 'Can\'t Remove Only Approver!'
+            : 'Remove Approver'
+        "
+        size="xs"
+        :disabled="treeDef.propDef.isReadonly"
+      />
     </div>
 
     <!-- VALIDATION DETAILS -->
@@ -938,6 +994,7 @@ import SecretsModal from "../SecretsModal.vue";
 import SourceIconWithTooltip from "./SourceIconWithTooltip.vue";
 import CodeViewer from "../CodeViewer.vue";
 import { TreeFormContext } from "./TreeForm.vue";
+import UserSelectMenu from "../UserSelectMenu.vue";
 
 export type TreeFormProp = {
   id: string;
@@ -1051,7 +1108,13 @@ const viewsStore = useViewsStore();
 const componentId = viewsStore.selectedComponentId!;
 
 const changeSetsStore = useChangeSetsStore();
-const attributesStore = useComponentAttributesStore(componentId);
+const attributesStore = computed(() => {
+  if (props.attributesPanel) {
+    return useComponentAttributesStore(componentId);
+  } else {
+    return undefined;
+  }
+});
 const secretsStore = useSecretsStore();
 
 const fullPropDef = computed(() => props.treeDef.propDef);
@@ -1238,10 +1301,12 @@ const propSource = computed<AttributeValueSource>(() => {
 });
 
 const setSource = (source: AttributeValueSource) => {
+  if (!attributesStore.value) return;
+
   if (source === AttributeValueSource.Manual) {
     const value = props.treeDef.value?.value ?? null;
 
-    attributesStore.UPDATE_PROPERTY_VALUE({
+    attributesStore.value.UPDATE_PROPERTY_VALUE({
       update: {
         attributeValueId: props.treeDef.valueId,
         parentAttributeValueId: props.treeDef.parentValueId,
@@ -1252,7 +1317,7 @@ const setSource = (source: AttributeValueSource) => {
       },
     });
   } else {
-    attributesStore.RESET_PROPERTY_VALUE({
+    attributesStore.value.RESET_PROPERTY_VALUE({
       attributeValueId: props.treeDef.valueId,
     });
   }
@@ -1333,8 +1398,8 @@ const newMapChildKeyIsValid = computed(() => {
 
 function removeChildHandler() {
   if (!isChildOfArray.value && !isChildOfMap.value) return;
-  if (props.attributesPanel) {
-    attributesStore.REMOVE_PROPERTY_VALUE({
+  if (props.attributesPanel && attributesStore.value) {
+    attributesStore.value.REMOVE_PROPERTY_VALUE({
       attributeValueId: props.treeDef.valueId,
       propId: props.treeDef.propId,
       componentId,
@@ -1370,8 +1435,8 @@ function addChildHandler() {
     return;
   }
 
-  if (props.attributesPanel) {
-    attributesStore.UPDATE_PROPERTY_VALUE({
+  if (props.attributesPanel && attributesStore.value) {
+    attributesStore.value.UPDATE_PROPERTY_VALUE({
       insert: {
         parentAttributeValueId: props.treeDef.valueId,
         propId: props.treeDef.propId,
@@ -1390,8 +1455,8 @@ function unsetHandler(value?: string) {
   newValueBoolean.value = false;
   newValueString.value = "";
 
-  if (props.attributesPanel) {
-    attributesStore.RESET_PROPERTY_VALUE({
+  if (props.attributesPanel && attributesStore.value) {
+    attributesStore.value.RESET_PROPERTY_VALUE({
       attributeValueId: props.treeDef.valueId,
     });
   } else {
@@ -1444,8 +1509,8 @@ function updateValue(maybeNewVal?: unknown) {
     isForSecret = true;
   }
 
-  if (props.attributesPanel) {
-    attributesStore.UPDATE_PROPERTY_VALUE({
+  if (props.attributesPanel && attributesStore.value) {
+    attributesStore.value.UPDATE_PROPERTY_VALUE({
       update: {
         attributeValueId: props.treeDef.valueId,
         parentAttributeValueId: props.treeDef.parentValueId,
@@ -1702,6 +1767,19 @@ const socketSearchFilters = computed(() => {
 
   return filters;
 });
+
+// APPROVAL REQUIREMENTS STUFF
+const addUser = (userId: string) => {
+  // TODO(wendy) - add a user to the user list!
+  // eslint-disable-next-line no-console
+  console.log("NOT DONE!", userId);
+};
+
+const deleteRequirement = () => {
+  // TODO(wendy) - delete this approval requirement
+  // eslint-disable-next-line no-console
+  console.log("NOT DONE!");
+};
 </script>
 
 <style lang="less">

diff --git a/app/web/src/components/ChangesPanelProposed.vue b/app/web/src/components/ChangesPanelProposed.vue
@@ -1,7 +1,7 @@
 <template>
-  <div>
+  <div class="h-full flex flex-col overflow-hidden">
     <ConfirmHoldModal ref="confirmRef" :ok="finishHold" />
-    <div v-if="actionsStore.proposedActions.length > 0">
+    <div v-if="actionsStore.proposedActions.length > 0 || true">
       <!-- TODO(Wendy)- SEARCH BAR SHOULD GO HERE -->
       <div class="flex flex-row place-content-center">
         <VButton
@@ -34,7 +34,7 @@
       :open="!!singleSelectedAction"
       :selectedTab="selectedTab"
     />
-    <div v-if="changeSetStore.headSelected">
+    <template v-if="changeSetStore.headSelected">
       <ActionsList
         v-if="actionsStore.proposedActions.length > 0"
         :clickAction="clickAction"
@@ -47,8 +47,8 @@
         primaryText="All Actions on HEAD have been run"
         secondaryText="You can see those actions in the history tab."
       />
-    </div>
-    <div v-else>
+    </template>
+    <template v-else>
       <TreeNode
         enableDefaultHoverClasses
         enableGroupToggle
@@ -57,7 +57,7 @@
         leftBorderSize="none"
         defaultOpen
         internalScrolling
-        class="min-h-[50vh]"
+        class="min-h-[32px]"
         primaryIconClasses=""
         label="Proposed Actions In This Change Set"
       >
@@ -99,11 +99,11 @@
         <EmptyStateCard
           v-else
           iconName="actions"
-          primaryText="All Actions on HEAD have been run"
-          secondaryText="You can see those actions in the history tab."
+          primaryText="All Actions on HEAD have run"
+          secondaryText="See past actions in the history tab."
         />
       </TreeNode>
-    </div>
+    </template>
   </div>
 </template>
 

diff --git a/app/web/src/components/ComponentCard.vue b/app/web/src/components/ComponentCard.vue
@@ -3,7 +3,7 @@
     :class="
       clsx(
         'p-xs border-l-4 border relative',
-        titleCard ? 'mb-xs' : 'rounded-md',
+        !titleCard && 'rounded-md',
         'toDelete' in component.def && component.def.toDelete && 'opacity-70',
         'fromBaseChangeSet' in component.def &&
           component.def.fromBaseChangeSet &&

diff --git a/app/web/src/components/ComponentDetails.vue b/app/web/src/components/ComponentDetails.vue
@@ -1,7 +1,7 @@
 <template>
   <ScrollArea>
     <template #top>
-      <ComponentCard :component="props.component" titleCard>
+      <ComponentCard :component="props.component" titleCard class="mb-xs">
         <DetailsPanelMenuIcon
           :selected="props.menuSelected"
           @click="

diff --git a/app/web/src/components/EmptyStateCard.vue b/app/web/src/components/EmptyStateCard.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col items-center m-sm gap-xs">
+  <div :class="clsx('flex flex-col items-center gap-xs', marginClass)">
     <div class="w-64 flex flex-col items-center">
       <EmptyStateIcon :name="iconName" />
     </div>
@@ -17,15 +17,32 @@
 </template>
 
 <script lang="ts" setup>
-import { PropType } from "vue";
+import { computed, PropType } from "vue";
+import { SpacingSizes } from "@si/vue-lib/design-system";
+import clsx from "clsx";
 import EmptyStateIcon, { EMPTY_STATE_ICON_NAMES } from "./EmptyStateIcon.vue";
 
-defineProps({
+const props = defineProps({
   iconName: {
     type: String as PropType<EMPTY_STATE_ICON_NAMES>,
     required: true,
   },
   primaryText: { type: String, required: true },
   secondaryText: { type: String, required: true },
+  margin: { type: String as PropType<SpacingSizes>, default: "sm" },
 });
+
+const marginClass = computed(
+  () =>
+    ({
+      none: "m-0",
+      "2xs": "m-2xs",
+      xs: "m-xs",
+      sm: "m-sm",
+      md: "m-md",
+      lg: "m-lg",
+      xl: "m-xl",
+      "2xl": "m-2xl",
+    }[props.margin]),
+);
 </script>
diff --git a/app/web/src/components/ModelingDiagram/DiagramView.vue b/app/web/src/components/ModelingDiagram/DiagramView.vue
@@ -255,7 +255,10 @@ function onMouseOut() {
   viewsStore.setHoveredComponentId(null);
 }
 
-const goto = () => {
-  viewsStore.selectView(props.view.id);
+const goto = (e: KonvaEventObject<MouseEvent>) => {
+  // only allow double click with left mouse button!
+  if (e.evt.button === 0) {
+    viewsStore.selectView(props.view.id);
+  }
 };
 </script>