Merge pull request #56 from buggregator/issue/#55-fix-preview-horizon…

…tal-scroll Issue/#55 fix preview horizontal scroll
buggregator · Oct 27, 2023 · 2653738 · 2653738
2 parents 9e202c6 + 0236555
commit 2653738
Show file tree

Hide file tree

Showing 7 changed files with 67 additions and 54 deletions.
diff --git a/components/RayDumpPreview/RayTypesPreview/CallerPayload.vue b/components/RayDumpPreview/RayTypesPreview/CallerPayload.vue
@@ -7,9 +7,9 @@
         file.line_number
       }`"
     >
-      <code class="ray-type-caller__code"
-        >{{ file.class || "null" }}:{{ file.method }}</code
-      >
+      <code class="ray-type-caller__code">
+        {{ file.class || "null" }}:{{ file.method }}
+      </code>
     </a>
   </div>
 </template>

diff --git a/components/RayDumpPreview/RayTypesPreview/EloquentPayload.vue b/components/RayDumpPreview/RayTypesPreview/EloquentPayload.vue
@@ -1,19 +1,22 @@
 <template>
   <div class="ray-type-model">
-    <h3>
-      Class name: <code>{{ payload.content.class_name }}</code>
+    <h3 class="ray-type-model__title">
+      Class name:
+      <code class="ray-type-model__title-in">
+        {{ payload.content.class_name }}
+      </code>
     </h3>
-    <ValueDump :value="payload.content.attributes"/>
+    <ValueDump :value="payload.content.attributes" />
   </div>
 </template>
 
 <script lang="ts">
-import {defineComponent, PropType} from "vue";
-import {RayPayload} from "~/config/types";
+import { defineComponent, PropType } from "vue";
+import { RayPayload } from "~/config/types";
 import ValueDump from "~/components/ValueDump/ValueDump.vue";
 
 export default defineComponent({
-  components: {ValueDump},
+  components: { ValueDump },
   props: {
     payload: {
       type: Object as PropType<RayPayload>,
@@ -27,11 +30,11 @@ export default defineComponent({
 .ray-type-model {
 }
 
-.ray-type-model h3 {
-  @apply p-3 border border-gray-300 dark:border-gray-600 bg-gray-800;
+.ray-type-model__title {
+  @apply p-3 border border-gray-300 dark:border-gray-600 bg-gray-800 flex w-full overflow-auto;
 }
 
-.ray-type-model code {
-  @apply font-semibold;
+.ray-type-model__title-in {
+  @apply font-semibold ml-1;
 }
 </style>
diff --git a/components/RayDumpPreview/RayTypesPreview/EventPayload.vue b/components/RayDumpPreview/RayTypesPreview/EventPayload.vue
@@ -1,20 +1,27 @@
 <template>
   <div class="ray-type-event">
-    <ValueDump v-if="payload.content.class_based_event" :value="payload.content.event"/>
-    <h3>
-      Event: <code>{{ payload.content.name }}</code>
+    <ValueDump
+      v-if="payload.content.class_based_event"
+      :value="payload.content.event"
+    />
+    <h3 class="ray-type-event__text">
+      Event:
+      <code class="ray-type-event__text-in">{{ payload.content.name }}</code>
     </h3>
-    <ValueDump v-if="payload.content.payload" :value="payload.content.payload"/>
+    <ValueDump
+      v-if="payload.content.payload"
+      :value="payload.content.payload"
+    />
   </div>
 </template>
 
 <script lang="ts">
-import {defineComponent, PropType} from "vue";
-import {RayPayload} from "~/config/types";
+import { defineComponent, PropType } from "vue";
+import { RayPayload } from "~/config/types";
 import ValueDump from "~/components/ValueDump/ValueDump.vue";
 
 export default defineComponent({
-  components: {ValueDump},
+  components: { ValueDump },
   props: {
     payload: {
       type: Object as PropType<RayPayload>,
@@ -28,11 +35,11 @@ export default defineComponent({
 .ray-type-event {
 }
 
-.ray-type-event h3 {
-  @apply p-3 border border-gray-300 dark:border-gray-600 bg-gray-800;
+.ray-type-event__text {
+  @apply p-3 border border-gray-300 dark:border-gray-600 bg-gray-800 flex w-full overflow-auto;
 }
 
-.ray-type-event code {
-  @apply font-semibold;
+.ray-type-event__text-in {
+  @apply font-semibold ml-1;
 }
 </style>
diff --git a/components/RayDumpPreview/RayTypesPreview/QueryPayload.vue b/components/RayDumpPreview/RayTypesPreview/QueryPayload.vue
@@ -1,11 +1,7 @@
 <template>
-  <div class="ray-type-query">
-    <CodeSnippet
-      language="sql"
-      class="event-ray__query-snippet"
-      :code="formattedSql"
-    />
-    <EventTable class="event-ray__query-table">
+  <div class="query-payload">
+    <CodeSnippet language="sql" :code="formattedSql" />
+    <EventTable>
       <EventTableRow title="Connection name">
         {{ payload.content.connection_name }}
       </EventTableRow>
@@ -36,12 +32,16 @@ export default defineComponent({
   computed: {
     formattedSql() {
       return (this.payload.content?.bindings || []).reduce(
-        (result, binding) => result.replace(/\?/, `'${binding}'`),
+        (result, binding) => (result || "").replace(/\?/, `'${binding}'`),
         this.payload.content?.sql || ""
       );
     },
   },
 });
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.query-payload {
+  width: 100%;
+}
+</style>
diff --git a/components/RayDumpTypeMapper/RayDumpTypeMapper.vue b/components/RayDumpTypeMapper/RayDumpTypeMapper.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
-import {defineComponent, h, PropType} from "vue";
-import {RayPayload} from "~/config/types";
-import {RAY_EVENT_TYPES} from "~/config/constants";
+import { defineComponent, h, PropType } from "vue";
+import { RayPayload } from "~/config/types";
+import { RAY_EVENT_TYPES } from "~/config/constants";
 
 import LogPayload from "~/components/RayDumpPreview/RayTypesPreview/LogPayload.vue";
 import CustomPayload from "~/components/RayDumpPreview/RayTypesPreview/CustomPayload.vue";
@@ -11,6 +11,7 @@ import TracePayload from "~/components/RayDumpPreview/RayTypesPreview/TracePaylo
 import ExceptionPayload from "~/components/RayDumpPreview/RayTypesPreview/ExceptionPayload.vue";
 import TablePayload from "~/components/RayDumpPreview/RayTypesPreview/TablePayload.vue";
 import MeasurePayload from "~/components/RayDumpPreview/RayTypesPreview/MeasurePayload.vue";
+import NotifyPayload from "~/components/RayDumpPreview/RayTypesPreview/NotifyPayload.vue";
 import QueryPayload from "~/components/RayDumpPreview/RayTypesPreview/QueryPayload.vue";
 import EloquentPayload from "~/components/RayDumpPreview/RayTypesPreview/EloquentPayload.vue";
 import ViewsPayload from "~/components/RayDumpPreview/RayTypesPreview/ViewsPayload.vue";
@@ -29,38 +30,40 @@ export default defineComponent({
   render() {
     const TYPE_RENDER_MAP = {
       [RAY_EVENT_TYPES.LOG]: (payload: RayPayload) =>
-        h(LogPayload, {payload}),
+        h(LogPayload, { payload }),
       [RAY_EVENT_TYPES.CUSTOM]: (payload: RayPayload) =>
-        h(CustomPayload, {payload}),
+        h(CustomPayload, { payload }),
       [RAY_EVENT_TYPES.CALLER]: (payload: RayPayload) =>
-        h(CallerPayload, {payload}),
+        h(CallerPayload, { payload }),
       [RAY_EVENT_TYPES.CARBON]: (payload: RayPayload) =>
-        h(CarbonPayload, {payload}),
+        h(CarbonPayload, { payload }),
       [RAY_EVENT_TYPES.TRACE]: (payload: RayPayload) =>
-        h(TracePayload, {payload}),
+        h(TracePayload, { payload }),
       [RAY_EVENT_TYPES.EXCEPTION]: (payload: RayPayload) =>
-        h(ExceptionPayload, {payload}),
+        h(ExceptionPayload, { payload }),
       [RAY_EVENT_TYPES.TABLE]: (payload: RayPayload) =>
-        h(TablePayload, {payload}),
+        h(TablePayload, { payload }),
       [RAY_EVENT_TYPES.MEASURE]: (payload: RayPayload) =>
-        h(MeasurePayload, {payload}),
+        h(MeasurePayload, { payload }),
       [RAY_EVENT_TYPES.QUERY]: (payload: RayPayload) =>
-        h(QueryPayload, {payload}),
+        h(QueryPayload, { payload }),
       [RAY_EVENT_TYPES.ELOQUENT]: (payload: RayPayload) =>
-        h(EloquentPayload, {payload}),
+        h(EloquentPayload, { payload }),
       [RAY_EVENT_TYPES.VIEW]: (payload: RayPayload) =>
-        h(ViewsPayload, {payload}),
+        h(ViewsPayload, { payload }),
       [RAY_EVENT_TYPES.EVENT]: (payload: RayPayload) =>
-        h(EventPayload, {payload}),
+        h(EventPayload, { payload }),
       [RAY_EVENT_TYPES.JOB]: (payload: RayPayload) =>
-        h(JobPayload, {payload}),
+        h(JobPayload, { payload }),
       [RAY_EVENT_TYPES.LOCK]: (payload: RayPayload) =>
-        h(LockPayload, {payload}),
+        h(LockPayload, { payload }),
       [RAY_EVENT_TYPES.MAILABLE]: (payload: RayPayload) =>
-        h(MailablePayload, {payload}),
+        h(MailablePayload, { payload }),
+      [RAY_EVENT_TYPES.NOTIFY]: (payload: RayPayload) =>
+        h(NotifyPayload, { payload }),
     };
 
-    if (this.payload.type === 'hide') {
+    if (this.payload.type === "hide") {
       this.$emit("toggleView", true);
     }
 

diff --git a/components/SentryPreview/SentryPreview.vue b/components/SentryPreview/SentryPreview.vue
@@ -95,7 +95,7 @@ export default defineComponent({
 
 .sentry-preview__text {
   @include text-muted;
-  @apply text-sm break-all mb-3 p-3 dark:bg-gray-800;
+  @apply text-sm break-all mb-3 p-3 dark:bg-gray-800 overflow-auto;
 }
 
 .sentry-preview__frames {

diff --git a/config/constants.ts b/config/constants.ts
@@ -22,7 +22,7 @@ export const RAY_EVENT_TYPES = {
   EXCEPTION: "exception",
   // HIDE: "hide",
   MEASURE: "measure",
-  // NOTIFY: "notify",
+  NOTIFY: "notify",
   MAILABLE: "mailable",
   TABLE: "table",
   TRACE: "trace",