diff --git a/.changeset/lucky-adults-talk.md b/.changeset/lucky-adults-talk.md
new file mode 100644
index 0000000000..66e30af2dc
--- /dev/null
+++ b/.changeset/lucky-adults-talk.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-catalog': patch
+---
+
+Added Kind field to the About Card. Tags moved before Type and Lifecycle, Kind placed after them. A new `aboutCard.kindField.label` translation key was added.
diff --git a/plugins/catalog/report-alpha.api.md b/plugins/catalog/report-alpha.api.md
index d41cff916f..b535c9bd81 100644
--- a/plugins/catalog/report-alpha.api.md
+++ b/plugins/catalog/report-alpha.api.md
@@ -67,6 +67,7 @@ export const catalogTranslationRef: TranslationRef<
readonly 'aboutCard.systemField.label': 'System';
readonly 'aboutCard.parentComponentField.value': 'No Parent Component';
readonly 'aboutCard.parentComponentField.label': 'Parent Component';
+ readonly 'aboutCard.kindField.label': 'Kind';
readonly 'aboutCard.typeField.label': 'Type';
readonly 'aboutCard.lifecycleField.label': 'Lifecycle';
readonly 'aboutCard.tagsField.value': 'No Tags';
diff --git a/plugins/catalog/report.api.md b/plugins/catalog/report.api.md
index 84d9a8bd91..3c88849706 100644
--- a/plugins/catalog/report.api.md
+++ b/plugins/catalog/report.api.md
@@ -251,6 +251,7 @@ export const catalogTranslationRef: TranslationRef<
readonly 'aboutCard.systemField.label': 'System';
readonly 'aboutCard.parentComponentField.value': 'No Parent Component';
readonly 'aboutCard.parentComponentField.label': 'Parent Component';
+ readonly 'aboutCard.kindField.label': 'Kind';
readonly 'aboutCard.typeField.label': 'Type';
readonly 'aboutCard.lifecycleField.label': 'Lifecycle';
readonly 'aboutCard.tagsField.value': 'No Tags';
diff --git a/plugins/catalog/src/alpha/translation.ts b/plugins/catalog/src/alpha/translation.ts
index 19738844e4..ef35cece84 100644
--- a/plugins/catalog/src/alpha/translation.ts
+++ b/plugins/catalog/src/alpha/translation.ts
@@ -61,6 +61,9 @@ export const catalogTranslationRef = createTranslationRef({
label: 'Parent Component',
value: 'No Parent Component',
},
+ kindField: {
+ label: 'Kind',
+ },
typeField: {
label: 'Type',
},
diff --git a/plugins/catalog/src/components/AboutCard/AboutContent.test.tsx b/plugins/catalog/src/components/AboutCard/AboutContent.test.tsx
index d91d5e96d9..4f6d12cbc1 100644
--- a/plugins/catalog/src/components/AboutCard/AboutContent.test.tsx
+++ b/plugins/catalog/src/components/AboutCard/AboutContent.test.tsx
@@ -83,6 +83,8 @@ describe('', () => {
expect(screen.getByText('Type').nextSibling).toHaveTextContent('t');
expect(screen.getByText('Lifecycle')).toBeInTheDocument();
expect(screen.getByText('Lifecycle').nextSibling).toHaveTextContent('l');
+ expect(screen.getByText('Kind')).toBeInTheDocument();
+ expect(screen.getByText('Kind').nextSibling).toHaveTextContent('Unknown');
expect(screen.getByText('Tags')).toBeInTheDocument();
expect(screen.getByText('Tags').nextSibling).toHaveTextContent('tag-1');
});
@@ -111,6 +113,7 @@ describe('', () => {
expect(screen.queryByText('Parent Component')).not.toBeInTheDocument();
expect(screen.queryByText('Type')).not.toBeInTheDocument();
expect(screen.queryByText('Lifecycle')).not.toBeInTheDocument();
+ expect(screen.getByText('Kind')).toBeInTheDocument();
});
});
@@ -362,7 +365,9 @@ describe('', () => {
expect(screen.getByText('Owner').nextSibling).toHaveTextContent(
'user:guest',
);
- expect(screen.queryByText('Domain')).not.toBeInTheDocument();
+ expect(
+ screen.queryByRole('heading', { name: 'Domain' }),
+ ).not.toBeInTheDocument();
expect(screen.queryByText('System')).not.toBeInTheDocument();
expect(screen.queryByText('Parent Component')).not.toBeInTheDocument();
expect(screen.queryByText('Type')).not.toBeInTheDocument();
@@ -389,7 +394,9 @@ describe('', () => {
expect(screen.getByText('Owner').nextSibling).toHaveTextContent(
'No Owner',
);
- expect(screen.queryByText('Domain')).not.toBeInTheDocument();
+ expect(
+ screen.queryByRole('heading', { name: 'Domain' }),
+ ).not.toBeInTheDocument();
expect(screen.queryByText('System')).not.toBeInTheDocument();
expect(screen.queryByText('Parent Component')).not.toBeInTheDocument();
expect(screen.queryByText('Type')).not.toBeInTheDocument();
@@ -617,7 +624,9 @@ describe('', () => {
expect(screen.getByText('Domain').nextSibling).toHaveTextContent(
'domain',
);
- expect(screen.queryByText('System')).not.toBeInTheDocument();
+ expect(
+ screen.queryByRole('heading', { name: 'System' }),
+ ).not.toBeInTheDocument();
expect(screen.queryByText('Parent Component')).not.toBeInTheDocument();
expect(screen.queryByText('Type')).not.toBeInTheDocument();
expect(screen.queryByText('Lifecycle')).not.toBeInTheDocument();
@@ -648,7 +657,9 @@ describe('', () => {
expect(screen.getByText('Domain').nextSibling).toHaveTextContent(
'No Domain',
);
- expect(screen.queryByText('System')).not.toBeInTheDocument();
+ expect(
+ screen.queryByRole('heading', { name: 'System' }),
+ ).not.toBeInTheDocument();
expect(screen.queryByText('Parent Component')).not.toBeInTheDocument();
expect(screen.queryByText('Type')).not.toBeInTheDocument();
expect(screen.queryByText('Lifecycle')).not.toBeInTheDocument();
diff --git a/plugins/catalog/src/components/AboutCard/AboutContent.tsx b/plugins/catalog/src/components/AboutCard/AboutContent.tsx
index eff9ae7da3..18d17d06da 100644
--- a/plugins/catalog/src/components/AboutCard/AboutContent.tsx
+++ b/plugins/catalog/src/components/AboutCard/AboutContent.tsx
@@ -178,6 +178,15 @@ export function AboutContent(props: AboutContentProps) {
/>
)}
+
+ {(entity?.metadata?.tags || []).map(tag => (
+
+ ))}
+
+
{(isAPI ||
isComponent ||
isResource ||
@@ -198,14 +207,6 @@ export function AboutContent(props: AboutContentProps) {
value={entity?.spec?.lifecycle as string}
/>
)}
-
- {(entity?.metadata?.tags || []).map(tag => (
-
- ))}
-
{isLocation && (entity?.spec?.targets || entity?.spec?.target) && (