Implement Data-Center UI (#2599)

Author: asmasarw

workspaces/dcm/.changeset/clean-styles-brave-logos.md

@@ -0,0 +1,5 @@
+---
+'@red-hat-developer-hub/backstage-plugin-dcm': patch
+---
+
+UI code-quality improvements: replace all inline styles with makeStyles classes, use theme palette tokens (status.ok, error, text) instead of hardcoded colours, merge duplicate style files into a single useDcmStyles hook, add destructive-action styling to delete dialogs, and move RhdhLogoFull/RhdhLogoIcon into the plugin so they can be wired in RHDH without relying on the dev-only app shell.

workspaces/dcm/.changeset/funny-eagles-drum.md

@@ -0,0 +1,5 @@
+---
+'@red-hat-developer-hub/backstage-plugin-dcm': patch
+---
+
+Refresh DCM plugin API reports and align UI internals around shared route/tab constants and reusable detail components.

workspaces/dcm/app-config.yaml

@@ -60,6 +60,12 @@ permission:
 
 scaffolder: {}
 
+dcm:
+  policyPacks:
+    - security-baseline
+    - compliance-pci
+    - audit-logging
+
 catalog:
   import:
     entityFilename: catalog-info.yaml

workspaces/dcm/packages/app/src/App.tsx

@@ -122,7 +122,7 @@ const routes = (
     </Route>
     <Route path="/settings" element={<UserSettingsPage />} />
     <Route path="/catalog-graph" element={<CatalogGraphPage />} />
-    <Route path="/dcm" element={<DcmPage />} />
+    <Route path="/dcm/*" element={<DcmPage />} />
     <Route path="/rbac" element={<RbacPage />} />
   </FlatRoutes>
 );

workspaces/dcm/packages/app/src/components/Root/Root.tsx

@@ -47,6 +47,7 @@ import ChevronRightIcon from '@material-ui/icons/ChevronRight';
 import LogoFull from './LogoFull';
 import LogoIcon from './LogoIcon';
 import { useRhdhTheme } from '../../hooks/useRhdhTheme';
+import { usePatternFlyTheme } from '../../hooks/usePatternFlyTheme';
 
 /** Returns true when the theme palette is in dark mode (supports both MUI v4 type and v5 mode). */
 function isPaletteDark(palette: { type?: string; mode?: string }): boolean {
@@ -232,6 +233,7 @@ const SidebarLogo = () => {
 export const Root = ({ children }: PropsWithChildren<{}>) => {
   const classes = useSidebarItemStyles();
   const location = useLocation();
+  usePatternFlyTheme();
   const isDcmActive = location.pathname.startsWith('/dcm');
   const isRbacActive = location.pathname.startsWith('/rbac');
 

workspaces/dcm/packages/app/src/hooks/usePatternFlyTheme.ts

@@ -0,0 +1,36 @@
+/*
+ * Copyright Red Hat, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useEffect } from 'react';
+import { useIsDarkMode } from '@red-hat-developer-hub/backstage-plugin-dcm';
+
+/**
+ * Hook to automatically sync Backstage theme with PatternFly dark theme.
+ * Applies 'pf-v6-theme-dark' class to HTML element when Backstage is in dark mode.
+ */
+export const usePatternFlyTheme = () => {
+  const isDark = useIsDarkMode();
+
+  useEffect(() => {
+    // Apply PatternFly dark theme class to HTML when Backstage is in dark mode
+    const html = document.documentElement;
+    if (isDark) {
+      html.classList.add('pf-v6-theme-dark');
+    } else {
+      html.classList.remove('pf-v6-theme-dark');
+    }
+  }, [isDark]);
+};

workspaces/dcm/packages/app/src/hooks/useRhdhTheme.ts

@@ -15,8 +15,10 @@
  */
 
 import { getThemes } from '@red-hat-developer-hub/backstage-plugin-theme';
-import LogoFull from '../components/rhdh-logo/RhdhLogoFull';
-import RhdhLogoIcon from '../components/rhdh-logo/RhdhLogoIcon';
+import {
+  RhdhLogoFull,
+  RhdhLogoIcon,
+} from '@red-hat-developer-hub/backstage-plugin-dcm';
 
 /**
  * Change this value to `true` if you want to use the RHDH theme.
@@ -26,8 +28,8 @@ const ENABLE_RHDH_THEME = true;
 export function useRhdhTheme() {
   return ENABLE_RHDH_THEME
     ? ({
-        RhdhLogoFull: LogoFull,
-        RhdhLogoIcon: RhdhLogoIcon,
+        RhdhLogoFull,
+        RhdhLogoIcon,
         get themes() {
           return getThemes();
         },

workspaces/dcm/plugins/dcm-common/report.api.md

@@ -8,9 +8,30 @@ import { BasicPermission } from '@backstage/plugin-permission-common';
 // @public
 export const DCM_COMMON_PLUGIN_ID: 'dcm';
 
+// @public
+export const DCM_ENTITY_STATUS: {
+  readonly success: 'success';
+  readonly running: 'running';
+};
+
+// @public
+export const DCM_ENTITY_STATUS_VALUES: readonly DcmEntityStatus[];
+
+// @public
+export type DcmEntityStatus = 'success' | 'running';
+
 // @public
 export const dcmPluginPermissions: BasicPermission[];
 
 // @public
 export const dcmPluginReadPermission: BasicPermission;
+
+// @public
+export function displayDcmEntityStatus(status: DcmEntityStatus): string;
+
+// @public
+export function displayDcmEntityStatusLoose(raw: string): string;
+
+// @public
+export function parseDcmEntityStatus(raw: string): DcmEntityStatus | undefined;
 ```

workspaces/dcm/plugins/dcm-common/src/entityStatus.test.ts

@@ -0,0 +1,50 @@
+/*
+ * Copyright Red Hat, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {
+  DCM_ENTITY_STATUS,
+  DCM_ENTITY_STATUS_VALUES,
+  displayDcmEntityStatus,
+  displayDcmEntityStatusLoose,
+  parseDcmEntityStatus,
+} from './entityStatus';
+
+describe('entityStatus', () => {
+  it('maps every known status to a non-empty display label', () => {
+    for (const status of DCM_ENTITY_STATUS_VALUES) {
+      expect(displayDcmEntityStatus(status).length).toBeGreaterThan(0);
+    }
+  });
+
+  it('displays success and running with expected UI labels', () => {
+    expect(displayDcmEntityStatus(DCM_ENTITY_STATUS.success)).toBe('Success');
+    expect(displayDcmEntityStatus(DCM_ENTITY_STATUS.running)).toBe('Running');
+  });
+
+  it('parses known lowercase values', () => {
+    expect(parseDcmEntityStatus('success')).toBe(DCM_ENTITY_STATUS.success);
+    expect(parseDcmEntityStatus('running')).toBe(DCM_ENTITY_STATUS.running);
+  });
+
+  it('rejects legacy / wrong casing', () => {
+    expect(parseDcmEntityStatus('Success')).toBeUndefined();
+  });
+
+  it('displayDcmEntityStatusLoose falls back for unknown', () => {
+    expect(displayDcmEntityStatusLoose('success')).toBe('Success');
+    expect(displayDcmEntityStatusLoose('unknown-state')).toBe('unknown-state');
+  });
+});

workspaces/dcm/plugins/dcm-common/src/entityStatus.ts

@@ -0,0 +1,78 @@
+/*
+ * Copyright Red Hat, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * Wire / storage form of entity status (lowercase).
+ *
+ * @public
+ */
+export type DcmEntityStatus = 'success' | 'running';
+
+/**
+ * Canonical lowercase entity status values for DCM data (mock, API, DB).
+ * Use {@link displayDcmEntityStatus} for user-visible labels in the UI.
+ *
+ * When adding a status: extend {@link DcmEntityStatus}, add an entry here, and add a branch in
+ * {@link displayDcmEntityStatus} (`assertNever` catches missing switch cases).
+ *
+ * @public
+ */
+export const DCM_ENTITY_STATUS = {
+  success: 'success',
+  running: 'running',
+} as const satisfies Record<DcmEntityStatus, DcmEntityStatus>;
+
+/** All known {@link DcmEntityStatus} values (for guards / tests). @public */
+export const DCM_ENTITY_STATUS_VALUES: readonly DcmEntityStatus[] =
+  Object.freeze(Object.values(DCM_ENTITY_STATUS) as DcmEntityStatus[]);
+
+function assertNever(x: never): never {
+  throw new Error(`Unexpected entity status: ${String(x)}`);
+}
+
+/**
+ * Human-readable label for UI (e.g. table cells).
+ * @public
+ */
+export function displayDcmEntityStatus(status: DcmEntityStatus): string {
+  switch (status) {
+    case DCM_ENTITY_STATUS.success:
+      return 'Success';
+    case DCM_ENTITY_STATUS.running:
+      return 'Running';
+    default:
+      return assertNever(status);
+  }
+}
+
+/**
+ * Parse wire / JSON values; returns `undefined` if not a known status.
+ * @public
+ */
+export function parseDcmEntityStatus(raw: string): DcmEntityStatus | undefined {
+  return (DCM_ENTITY_STATUS_VALUES as readonly string[]).includes(raw)
+    ? (raw as DcmEntityStatus)
+    : undefined;
+}
+
+/**
+ * Display for possibly unknown wire values — falls back to the raw string.
+ * @public
+ */
+export function displayDcmEntityStatusLoose(raw: string): string {
+  const parsed = parseDcmEntityStatus(raw);
+  return parsed === undefined ? raw : displayDcmEntityStatus(parsed);
+}