Fix issues with feature labels for features introduced with new authz runtime

.changeset/perfect-rice-flash.md

@@ -0,0 +1,9 @@
+---
+"@wso2is/admin.server-configurations.v1": patch
+"@wso2is/admin.applications.v1": patch
+"@wso2is/admin.extensions.v1": patch
+"@wso2is/admin.core.v1": patch
+"@wso2is/console": patch
+---
+
+Fix issues with feature labels for features introduced with new authz runtime

features/admin.applications.v1/data/application-templates/templates/m2m-application/m2m-application.json

@@ -4,6 +4,7 @@
     "name": "M2M Application",
     "description": "Applications tailored for Machine to Machine communication",
     "image": "m2m",
+    "status": "NEW",
     "authenticationProtocol": "",
     "category": "DEFAULT",
     "displayOrder": -1,

features/admin.core.v1/configs/routes.tsx

@@ -33,6 +33,7 @@ import {
 import { APIResourcesConstants } from "@wso2is/admin.api-resources.v1/constants";
 import { commonConfig, identityProviderConfig } from "@wso2is/admin.extensions.v1";
 import { FeatureGateConstants } from "@wso2is/admin.extensions.v1/components/feature-gate/constants/feature-gate";
+import FeatureStatusLabel from "@wso2is/admin.extensions.v1/components/feature-gate/models/feature-gate";
 import { AppLayout, AuthLayout, DefaultLayout, ErrorLayout } from "@wso2is/admin.layouts.v1";
 import { ServerConfigurationsConstants } from "@wso2is/admin.server-configurations.v1";
 import { AppView, FullScreenView } from "@wso2is/admin.views.v1";
@@ -43,7 +44,7 @@ import merge from "lodash-es/merge";
 import values from "lodash-es/values";
 import React, { FunctionComponent, lazy } from "react";
 import { getSidePanelIcons } from "./ui";
-import { AppConstants } from "../constants";
+import { AppConstants, OrganizationType } from "../constants";
 import { store } from "../store";
 
 /**
@@ -72,6 +73,7 @@ export const getAppViewRoutes = (): RouteInterface[] => {
         = store.getState()?.config?.ui?.features?.applicationRoles;
     const showStatusLabelForNewAuthzRuntimeFeatures: boolean =
         window["AppUtils"]?.getConfig()?.ui?.showStatusLabelForNewAuthzRuntimeFeatures;
+    const orgType: OrganizationType = store.getState().organization.organizationType;
 
     const defaultRoutes: RouteInterface[] = [
         {
@@ -275,6 +277,14 @@ export const getAppViewRoutes = (): RouteInterface[] => {
             ],
             component: lazy(() => import("@wso2is/admin.users.v1/pages/users")),
             exact: true,
+            featureStatus:
+                showStatusLabelForNewAuthzRuntimeFeatures && orgType === OrganizationType.SUBORGANIZATION
+                    ? "NEW"
+                    : "",
+            featureStatusLabel:
+                showStatusLabelForNewAuthzRuntimeFeatures && orgType === OrganizationType.SUBORGANIZATION
+                    ? FeatureStatusLabel.NEW
+                    : null,
             icon: {
                 icon: getSidePanelIcons().users
             },

features/admin.extensions.v1/components/feature-gate/models/feature-gate.ts

@@ -20,7 +20,7 @@
  * Enum that lists the currently defined feature status label types and their corresponding i18n keys.
  */
 enum FeatureStatusLabel {
-    NEW = "comon:new",
+    NEW = "common:new",
     BETA = "common:beta",
     EXPERIMENTAL = "common:experimental",
     PREMIUM = "common:premium",

features/admin.server-configurations.v1/components/governance-connector-grid.scss

@@ -38,7 +38,6 @@
                 right: 0;
                 height: 24px;
                 min-width: 75px;
-                background: #3fb81f;
                 display: flex;
                 margin-left: auto;
                 margin-right: -25px;

features/admin.server-configurations.v1/components/governance-connector-grid.tsx

@@ -38,13 +38,13 @@ import {
     UserGearIcon,
     UserPlusIcon
 } from "@oxygen-ui/react-icons";
-import { AppConstants, AppState, history } from "@wso2is/admin.core.v1";
+import { AppConstants, history } from "@wso2is/admin.core.v1";
 import { serverConfigurationConfig } from "@wso2is/admin.extensions.v1";
+import FeatureStatusLabel from "@wso2is/admin.extensions.v1/components/feature-gate/models/feature-gate";
 import { IdentifiableComponentInterface, LoadableComponentInterface } from "@wso2is/core/models";
 import { ContentLoader } from "@wso2is/react-components";
 import React, { FunctionComponent, ReactElement, useMemo } from "react";
 import { useTranslation } from "react-i18next";
-import { useSelector } from "react-redux";
 import "./governance-connector-grid.scss";
 import { ServerConfigurationsConstants } from "../constants/server-configurations-constants";
 import { GovernanceConnectorCategoryInterface, GovernanceConnectorInterface } from "../models/governance-connectors";
@@ -82,8 +82,6 @@ const GovernanceConnectorCategoriesGrid: FunctionComponent<GovernanceConnectorCa
     } = props;
 
     const { t } = useTranslation();
-    const showStatusLabelForNewAuthzRuntimeFeatures: boolean = useSelector(
-        (state: AppState) => state?.config?.ui?.showStatusLabelForNewAuthzRuntimeFeatures);
 
     /**
      * Combine the connectors and dynamic connectors and group them by category.
@@ -211,6 +209,15 @@ const GovernanceConnectorCategoriesGrid: FunctionComponent<GovernanceConnectorCa
         }
     };
 
+    const resolveFeatureLabelClass = (featureStatus: FeatureStatusLabel) => {
+        switch (featureStatus) {
+            case FeatureStatusLabel.BETA:
+                return "oxygen-chip-beta";
+            case FeatureStatusLabel.NEW:
+                return "oxygen-chip-new";
+        }
+    };
+
     return (
         <div>
             { combinedConnectors?.map((category: GovernanceConnectorCategoryInterface, index: number) => {
@@ -236,10 +243,17 @@ const GovernanceConnectorCategoriesGrid: FunctionComponent<GovernanceConnectorCa
                                                     data-componentid={ connector.testId }
                                                 >
                                                     {
-                                                        showStatusLabelForNewAuthzRuntimeFeatures
-                                                        && connector.status
+                                                        connector.status
                                                         && (
-                                                            <div className="ribbon">{ t(connector.status) }</div>
+                                                            <div
+                                                                className={
+                                                                    "ribbon " + resolveFeatureLabelClass(
+                                                                        connector.status as FeatureStatusLabel
+                                                                    )
+                                                                }
+                                                            >
+                                                                { t(connector.status).toUpperCase() }
+                                                            </div>
                                                         )
                                                     }
                                                     <CardContent className="governance-connector-header">

features/admin.server-configurations.v1/utils/governance-connector-utils.ts

@@ -176,6 +176,9 @@ export class GovernanceConnectorUtils {
     }
 
     public static getPredefinedConnectorCategories(): Array<any> {
+        const showStatusLabelForNewAuthzRuntimeFeatures: boolean =
+            store.getState()?.ui?.showStatusLabelForNewAuthzRuntimeFeatures;
+
         return [
             {
                 connectors: [
@@ -197,7 +200,7 @@ export class GovernanceConnectorUtils {
                         id: ServerConfigurationsConstants.ALTERNATIVE_LOGIN_IDENTIFIER,
                         route: AppConstants.getPaths()
                             .get("ALTERNATIVE_LOGIN_IDENTIFIER_EDIT"),
-                        status: "beta",
+                        status: FeatureStatusLabel.BETA,
                         testId: "alternative-login-identifier-card"
                     },
                     {
@@ -376,7 +379,7 @@ export class GovernanceConnectorUtils {
                         header: I18n.instance.t("pages:emailDomainDiscovery.title"),
                         id: ServerConfigurationsConstants.EMAIL_DOMAIN_DISCOVERY,
                         route: AppConstants.getPaths().get("ORGANIZATION_DISCOVERY_DOMAINS"),
-                        status: FeatureStatusLabel.NEW,
+                        status: showStatusLabelForNewAuthzRuntimeFeatures ? FeatureStatusLabel.NEW : null,
                         testId: "email-domain-discovery-card"
                     }
                 ],