merge: #3079

3079: feat(web) - various UI improvements r=wendybujalski a=wendybujalski - disable the change set abandon button while on HEAD - prevent users from naming a change set "head" (on the front end only) - add map item error message if you try to add an item without a key - AssetActionDetails UI more closely matches the rest of the UI - hover states for clickable diff icons on the diagram and ComponentCard - "No Code" message in AssetDiffDetails shows outside of a CodeViewer Co-authored-by: wendybujalski <[email protected]>
systeminit · Dec 18, 2023 · 546c816 · 546c816
2 parents dca78ed + cc5b872
commit 546c816
Show file tree

Hide file tree

Showing 9 changed files with 117 additions and 19 deletions.
diff --git a/app/web/src/components/ActionWidget.vue b/app/web/src/components/ActionWidget.vue
@@ -3,16 +3,20 @@
     v-if="action"
     :class="
       clsx(
-        'flex items-center gap-xs p-2xs rounded-md cursor-pointer border',
+        'flex items-center gap-xs p-2xs cursor-pointer border-x border-b',
+        themeClasses('border-neutral-200', 'border-neutral-600'),
+        'hover:outline-blue-300 hover:outline hover:z-10 -outline-offset-1',
         isActive ? 'bg-action-500 border-action-500 text-white' : '',
       )
     "
     @click="clickHandler"
   >
     <StatusIndicatorIcon type="action" :status="action?.name" tone="inherit" />
     <Stack spacing="2xs">
-      <div>{{ action?.displayName }}</div>
-      <div class="text-xs text-neutral-300">{{ component?.displayName }}</div>
+      <div class="font-bold">{{ action?.displayName }}</div>
+      <div class="text-xs dark:text-neutral-300 italic">
+        {{ component?.displayName }}
+      </div>
     </Stack>
 
     <Icon
@@ -21,15 +25,28 @@
       class="ml-auto"
       size="sm"
     />
-    <Icon v-else-if="isActive" name="x" class="ml-auto" size="sm" />
+    <Icon
+      v-else-if="isActive"
+      v-tooltip="{ content: 'This action will run.' }"
+      name="check"
+      class="ml-auto"
+      size="sm"
+    />
+    <Icon
+      v-else
+      v-tooltip="{ content: 'This action will not run.' }"
+      name="circle-slash"
+      class="ml-auto"
+      size="sm"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
 import * as _ from "lodash-es";
 import clsx from "clsx";
 import { PropType, computed } from "vue";
-import { Icon, Stack } from "@si/vue-lib/design-system";
+import { Icon, Stack, themeClasses } from "@si/vue-lib/design-system";
 import { ActionPrototypeId, useActionsStore } from "@/store/actions.store";
 import { ComponentId, useComponentsStore } from "@/store/components.store";
 import StatusIndicatorIcon from "./StatusIndicatorIcon.vue";

diff --git a/app/web/src/components/AssetActionsDetails.vue b/app/web/src/components/AssetActionsDetails.vue
@@ -15,11 +15,13 @@
           </div>
           <span class="text-xl">No Actions available</span>
         </div>
-        <div v-else class="flex flex-col p-xs gap-xs">
-          <div class="text-sm text-neutral-300">
-            Actions will be enacted after this change set has been applied. To
-            do so, deselect this component and click the "Apply Changes" button
-            in the top right.
+        <div v-else class="flex flex-col">
+          <div
+            class="text-sm text-neutral-700 dark:text-neutral-300 p-xs italic border-b dark:border-neutral-600"
+          >
+            Select the actions you want to run below. Actions will be enacted
+            after this change set has been applied. To do so, deselect this
+            component and click the "Apply Changes" button in the top right.
           </div>
           <ActionWidget
             v-for="action in actions"

diff --git a/app/web/src/components/AssetDiffDetails.vue b/app/web/src/components/AssetDiffDetails.vue
@@ -9,24 +9,32 @@
       <div class="absolute inset-xs">
         <template v-if="selectedComponent.changeStatus === 'unmodified'">
           <CodeViewer
-            :code="selectedComponentDiff.current.code || 'No code'"
+            v-if="selectedComponentDiff.current.code"
+            :code="selectedComponentDiff.current.code"
             :codeLanguage="selectedComponentDiff.current.language"
           >
             <template #title>
               <span class="text-lg">Current</span>
             </template>
           </CodeViewer>
+          <div v-else class="w-full text-center text-xl text-neutral-400 p-sm">
+            No Code
+          </div>
         </template>
         <template v-else>
           <!-- what to do about multiple diffs? -->
           <CodeViewer
