From fd6eff4a5aeaed4426475ade657ec8cbc913d748 Mon Sep 17 00:00:00 2001
From: Brainslug <br41nslug@users.noreply.github.com>
Date: Wed, 8 Nov 2023 21:55:43 +0100
Subject: [PATCH] Show package version if available (#20303)

* Show package version if available

* Create nice-bottles-flow.md

* Colorize state chip

---------

Co-authored-by: Pascal Jufer <pascal-jufer@bluewin.ch>
---
 .changeset/nice-bottles-flow.md               |  7 +++++++
 api/src/services/extensions.ts                |  2 +-
 .../extensions/components/extension-item.vue  | 19 ++++++++++++++++++-
 packages/extensions/src/shared/types/api.ts   |  4 +---
 4 files changed, 27 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/nice-bottles-flow.md

diff --git a/.changeset/nice-bottles-flow.md b/.changeset/nice-bottles-flow.md
new file mode 100644
index 0000000000..12213b6980
--- /dev/null
+++ b/.changeset/nice-bottles-flow.md
@@ -0,0 +1,7 @@
+---
+"@directus/app": patch
+"@directus/api": patch
+"@directus/extensions": patch
+---
+
+Made extension versions visible in new extension panel
diff --git a/api/src/services/extensions.ts b/api/src/services/extensions.ts
index 14ddc321ee..7d6d928a27 100644
--- a/api/src/services/extensions.ts
+++ b/api/src/services/extensions.ts
@@ -164,7 +164,7 @@ export class ExtensionsService {
 			return {
 				name,
 				bundle: bundleName,
-				schema: schema ? pick(schema, 'type', 'local') : null,
+				schema: schema ? pick(schema, 'type', 'local', 'version') : null,
 				meta: omit(meta, 'name'),
 			};
 		});
diff --git a/app/src/modules/settings/routes/extensions/components/extension-item.vue b/app/src/modules/settings/routes/extensions/components/extension-item.vue
index 2e1f531b9e..de2ed00cd0 100644
--- a/app/src/modules/settings/routes/extensions/components/extension-item.vue
+++ b/app/src/modules/settings/routes/extensions/components/extension-item.vue
@@ -49,10 +49,13 @@ const toggleEnabled = async () => {
 	<v-list-item block :class="{ disabled: !extension.meta.enabled }">
 		<v-list-item-icon v-tooltip="t(`extension_${type}`)"><v-icon :name="icon" small /></v-list-item-icon>
 		<v-list-item-content class="monospace">{{ extension.name }}</v-list-item-content>
+		<v-chip v-if="extension.schema?.version" class="version" small>{{ extension.schema.version }}</v-chip>
 
 		<template v-if="extension.schema?.type !== 'bundle'">
 			<v-progress-circular v-if="changingEnabledState" indeterminate />
-			<v-chip v-else small>{{ extension.meta.enabled ? t('enabled') : t('disabled') }}</v-chip>
+			<v-chip v-else class="state" :class="{ enabled: extension.meta.enabled }" small>
+				{{ extension.meta.enabled ? t('enabled') : t('disabled') }}
+			</v-chip>
 			<extension-item-options
 				class="options"
 				:name="extension.name"
@@ -89,4 +92,18 @@ const toggleEnabled = async () => {
 .options {
 	margin-left: 12px;
 }
+
+.version {
+	margin-right: 8px;
+}
+
+.state {
+	--v-chip-color: var(--theme--danger);
+	--v-chip-background-color: var(--theme--danger-background);
+
+	&.enabled {
+		--v-chip-color: var(--theme--success);
+		--v-chip-background-color: var(--theme--success-background);
+	}
+}
 </style>
diff --git a/packages/extensions/src/shared/types/api.ts b/packages/extensions/src/shared/types/api.ts
index f275c1fcaa..f057ac597c 100644
--- a/packages/extensions/src/shared/types/api.ts
+++ b/packages/extensions/src/shared/types/api.ts
@@ -1,14 +1,12 @@
 import type { Extension } from './extension-types.js';
 import type { ExtensionSettings } from './settings.js';
 
-type SchemaFields = 'type' | 'local';
-
 /**
  * The API output structure used when engaging with the /extensions endpoints
  */
 export interface ApiOutput {
 	name: string;
 	bundle: string | null;
-	schema: Pick<Extension, SchemaFields> | null;
+	schema: Partial<Extension> | null;
 	meta: Omit<ExtensionSettings, 'name'>;
 }