fix revision drawer for create events (#8066)

Co-authored-by: rijkvanzanten <rijkvanzanten@me.com>

app/src/lang/translations/en-US.yaml

@@ -29,6 +29,7 @@ tile_size: Tile Size
 edit_field: Edit Field
 conditions: Conditions
 maps: Maps
+item_creation: Item Creation
 item_revision: Item Revision
 enter_a_name: Enter a Name...
 duplicate_field: Duplicate Field
@@ -154,6 +155,7 @@ fields_for_role: 'Fields the {role} Role can {action}.'
 validation_for_role: 'Field {action} rules the {role} Role must obey.'
 presets_for_role: 'Field value defaults for the {role} Role.'
 presentation_and_aliases: Presentation & Aliases
+revision_post_create: Here is what this item looked like when it was created.
 revision_post_update: Here is what this item looked like after the update.
 changes_made: Below are the specific changes made in this revision.
 no_relational_data: Keep in mind that relational data is not included here.
@@ -290,6 +292,7 @@ revision_delta_reverted: Reverted
 revision_delta_other: Revision
 revision_delta_by: '{date} by {user}'
 private_user: Private User
+creation_preview: Creation Preview
 revision_preview: Revision Preview
 updates_made: Updates Made
 leave_comment: Leave a comment...

app/src/views/private/components/revisions-drawer-detail/revisions-drawer-preview.vue

@@ -1,7 +1,7 @@
 <template>
 	<div>
 		<v-notice type="info">
-			{{ t('revision_post_update') }}
+			{{ revision.activity.action === 'create' ? t('revision_post_create') : t('revision_post_update') }}
 			<br />
 			{{ t('no_relational_data') }}
 		</v-notice>

app/src/views/private/components/revisions-drawer-detail/revisions-drawer.vue

@@ -2,7 +2,7 @@
 	<div>
 		<v-drawer
 			v-model="internalActive"
-			:title="t('item_revision')"
+			:title="title"
 			icon="change_history"
 			:sidebar-label="t(currentTab[0])"
 			@cancel="internalActive = false"
@@ -42,7 +42,7 @@
 
 <script lang="ts">
 import { useI18n } from 'vue-i18n';
-import { defineComponent, PropType, computed, ref } from 'vue';
+import { defineComponent, PropType, computed, ref, watchEffect } from 'vue';
 import { useSync } from '@directus/shared/composables';
 import { Revision } from './types';
 import RevisionsDrawerPicker from './revisions-drawer-picker.vue';
@@ -75,6 +75,10 @@ export default defineComponent({
 
 		const currentTab = ref(['updates_made']);
 
+		const title = computed(() => {
+			return currentRevision.value?.activity.action === 'create' ? t('item_creation') : t('item_revision');
+		});
+
 		const currentRevision = computed(() => {
 			return props.revisions.find((revision) => revision.id === props.current);
 		});
@@ -86,18 +90,29 @@ export default defineComponent({
 			return props.revisions[currentIndex + 1];
 		});
 
-		const tabs = [
-			{
-				text: t('updates_made'),
-				value: 'updates_made',
-			},
-			{
-				text: t('revision_preview'),
-				value: 'revision_preview',
-			},
-		];
+		const tabs = computed(() => {
+			return currentRevision.value?.activity.action === 'create'
+				? [
+						{
+							text: t('creation_preview'),
+							value: 'revision_preview',
+						},
+				  ]
+				: [
+						{
+							text: t('updates_made'),
+							value: 'updates_made',
+						},
+						{
+							text: t('revision_preview'),
+							value: 'revision_preview',
+						},
+				  ];
+		});
 
-		return { t, internalActive, internalCurrent, currentRevision, currentTab, tabs, revert };
+		watchEffect(() => (currentTab.value = [tabs.value[0].value]));
+
+		return { t, internalActive, internalCurrent, title, currentRevision, currentTab, tabs, revert };
 
 		function revert() {
 			if (!currentRevision.value) return;