-            :code="selectedComponentDiff.diffs[0]?.code || 'No code'"
+            v-if="selectedComponentDiff.diffs[0]?.code"
+            :code="selectedComponentDiff.diffs[0]?.code"
             :codeLanguage="selectedComponentDiff.diffs[0]?.language"
           >
             <template #title>
               <span class="text-lg">Diff</span>
             </template>
           </CodeViewer>
+          <div v-else class="w-full text-center text-xl text-neutral-400 p-sm">
+            No Code
+          </div>
         </template>
       </div>
     </template>

diff --git a/app/web/src/components/AttributesPanel/AttributesPanelItem.vue b/app/web/src/components/AttributesPanel/AttributesPanelItem.vue
@@ -121,7 +121,14 @@
             v-model="newMapChildKey"
             type="text"
             placeholder="key"
-            class="attributes-panel-item__new-child-key-input"
+            :class="
+              clsx(
+                'attributes-panel-item__new-child-key-input',
+                isMapKeyError &&
+                  'attributes-panel-item__new-child-key-input__error',
+              )
+            "
+            @blur="clearKeyError"
             @keyup.enter="addChildHandler"
           />
 
@@ -133,6 +140,13 @@
             {{ isArray ? "Add array item" : "Add map item" }}
           </button>
         </div>
+        <div
+          v-if="isMap && isMapKeyError"
+          :style="{ marginLeft: indentPx }"
+          class="attributes-panel-item__map-key-error text-destructive-500 pl-8 italic pb-xs"
+        >
+          You must enter a valid key.
+        </div>
       </div>
     </div>
 
@@ -356,7 +370,7 @@
 <script setup lang="ts">
 import * as _ from "lodash-es";
 import { computed, PropType, ref, watch } from "vue";
