feat: Use PF Labels in Workspace details

Signed-off-by: Charles Thao <[email protected]>

Author: thaorell

workspaces/frontend/src/app/pages/Workspaces/Details/WorkspaceDetailsOverview.tsx

@@ -6,6 +6,7 @@ import {
   DescriptionListDescription,
 } from '@patternfly/react-core/dist/esm/components/DescriptionList';
 import { Divider } from '@patternfly/react-core/dist/esm/components/Divider';
+import { Label } from '@patternfly/react-core/dist/esm/components/Label';
 import { WorkspacesWorkspace } from '~/generated/data-contracts';
 
 type WorkspaceDetailsOverviewProps = {
@@ -29,9 +30,11 @@ export const WorkspaceDetailsOverview: React.FunctionComponent<WorkspaceDetailsO
     <DescriptionListGroup>
       <DescriptionListTerm>Labels</DescriptionListTerm>
       <DescriptionListDescription>
-        {Object.entries(workspace.podTemplate.podMetadata.labels)
-          .map(([key, value]) => `${key}=${value}`)
-          .join(', ')}
+        {Object.entries(workspace.podTemplate.podMetadata.labels).map(([key, value]) => (
+          <Label key={key} style={{ margin: '0.10rem' }}>
+            {key}={value}
+          </Label>
+        ))}
       </DescriptionListDescription>
     </DescriptionListGroup>
     <Divider />