NIFI-15920 improve accesibility around connector state text in listing

nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/connectors/ui/connector-table/connector-table.component.html

@@ -74,11 +74,16 @@
                 <th mat-header-cell *matHeaderCellDef mat-sort-header>State</th>
                 <td mat-cell *matCellDef="let item" data-qa="connector-state-cell">
                     <div class="inline-flex items-center gap-x-2">
-                        <span [title]="formatState(item)">{{ formatState(item) }}</span>
+                        @if (canRead(item)) {
+                            <status-badge
+                                [label]="formatState(item)"
+                                [variant]="getStateVariant(item)"
+                                data-qa="connector-state">
+                            </status-badge>
+                        }
                         @if (canRead(item) && canDiscardConfig(item)) {
-                            <span class="caution-color text-xs font-medium" data-qa="edits-not-applied-badge"
-                                >(Edits not applied)</span
-                            >
+                            <status-badge label="Edits not applied" variant="caution" data-qa="edits-not-applied-badge">
+                            </status-badge>
                         }
                     </div>
                 </td>

nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/connectors/ui/connector-table/connector-table.component.scss

@@ -14,13 +14,3 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
-.connector-table {
-    .listing-table {
-        table {
-            .mat-column-moreDetails {
-                width: 74px;
-            }
-        }
-    }
-}

nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/connectors/ui/connector-table/connector-table.component.ts

@@ -24,8 +24,11 @@ import { MatTooltipModule } from '@angular/material/tooltip';
 import {
     ConnectorEntity,
     ConnectorActionName,
+    ConnectorState,
+    StatusVariant,
     NifiTooltipDirective,
     NiFiCommon,
+    StatusBadge,
     canReadConnector,
     canModifyConnector,
     canOperateConnector,
@@ -41,7 +44,15 @@ import { ValidationErrorsTip } from '../../../../ui/common/tooltips/validation-e
     selector: 'connector-table',
     standalone: true,
     templateUrl: './connector-table.component.html',
-    imports: [MatButtonModule, MatTableModule, MatSortModule, MatMenuModule, MatTooltipModule, NifiTooltipDirective],
+    imports: [
+        MatButtonModule,
+        MatTableModule,
+        MatSortModule,
+        MatMenuModule,
+        MatTooltipModule,
+        NifiTooltipDirective,
+        StatusBadge
+    ],
     styleUrls: ['./connector-table.component.scss']
 })
 export class ConnectorTable {
@@ -113,6 +124,26 @@ export class ConnectorTable {
         return getConnectorActionDisabledReason(entity, actionName);
     }
 
+    getStateVariant(entity: ConnectorEntity): StatusVariant {
+        switch (entity.component.state) {
+            case ConnectorState.RUNNING:
+                return 'success';
+            case ConnectorState.STOPPED:
+            case ConnectorState.DISABLED:
+                return 'neutral';
+            case ConnectorState.STARTING:
+            case ConnectorState.UPDATING:
+            case ConnectorState.STOPPING:
+            case ConnectorState.DRAINING:
+            case ConnectorState.PREPARING_FOR_UPDATE:
+                return 'info';
+            case ConnectorState.UPDATE_FAILED:
+                return 'critical';
+            default:
+                return 'neutral';
+        }
+    }
+
     canConfigure(entity: ConnectorEntity): boolean {
         return isConnectorActionAllowed(entity, 'CONFIGURE');
     }

nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/material.scss

@@ -361,6 +361,30 @@
             )
         );
     }
+
+    // NOTE: The following styles are for the status badge and status banner components. The `.status-variant` class should only be applied to a div or span element that should adhear to the variant color and background.
+    .status-variant {
+        &.neutral {
+            color: var(--mat-sys-on-surface);
+            background-color: var(--mat-sys-surface-dim);
+        }
+        &.critical {
+            color: var(--mat-sys-on-error);
+            background-color: var(--mat-sys-error);
+        }
+        &.caution {
+            color: var(--nf-caution-contrast);
+            background-color: var(--nf-caution-default);
+        }
+        &.success {
+            color: var(--nf-success-contrast);
+            background-color: var(--nf-success-default);
+        }
+        &.info {
+            color: var(--nf-success-contrast);
+            background-color: var(--nf-success-variant);
+        }
+    }
 }
 
 // Note: Color palettes are generated from primary: #6750a4
@@ -854,4 +878,28 @@ html {
             )
         );
     }
+
+    // NOTE: The following styles are for the status badge and status banner components. The `.status-variant` class should only be applied to a div or span element that should adhear to the variant color and background.
+    .status-variant {
+        &.neutral {
+            color: var(--mat-sys-on-surface);
+            background-color: var(--mat-sys-surface-dim);
+        }
+        &.critical {
+            color: var(--mat-sys-on-error);
+            background-color: var(--mat-sys-error);
+        }
+        &.caution {
+            color: var(--nf-caution-contrast);
+            background-color: var(--nf-caution-default);
+        }
+        &.success {
+            color: var(--nf-success-contrast);
+            background-color: var(--nf-success-default);
+        }
+        &.info {
+            color: var(--nf-success-contrast);
+            background-color: var(--nf-success-variant);
+        }
+    }
 }

nifi-frontend/src/main/frontend/libs/shared/src/components/connector-detail-header/connector-detail-header.component.html

@@ -16,16 +16,13 @@
   -->
 
 <ng-template #badges>
-    <span
-        class="connector-state-badge text-xs font-semibold uppercase"
-        [class]="getStateColorClass(connector().component.state)"
+    <status-badge
+        [label]="connector().component.state"
+        [variant]="getStateVariant(connector().component.state)"
         data-qa="connector-state">