-
+import clsx from "clsx";
 import { Icon, IconNames, Modal } from "@si/vue-lib/design-system";
 import {
   AttributeTreeItem,
@@ -418,6 +432,10 @@ const propLabel = computed(() => propLabelParts.value.join(""));
 
 const isArray = computed(() => propKind.value === "array");
 const isMap = computed(() => propKind.value === "map");
+const isMapKeyError = ref(false);
+const clearKeyError = () => {
+  isMapKeyError.value = false;
+};
 const isChildOfArray = computed(
   () => props.attributeDef.arrayIndex !== undefined,
 );
@@ -510,7 +528,10 @@ function getKey() {
 
 function addChildHandler() {
   const isAddingMapChild = propKind.value === "map";
-  if (isAddingMapChild && !newMapChildKeyIsValid.value) return;
+  if (isAddingMapChild && !newMapChildKeyIsValid.value) {
+    isMapKeyError.value = true;
+    return;
+  }
 
   attributesStore.UPDATE_PROPERTY_VALUE({
     insert: {
@@ -658,6 +679,10 @@ function secretSelectedHandler(newSecret: Secret) {
   }
 }
 
+.attributes-panel-item__children > *:last-child {
+  border-bottom: 1px solid var(--header-bg-color);
+}
+
 .attributes-panel-item__section-header-wrap {
   position: sticky;
   height: @header-height;
@@ -950,6 +975,14 @@ function secretSelectedHandler(newSecret: Secret) {
   }
 }
 
+.attributes-panel-item__new-child-key-input__error {
+  border-color: #ef4444;
+
+  &:focus {
+    border-color: #ef4444;
+  }
+}
+
 .attributes-panel-item.--input .attributes-panel-item__type-icon {
   margin-left: auto;
   opacity: 0.5;

diff --git a/app/web/src/components/ComponentCard.vue b/app/web/src/components/ComponentCard.vue
@@ -28,7 +28,10 @@
       </Stack>
 
       <!-- change status icon -->
-      <div class="ml-auto cursor-pointer">
+      <div
+        v-if="component.changeStatus !== 'unmodified'"
+        class="ml-auto cursor-pointer rounded hover:scale-125"
+      >
         <StatusIndicatorIcon
           type="change"
           :status="component.changeStatus"

diff --git a/app/web/src/components/ModelingDiagram/DiagramGroup.vue b/app/web/src/components/ModelingDiagram/DiagramGroup.vue
@@ -331,7 +331,7 @@
       :icon="isAdded ? 'plus-square' : 'tilde-square'"
       :color="isAdded ? getToneColorHex('success') : getToneColorHex('warning')"
       shadeBg
-      :size="GROUP_HEADER_ICON_SIZE"
+      :size="GROUP_HEADER_ICON_SIZE + (diffIconHover ? 8 : 0)"
       :x="halfWidth - GROUP_HEADER_ICON_SIZE / 2"
       :y="
         -nodeHeaderHeight +
@@ -341,6 +341,8 @@
       "
       origin="center"
       @click="onClick('diff')"
+      @mouseover="diffIconHover = true"
+      @mouseout="diffIconHover = false"
     />
   </v-group>
 </template>
@@ -402,6 +404,8 @@ const props = defineProps({
   isSelected: Boolean,
 });
 
+const diffIconHover = ref(false);
+
 const emit = defineEmits<{
   (e: "hover:start", meta?: ElementHoverMeta): void;
   (e: "hover:end"): void;

diff --git a/app/web/src/components/ModelingDiagram/DiagramNode.vue b/app/web/src/components/ModelingDiagram/DiagramNode.vue
@@ -220,18 +220,37 @@
           :y="nodeBodyHeight / 2"
         />
       </v-group>
+
+      <!-- added/modified indicator -->
       <DiagramIcon
         v-if="isAdded || isModified"
         :icon="isAdded ? 'plus-square' : 'tilde-square'"
         :color="
           isAdded ? getToneColorHex('success') : getToneColorHex('warning')
         "
-        :size="24"
+        :size="24 + (diffIconHover ? 4 : 0)"
         :x="halfWidth - 2 - 12"
         :y="nodeHeaderHeight / 2"
         origin="center"
         @click="onClick('diff')"
+        @mouseover="diffIconHover = true"
+        @mouseout="diffIconHover = false"
       />
+
+      <!-- added/modified icon hover -->
+      <!-- <v-rect
+        v-if="diffIconHover && (isAdded || isModified)"
+        :config="{
+          width: 24,
+          height: 24,
+          x: halfWidth - 2 - 24,
+          y: nodeHeaderHeight / 2 - 12,
+          cornerRadius: CORNER_RADIUS + 3,
+          stroke: SELECTION_COLOR,
+          strokeWidth: 2,
+          listening: false,
+        }"
+      /> -->
     </v-group>
 
     <!-- change status indicators -->
@@ -303,6 +322,8 @@ const emit = defineEmits<{
   (e: "resize"): void;
 }>();
 
+const diffIconHover = ref(false);
+
 const { theme } = useTheme();
 
 const diagramContext = useDiagramContext();

diff --git a/app/web/src/components/layout/navbar/ChangeSetPanel.vue b/app/web/src/components/layout/navbar/ChangeSetPanel.vue
@@ -35,7 +35,11 @@
         variant="ghost"
         icon="trash"
         size="sm"
-        :disabled="fixesStore.fixesAreInProgress || !selectedChangeSetName"
+        :disabled="
+          fixesStore.fixesAreInProgress ||
+          !selectedChangeSetName ||
+          changeSetsStore.headSelected
+        "
         @click="abandonConfirmationModalRef.open()"
       />
     </div>
@@ -57,6 +61,8 @@
             v-model="createChangeSetName"
             label="Change set name"
             required
+            :regex="CHANGE_SET_NAME_REGEX"
+            regexMessage="You cannot name a change set 'HEAD' - please choose another name."
             requiredMessage="Please choose a name for your change set!"
           />
           <div class="flex flex-row-reverse gap-sm">
@@ -148,6 +154,8 @@ import { useFixesStore } from "@/store/fixes.store";
 import { useFeatureFlagsStore } from "@/store/feature_flags.store";
 import Wipe from "../../Wipe.vue";
 
+const CHANGE_SET_NAME_REGEX = /^(?!head).*$/i;
+
 const dropdownRef = ref();
 const abandonConfirmationModalRef = ref();
 const wipeRef = ref<InstanceType<typeof Wipe>>();

diff --git a/lib/vue-lib/src/design-system/icons/icon_set.ts b/lib/vue-lib/src/design-system/icons/icon_set.ts
@@ -113,6 +113,7 @@ import Tools from "~icons/octicon/tools";
 import ExternalLink from "~icons/octicon/link-external";
 import Globe from "~icons/octicon/globe-24";
 import Check2 from "~icons/octicon/check-16";
+import CircleSlash from "~icons/octicon/circle-slash";
 
 // 3p logos
 import AwsLogo from "~icons/cib/amazon-aws";
@@ -178,6 +179,7 @@ export const ICONS = Object.freeze({
   "check-hex-outline": CheckHexOutline,
   "check-square": CheckSquare,
   check2: Check2,
+  "circle-slash": CircleSlash,
   "clipboard-copy": ClipboardCopy,
   clock: Clock,
   "cloud-download": CloudDownload,