Enabled and Disable features incorrect (#3054)

public/resources/en/dashboard.json

@@ -9,8 +9,9 @@
   "enabledFeatures": "Enabled features",
   "experimental": "Experimental",
   "preview": "Preview",
-  "infoEnabledFeatures": "Something about what enabled features are.",
+  "supported": "Supported",
-  "infoDisabledFeatures": "Something about what disabled features are.",
+  "infoEnabledFeatures": "Shows enabled preview and experimental features.",
+  "infoDisabledFeatures": "Shows all disabled features.",
   "disabledFeatures": "Disabled features",
   "adminUiVersion": "<0 className=\"pf-u-mr-md\">Admin UI version</0>{{version}}",
   "providerInfo": "Provider info",

src/dashboard/Dashboard.tsx

@@ -1,7 +1,7 @@
 import { useMemo } from "react";
 import { useHistory } from "react-router-dom";
 import { Trans, useTranslation } from "react-i18next";
-import { xor } from "lodash-es";
+import { union, filter } from "lodash-es";
 import {
   Brand,
   Card,
@@ -73,18 +73,17 @@ const Dashboard = () => {
   const history = useHistory();
   const localeSort = useLocaleSort();
 
-  const enabledFeatures = useMemo(
+  const isDeprecatedFeature = (feature: string) =>
-    () =>
+    disabledFeatures.includes(feature);
-      localeSort(
+
-        xor(
+  const isExperimentalFeature = (feature: string) =>
-          serverInfo.profileInfo?.disabledFeatures,
+    serverInfo.profileInfo?.experimentalFeatures?.includes(feature);
-          serverInfo.profileInfo?.experimentalFeatures,
+
-          serverInfo.profileInfo?.previewFeatures
+  const isPreviewFeature = (feature: string) =>
-        ),
+    serverInfo.profileInfo?.previewFeatures?.includes(feature);
-        (item) => item
+
-      ),
+  const isSupportedFeature = (feature: string) =>
-    [serverInfo.profileInfo]
+    !isExperimentalFeature(feature) && !isPreviewFeature(feature);
-  );
 
   const disabledFeatures = useMemo(
     () =>
@@ -95,11 +94,22 @@ const Dashboard = () => {
     [serverInfo.profileInfo]
   );
 
-  const isExperimentalFeature = (feature: string) =>
+  const enabledFeatures = useMemo(
-    serverInfo.profileInfo?.experimentalFeatures?.includes(feature);
+    () =>
-
+      localeSort(
-  const isPreviewFeature = (feature: string) =>
+        filter(
-    serverInfo.profileInfo?.previewFeatures?.includes(feature);
+          union(
+            serverInfo.profileInfo?.experimentalFeatures,
+            serverInfo.profileInfo?.previewFeatures
+          ),
+          (feature) => {
+            return !isDeprecatedFeature(feature);
+          }
+        ),
+        (item) => item
+      ),
+    [serverInfo.profileInfo]
+  );
 
   if (Object.keys(serverInfo).length === 0) {
     return <KeycloakSpinner />;
@@ -186,7 +196,7 @@ const Dashboard = () => {
                           <DescriptionListDescription>
                             <List variant={ListVariant.inline}>
                               {enabledFeatures.map((feature) => (
-                                <ListItem key={feature}>
+                                <ListItem key={feature} className="pf-u-mb-sm">
                                   {feature}{" "}
                                   {isExperimentalFeature(feature) ? (
                                     <Label color="orange">
@@ -212,7 +222,22 @@ const Dashboard = () => {
                           <DescriptionListDescription>
                             <List variant={ListVariant.inline}>
                               {disabledFeatures.map((feature) => (
-                                <ListItem key={feature}>{feature}</ListItem>
+                                <ListItem key={feature} className="pf-u-mb-sm">
+                                  {feature}{" "}
+                                  {isExperimentalFeature(feature) ? (
+                                    <Label color="orange">
+                                      {t("experimental")}
+                                    </Label>
+                                  ) : null}
+                                  {isPreviewFeature(feature) ? (
+                                    <Label color="blue">{t("preview")}</Label>
+                                  ) : null}
+                                  {isSupportedFeature(feature) ? (
+                                    <Label color="green">
+                                      {t("supported")}
+                                    </Label>
+                                  ) : null}
+                                </ListItem>
                               ))}
                             </List>
                           </DescriptionListDescription>