-        {{ connector().component.state }}
-    </span>
+    </status-badge>
     @if (hasUnappliedEdits()) {
-        <span class="caution-color text-xs font-semibold uppercase" data-qa="edits-not-applied-badge">
-            Edits not applied
-        </span>
+        <status-badge label="Edits not applied" variant="caution" data-qa="edits-not-applied-badge"> </status-badge>
     }
 </ng-template>
 

nifi-frontend/src/main/frontend/libs/shared/src/components/connector-detail-header/connector-detail-header.component.spec.ts

@@ -160,28 +160,6 @@ describe('ConnectorDetailHeader', () => {
         });
     });
 
-    describe('getStateColorClass', () => {
-        it('should map success variant to success-color-default', async () => {
-            const { component } = await setup();
-            expect(component.getStateColorClass(ConnectorState.RUNNING)).toBe('success-color-default');
-        });
-
-        it('should map neutral variant to neutral-color', async () => {
-            const { component } = await setup();
-            expect(component.getStateColorClass(ConnectorState.STOPPED)).toBe('neutral-color');
-        });
-
-        it('should map info variant to primary-color', async () => {
-            const { component } = await setup();
-            expect(component.getStateColorClass(ConnectorState.STARTING)).toBe('primary-color');
-        });
-
-        it('should map critical variant to error-color', async () => {
-            const { component } = await setup();
-            expect(component.getStateColorClass(ConnectorState.UPDATE_FAILED)).toBe('error-color');
-        });
-    });
-
     describe('hasUnappliedEdits', () => {
         it('should return false when no DISCARD_WORKING_CONFIGURATION action exists', async () => {
             const { component } = await setup();

nifi-frontend/src/main/frontend/libs/shared/src/components/connector-detail-header/connector-detail-header.component.ts

@@ -17,14 +17,13 @@
 
 import { Component, computed, input } from '@angular/core';
 import { NgTemplateOutlet } from '@angular/common';
-import { ConnectorEntity, ConnectorState } from '../../types';
-
-export type ConnectorStateVariant = 'neutral' | 'critical' | 'caution' | 'success' | 'info';
+import { ConnectorEntity, ConnectorState, StatusVariant } from '../../types';
+import { StatusBadge } from '../status-badge/status-badge.component';
 
 @Component({
     selector: 'connector-detail-header',
     standalone: true,
-    imports: [NgTemplateOutlet],
+    imports: [NgTemplateOutlet, StatusBadge],
     templateUrl: './connector-detail-header.component.html',
     styleUrls: ['./connector-detail-header.component.scss']
 })
@@ -48,7 +47,7 @@ export class ConnectorDetailHeader {
         return action?.allowed ?? false;
     });
 
-    getStateVariant(state: string): ConnectorStateVariant {
+    getStateVariant(state: string): StatusVariant {
         switch (state) {
             case ConnectorState.RUNNING:
                 return 'success';
@@ -67,20 +66,4 @@ export class ConnectorDetailHeader {
                 return 'neutral';
         }
     }
-
-    getStateColorClass(state: string): string {
-        switch (this.getStateVariant(state)) {
-            case 'success':
-                return 'success-color-default';
-            case 'critical':
-                return 'error-color';
-            case 'caution':
-                return 'caution-color';
-            case 'info':
-                return 'primary-color';
-            case 'neutral':
-            default:
-                return 'neutral-color';
-        }
-    }
 }

nifi-frontend/src/main/frontend/libs/shared/src/components/index.ts

@@ -46,5 +46,6 @@ export * from './side-panel-container/side-panel-container.component';
 export * from './connector-property-input/connector-property-input.component';
 export * from './connector-detail-header/connector-detail-header.component';
 export * from './searchable-select/searchable-select.component';
+export * from './status-badge/status-badge.component';
 export * from './multi-select-option/multi-select-option.component';
 export * from './asset-upload/asset-upload.component';

nifi-frontend/src/main/frontend/libs/shared/src/components/status-badge/status-badge.component.html

@@ -0,0 +1,28 @@
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You 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.
+-->
+
+@if (label) {
+    <span
+        class="status-badge status-variant py-0.5 px-1.5 rounded-xs items-center inline-flex text-sm font-semibold max-h-fit max-w-fit gap-0.5 cursor-default"
+        [class]="variant"
+        [matTooltip]="message">
+        {{ label }}
+        @if (message && message.length > 0) {
+            <i class="fa fa-info text-[16px]" [class]="variant"></i>
+        }
+    </span>
+}

nifi-frontend/src/main/frontend/libs/shared/src/components/status-badge/status-badge.component.scss

@@ -0,0 +1,42 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You 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.
+ */
+
+@use '@angular/material' as mat;
+
+.status-badge {
+    .fa {
+        &.neutral {
+            color: var(--mat-sys-on-surface);
+        }
+
+        &.critical {
+            color: var(--mat-sys-on-error);
+        }
+
+        &.caution {
+            color: var(--nf-caution-contrast);
+        }
+
+        &.success {
+            color: var(--nf-success-contrast);
+        }
+
+        &.info {
+            color: var(--nf-success-contrast);
+        }
+    }
+}

nifi-frontend/src/main/frontend/libs/shared/src/components/status-badge/status-badge.component.spec.ts

@@ -0,0 +1,38 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You 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 { ComponentFixture, TestBed } from '@angular/core/testing';
+import { StatusBadge } from './status-badge.component';
+
+describe('StatusBadge', () => {
+    let component: StatusBadge;
+    let fixture: ComponentFixture<StatusBadge>;
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            imports: [StatusBadge]
+        }).compileComponents();
+
+        fixture = TestBed.createComponent(StatusBadge);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});