From 9845558c83246969bc3d8c0608f74c4233c03092 Mon Sep 17 00:00:00 2001
From: Marichka Offen <40467112+marichka-offen@users.noreply.github.com>
Date: Wed, 1 Feb 2023 17:41:47 -0500
Subject: [PATCH] Update CodeSnippet and fix odd issue with extra space on
 flowRun page (#8359)

---
 orion-ui/src/pages/Deployment.vue | 4 ++--
 orion-ui/src/pages/FlowRun.vue    | 8 ++++++--
 orion-ui/src/pages/TaskRun.vue    | 4 ++--
 3 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/orion-ui/src/pages/Deployment.vue b/orion-ui/src/pages/Deployment.vue
index 02e6a36374bc..c2f0e64d0e02 100644
--- a/orion-ui/src/pages/Deployment.vue
+++ b/orion-ui/src/pages/Deployment.vue
@@ -27,7 +27,7 @@
       </template>
 
       <template #infra-overrides>
-        <CodeHighlighting v-if="deployment" language="json" :value="overrides" />
+        <CodeSnippet v-if="deployment" language="json" :snippet="overrides" />
       </template>
 
       <template #details>
@@ -51,7 +51,7 @@
 </template>
 
 <script lang="ts" setup>
-  import { DeploymentDescription, FlowRunFilteredList, DeploymentDescriptionEmptyState, DeploymentDeprecatedMessage, PageHeadingDeployment, DeploymentDetails, ParametersTable, localization, useRecentFlowRunFilter, useTabs, useWorkspaceApi, CodeHighlighting } from '@prefecthq/orion-design'
+  import { DeploymentDescription, FlowRunFilteredList, DeploymentDescriptionEmptyState, DeploymentDeprecatedMessage, PageHeadingDeployment, DeploymentDetails, ParametersTable, localization, useRecentFlowRunFilter, useTabs, useWorkspaceApi, CodeSnippet } from '@prefecthq/orion-design'
   import { media } from '@prefecthq/prefect-design'
   import { useSubscription, useRouteParam } from '@prefecthq/vue-compositions'
   import { computed, watch } from 'vue'
diff --git a/orion-ui/src/pages/FlowRun.vue b/orion-ui/src/pages/FlowRun.vue
index c8a5f85ef2a4..375aa9d1aa5a 100644
--- a/orion-ui/src/pages/FlowRun.vue
+++ b/orion-ui/src/pages/FlowRun.vue
@@ -24,7 +24,7 @@
       </template>
 
       <template #parameters>
-        <CodeHighlighting language="json" :value="parameters" />
+        <CodeSnippet language="json" :snippet="parameters" />
       </template>
     </p-tabs>
 
@@ -44,7 +44,7 @@
     FlowRunTaskRuns,
     FlowRunTimeline,
     FlowRunSubFlows,
-    CodeHighlighting,
+    CodeSnippet,
     useFavicon,
     useWorkspaceApi,
     useDeployment,
@@ -109,6 +109,10 @@
 </script>
 
 <style>
+.flow-run { @apply
+  items-start
+}
+
 .flow-run__logs { @apply
   max-h-screen
 }
diff --git a/orion-ui/src/pages/TaskRun.vue b/orion-ui/src/pages/TaskRun.vue
index 8854effa1e32..98a5d11e207f 100644
--- a/orion-ui/src/pages/TaskRun.vue
+++ b/orion-ui/src/pages/TaskRun.vue
@@ -14,7 +14,7 @@
       </template>
 
       <template #task-inputs>
-        <CodeHighlighting language="json" :value="parameters" />
+        <CodeSnippet language="json" :snippet="parameters" />
       </template>
     </p-tabs>
     <template #well>
@@ -24,7 +24,7 @@
 </template>
 
 <script lang="ts" setup>
-  import { PageHeadingTaskRun, TaskRunLogs, TaskRunDetails, CodeHighlighting, useFavicon, useWorkspaceApi } from '@prefecthq/orion-design'
+  import { PageHeadingTaskRun, TaskRunLogs, TaskRunDetails, CodeSnippet, useFavicon, useWorkspaceApi } from '@prefecthq/orion-design'
   import { media } from '@prefecthq/prefect-design'
   import { useRouteParam, useSubscriptionWithDependencies } from '@prefecthq/vue-compositions'
   import { computed } from 'vue'