Addressing many of the comments from kevgliss

Netflix · Nov 29, 2023 · 84d8f52 · 84d8f52
1 parent 2d263a0
commit 84d8f52
Show file tree

Hide file tree

Showing 20 changed files with 95 additions and 459 deletions.
diff --git a/src/dispatch/static/dispatch/src/case/CaseAttributesDrawer.vue b/src/dispatch/static/dispatch/src/case/CaseAttributesDrawer.vue
@@ -188,7 +188,7 @@ watchEffect(() => {
       </div>
 
       <v-card flat color="grey-lighten-5" class="rounded-lg mt-6 ml-2 mr-2">
-        <tiptap
+        <RichEditor
           :resolution="true"
           v-model="modelValue.resolution"
           style="min-height: 400px; margin: 10px; font-size: 0.9125rem; font-weight: 400"
@@ -206,7 +206,8 @@ watchEffect(() => {
   </div>
 </template>
 
-<style scope>
+<style lang="scss" scoped>
+@import "@/styles/index.scss";
 .dispatch-font {
   color: rgb(107, 111, 118) !important;
   font-size: 0.8125rem !important;
@@ -218,26 +219,4 @@ watchEffect(() => {
   font-size: 1.2125rem !important;
   font-weight: 500;
 }
-
-.dispatch-button-out {
-  text-transform: none !important;
-  display: inline-flex !important;
-  align-items: center !important;
-  justify-content: center !important;
-  margin: 0px !important;
-  font-weight: 500px !important;
-  line-height: normal !important;
-  transition-property: border, background-color, color, opacity !important;
-  transition-duration: 0.15s !important;
-  user-select: none !important;
-  box-shadow: rgba(0, 0, 0, 0.09) 0px 1px 4px !important;
-  background-color: rgb(255, 255, 255) !important;
-  border: 1px solid rgb(223, 225, 228) !important;
-  border-radius: 4px !important;
-  color: rgb(60, 65, 73) !important;
-  min-width: 28px !important;
-  height: 28px !important;
-  padding: 0px 14px !important;
-  font-size: 0.75rem !important;
-}
 </style>
diff --git a/src/dispatch/static/dispatch/src/case/CaseResolutionSearchPopover.vue b/src/dispatch/static/dispatch/src/case/CaseResolutionSearchPopover.vue
@@ -29,42 +29,18 @@ const selectCaseResolution = async (caseResolutionName: string) => {
 <template>
   <SearchPopover
     :items="caseResolutions"
-    class="dispatch-button-out"
+    class="dispatch-button"
     :initialValue="caseResolution || 'Resolution Reason'"
     @item-selected="selectCaseResolution"
     label="Set resolution..."
     :hotkeys="[]"
   >
     <template v-slot:default="{ item }">
-      <v-list-item-title class="item-title-font">{{ item }}</v-list-item-title>
+      <v-list-item-title class="dispatch-text-title">{{ item }}</v-list-item-title>
     </template>
   </SearchPopover>
 </template>
 
-<style scoped>
-.item-title-font {
-  font-size: 13px !important;
-}
-
-.dispatch-button-out {
-  text-transform: none !important;
-  display: inline-flex !important;
-  align-items: center !important;
-  justify-content: center !important;
-  margin: 0px !important;
-  font-weight: 500px !important;
-  line-height: normal !important;
-  transition-property: border, background-color, color, opacity !important;
-  transition-duration: 0.15s !important;
-  user-select: none !important;
-  box-shadow: rgba(0, 0, 0, 0.09) 0px 1px 4px !important;
-  background-color: rgb(255, 255, 255) !important;
-  border: 1px solid rgb(223, 225, 228) !important;
-  border-radius: 4px !important;
-  color: rgb(60, 65, 73) !important;
-  min-width: 28px !important;
-  height: 28px !important;
-  padding: 0px 14px !important;
-  font-size: 0.75rem !important;
-}
+<style lang="scss" scoped>
+@import "@/styles/index.scss";
 </style>
diff --git a/src/dispatch/static/dispatch/src/case/CaseSignalInstanceTab.vue b/src/dispatch/static/dispatch/src/case/CaseSignalInstanceTab.vue
@@ -10,7 +10,7 @@
                 <span style="font-size: 0.8rem" class="pl-8">
                   {{ item.signal.name }}
                 </span>
-                <span style="font-size: 0.75rem" class="pl-1">
+                <span class="pl-1 dispatch-text-paragraph">
                   · {{ formatRelativeDate(item.created_at) }}
                 </span>
                 <!-- Other data fields... -->
@@ -25,7 +25,7 @@
       <!-- Column for Raw Signal Viewer -->
       <v-col cols="9">
         <v-card elevation="0" class="signal-card pt-2">
-          <span style="font-size: 0.75rem">
+          <span class="dispatch-text-paragraph">
             <!-- {{ selectedItem.signal.name }} -->
           </span>
           <raw-signal-viewer :value="selectedItem" />
@@ -41,7 +41,6 @@ import { useRoute, useRouter } from "vue-router"
 import { formatRelativeDate } from "@/filters"
 
 import RawSignalViewer from "@/signal/NewRawSignalViewer.vue"
-import HoverCard from "@/components/HoverCard.vue"
 
 // Define props
 const props = withDefaults(
@@ -108,7 +107,8 @@ watch(
 )
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+@import "@/styles/index.scss";
 .signal-card {
   border: 0.5px solid rgb(216, 216, 216) !important;
   border-radius: 8px !important;

diff --git a/src/dispatch/static/dispatch/src/case/CaseTimelineTabOld.vue b/src/dispatch/static/dispatch/src/case/CaseTimelineTabOld.vue
diff --git a/src/dispatch/static/dispatch/src/case/EditSheet.vue b/src/dispatch/static/dispatch/src/case/EditSheet.vue
@@ -56,7 +56,7 @@
           <case-participants-tab />
         </v-window-item>
         <v-window-item key="timeline">
-          <case-timeline-tab-old />
+          <case-timeline-tab-v1 />
         </v-window-item>
         <v-window-item key="workflow_instances">
           <workflow-instance-tab v-model="workflow_instances" />
@@ -84,7 +84,7 @@ import { formatRelativeDate } from "@/filters"
 import CaseDetailsTab from "@/case/DetailsTab.vue"
 import CaseParticipantsTab from "@/case/ParticipantsTab.vue"
 import CaseResourcesTab from "@/case/ResourcesTab.vue"
-import CaseTimelineTabOld from "@/case/CaseTimelineTabOld.vue"
+import CaseTimelineTabV1 from "@/case/CaseTimelineTabV1.vue"
 import WorkflowInstanceTab from "@/workflow/WorkflowInstanceTab.vue"
 import SignalInstanceTab from "@/signal/SignalInstanceTab.vue"
 import EntitiesTab from "@/entity/EntitiesTab.vue"
@@ -96,7 +96,7 @@ export default {
     CaseDetailsTab,
     CaseResourcesTab,
     CaseParticipantsTab,
-    CaseTimelineTabOld,
+    CaseTimelineTabV1,
     WorkflowInstanceTab,
     SignalInstanceTab,
     EntitiesTab,

diff --git a/src/dispatch/static/dispatch/src/case/Page.vue b/src/dispatch/static/dispatch/src/case/Page.vue
@@ -10,8 +10,8 @@
     <CaseAttributesDrawer v-model="caseDetails" :open="isDrawerOpen" />
     <VDivider />
     <div class="container mx-auto px-4">
-      <Tiptap :title="true" v-model="caseDetails.title" class="pl-8 pb-6 pt-6" />
-      <Tiptap :description="true" v-model="caseDetails.description" class="pl-8 pb-6" />
+      <RichEditor :title="true" v-model="caseDetails.title" class="pl-8 pb-6 pt-6" />
+      <RichEditor :description="true" v-model="caseDetails.description" class="pl-8 pb-6" />
       <CaseStatusSelectGroup v-model="caseDetails" class="pl-4 pb-8" />
       <CaseTabs :loading="loading" v-model="caseDetails" />
     </div>
@@ -27,7 +27,7 @@ import CaseApi from "@/case/api"
 import CaseAttributesDrawer from "@/case/CaseAttributesDrawer.vue"
 import PageHeader from "@/case//PageHeader.vue"
 import CaseTabs from "@/case/CaseTabs.vue"
-import Tiptap from "@/components/Tiptap.vue"
+import RichEditor from "@/components/RichEditor.vue"
 import CaseStatusSelectGroup from "@/case/CaseStatusSelectGroup.vue"
 
 const route = useRoute()

diff --git a/src/dispatch/static/dispatch/src/case/PageHeader.vue b/src/dispatch/static/dispatch/src/case/PageHeader.vue
@@ -29,6 +29,7 @@
 import { useRoute } from "vue-router"
 import { computed, ref } from "vue"
 import LockButton from "@/components/LockButton.vue"
+import EscalateButton from "@/case/EscalateButton.vue"
 import FancyTooltip from "@/components/FancyTooltip.vue"
 import ParticipantAvatarGroup from "@/participant/ParticipantAvatarGroup.vue"
 import CaseApi from "@/case/api"

diff --git a/src/dispatch/static/dispatch/src/case/TimelineTab.vue b/src/dispatch/static/dispatch/src/case/TimelineTab.vue
@@ -107,7 +107,7 @@ const menu = ref(false)
           <v-row>
             <v-col cols="12">
               <div>
-                <span style="font-size: 0.75rem">
+                <span class="dispatch-text-paragraph">
                   <b>
                     {{ sourceIconMap[event.source]?.sourceName || event.source }}
                   </b>
@@ -135,25 +135,7 @@ const menu = ref(false)
   </v-container>
 </template>
 
-<style scoped src="@/styles/timeline.css">
-.cn-button {
-  border-radius: 4px !important;
-  font-weight: 500 !important;
-  line-height: normal !important;
-  border: 1px solid rgb(223, 225, 228) !important;
-  box-shadow: rgba(0, 0, 0, 0.09) 0px 1px 4px !important;
-  background-color: rgb(255, 255, 255) !important;
-  color: rgb(60, 65, 73) !important;
-  height: 28px !important;
-  padding: 0px 14px !important;
-}
-
-.dispatch-side-card {
-  backdrop-filter: blur(12px) saturate(190%) contrast(50%) brightness(130%) !important;
-  border: 0.5px solid rgb(216, 216, 216) !important;
-  border-radius: 8px !important;
-  box-shadow: rgba(0, 0, 0, 0.09) 0px 3px 12px !important;
-  color: rgb(60, 65, 73) !important;
-  opacity: 2 !important;
-}
+<style lang="scss" scoped>
+@import "@/styles/index.scss";
+@import "@/styles/timeline.css";
 </style>
diff --git a/src/dispatch/static/dispatch/src/case/priority/CasePrioritySearchPopover.vue b/src/dispatch/static/dispatch/src/case/priority/CasePrioritySearchPopover.vue
@@ -52,13 +52,11 @@ const selectCasePriority = async (casePriorityName: string) => {
     :hotkeys="[]"
   >
     <template v-slot:default="{ item }">
-      <v-list-item-title class="item-title-font">{{ item }}</v-list-item-title>
+      <v-list-item-title class="dispatch-text-title">{{ item }}</v-list-item-title>
     </template>
   </SearchPopover>
 </template>
 
-<style scoped>
-.item-title-font {
-  font-size: 13px !important;
-}
+<style lang="scss" scoped>
+@import "@/styles/index.scss";
 </style>
diff --git a/src/dispatch/static/dispatch/src/case/severity/CaseSeveritySearchPopover.vue b/src/dispatch/static/dispatch/src/case/severity/CaseSeveritySearchPopover.vue
@@ -52,13 +52,11 @@ const selectCaseSeverity = async (caseSeverityName: string) => {
     :hotkeys="[]"
   >
     <template v-slot:default="{ item }">
-      <v-list-item-title class="item-title-font">{{ item }}</v-list-item-title>
+      <v-list-item-title class="dispatch-text-title">{{ item }}</v-list-item-title>
     </template>
   </SearchPopover>
 </template>
 
-<style scoped>
-.item-title-font {
-  font-size: 13px !important;
-}
+<style lang="scss" scoped>
+@import "@/styles/index.scss";
 </style>
diff --git a/src/dispatch/static/dispatch/src/case/type/CaseTypeSearchPopover.vue b/src/dispatch/static/dispatch/src/case/type/CaseTypeSearchPopover.vue
@@ -52,13 +52,11 @@ const selectCaseType = async (caseTypeName: string) => {
     :hotkeys="[]"
   >
     <template v-slot:default="{ item }">
-      <v-list-item-title class="item-title-font">{{ item }}</v-list-item-title>
+      <v-list-item-title class="dispatch-text-title">{{ item }}</v-list-item-title>
     </template>
   </SearchPopover>
 </template>
 
-<style scoped>
-.item-title-font {
-  font-size: 13px !important;
-}
+<style lang="scss" scoped>
+@import "@/styles/index.scss";
 </style>
diff --git a/src/dispatch/static/dispatch/src/components/EscalateButton.vue b/src/dispatch/static/dispatch/src/components/EscalateButton.vue