Merge pull request #835 from posit-dev/dotnomad/config-diff-style

Style ConfigSettings diff with DiffTag component

web/src/components/DiffTag.vue

@@ -0,0 +1,69 @@
+<!-- Copyright (C) 2023 by Posit Software, PBC. -->
+
+<template>
+  <span
+    class="diff text-weight-medium"
+    :class="diffType === 'inserted' ? 'diff-inserted' : 'diff-removed'"
+  >
+    <span class="diff-marker">{{ marker }}</span>{{ value }}
+  </span>
+</template>
+
+<script setup lang="ts">
+import { PropType, computed } from 'vue';
+
+export type DiffType = 'inserted' | 'removed';
+
+const props = defineProps({
+  diffType: {
+    type: Object as PropType<DiffType>,
+    required: true,
+  },
+  value: {
+    type: [String, Boolean, Number],
+    required: true
+  }
+});
+
+const marker = computed(() => {
+  return props.diffType === 'inserted' ? '+' : '-';
+});
+</script>
+
+<style scoped lang="scss">
+.diff {
+  display: inline-flex;
+  align-items: center;
+  border-radius: 8px;
+  position: relative;
+  border: 1px solid;
+  padding-left: 8px;
+  padding-right: 8px;
+  column-gap: 6px;
+  line-height: 1.75;
+
+  &.diff-removed {
+    border-color: red;
+
+    .diff-marker {
+      border-color: red;
+    }
+  }
+
+  &.diff-inserted {
+    border-color: green;
+
+    .diff-marker {
+      border-color: green;
+    }
+  }
+
+  .diff-marker {
+    display: flex;
+    align-self: stretch;
+    align-items: center;
+    border-right: 1px solid;
+    padding-right: 6px;
+  }
+}
+</style>

web/src/components/config/ConfigSetting.vue

@@ -2,31 +2,44 @@
 
 <template>
   <div class="config-setting">
-    <dt class="config-label text-weight-medium">
-      {{ label }}
+    <dt class="config-label text-weight-medium space-between-x-sm">
+      <span>{{ label }}</span>
+      <span
+        v-if="previousValue !== value"
+        class="text-low-contrast text-weight-regular"
+      >
+        Changed since last deploy
+      </span>
     </dt>
     <dd class="config-value">
       <div
         v-if="value !== undefined"
-        class="space-between-x-xs"
+        class="flex gap-sm"
       >
-        <span
-          v-if="showPreviousValue"
-          class="text-strike"
+        <template
+          v-if="previousValue !== value"
         >
-          {{ previousValue }}
-        </span>
-        <span>{{ value }}</span>
+          <DiffTag
+            v-if="previousValue !== undefined"
+            diff-type="removed"
+            :value="previousValue"
+          />
+          <DiffTag
+            diff-type="inserted"
+            :value="value"
+          />
+        </template>
+        <span v-else>{{ value }}</span>
       </div>
       <slot />
     </dd>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
+import DiffTag from 'src/components/DiffTag.vue';
 
-const props = defineProps({
+defineProps({
   label: {
     type: String,
     required: true,
@@ -42,28 +55,24 @@ const props = defineProps({
     default: undefined,
   },
 });
-
-const showPreviousValue = computed((): boolean => {
-  return props.previousValue !== undefined && props.previousValue !== props.value;
-});
 </script>
 
 <style scoped lang="scss">
-
-@media (max-width: 600px) {
+@media (max-width: 700px) {
   .config-setting {
     .config-value {
       margin-top: 4px;
     }
   }
 }
 
-@media (min-width: 601px) {
+@media (min-width: 701px) {
   .config-setting {
     display: flex;
 
     .config-label {
-      min-width: 15rem;
+      display: flex;
+      min-width: 18rem;
       padding-right: 24px;
     }