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

@@ -0,0 +1,7 @@
+---
+"@directus/app": patch
+"@directus/api": patch
+"@directus/extensions": patch
+---
+
+Made extension versions visible in new extension panel

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'),
 			};
 		});

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>

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'>;
 }