MultiNetworkPolicy in a separate nav item

frontend/packages/console-app/console-extensions.json

@@ -10,7 +10,6 @@
       "importRedirectURL": { "$codeRef": "perspective.getImportRedirectURL" }
     }
   },
-
   {
     "type": "console.flag/model",
     "properties": {
@@ -1057,15 +1056,39 @@
       }
     }
   },
-
   {
-    "type": "console.page/route",
     "properties": {
-      "exact": true,
-      "path": ["/k8s/all-namespaces/networkpolicies/~enable-multi", "/k8s/ns/:ns/networkpolicies/~enable-multi"],
-      "component": { "$codeRef": "networkPolicyListPage.NetworkPolicyListPage" }
+      "handler": { "$codeRef": "multiNetworkFlag.enableMultiNetworkPolicy" }
+    },
+    "type": "console.flag"
+  },
+  {
+    "type": "console.flag/model",
+    "properties": {
+      "model": {
+        "group": "k8s.cni.cncf.io",
+        "version": "v1beta1",
+        "kind": "MultiNetworkPolicy"
+      },
+      "flag": "MULTI_NETWORK_POLICY_ENABLED"
     }
   },
+  {
+    "type": "console.navigation/resource-ns",
+    "properties": {
+      "perspective": "admin",
+      "section": "networking",
+      "id": "multinetworkpolicies",
+      "insertAfter": "networkpolicies",
+      "name": "%console-app~MultiNetworkPolicies%",
+      "model": {
+        "group": "k8s.cni.cncf.io",
+        "version": "v1beta1",
+        "kind": "MultiNetworkPolicy"
+      }
+    },
+    "flags": {"required": ["MULTI_NETWORK_POLICY_ENABLED"]}
+  },
   {
     "type": "console.navigation/resource-cluster",
     "properties": {

frontend/packages/console-app/locales/en/console-app.json

@@ -62,6 +62,7 @@
   "Routes": "Routes",
   "Ingresses": "Ingresses",
   "NetworkPolicies": "NetworkPolicies",
+  "MultiNetworkPolicies": "MultiNetworkPolicies",
   "PersistentVolumes": "PersistentVolumes",
   "PersistentVolumeClaims": "PersistentVolumeClaims",
   "StorageClasses": "StorageClasses",
@@ -324,10 +325,6 @@
   "Add egress rules to be applied to your selected pods. Traffic is allowed to pods if it matches at least one rule.": "Add egress rules to be applied to your selected pods. Traffic is allowed to pods if it matches at least one rule.",
   "Add egress rule": "Add egress rule",
   "Cancel": "Cancel",
-  "Enable {{kind}}": "Enable {{kind}}",
-  "{{kind}} disabled": "{{kind}} disabled",
-  "Cluster administrator permissions are required to enable this feature.": "Cluster administrator permissions are required to enable this feature.",
-  "MultiNetworkPolicies": "MultiNetworkPolicies",
   "{{path}} is missing.": "{{path}} is missing.",
   "{{path}} should be an Array.": "{{path}} should be an Array.",
   "{{path}} should not be empty.": "{{path}} should not be empty.",

frontend/packages/console-app/package.json

@@ -50,7 +50,8 @@
       "nodeStatus": "src/components/nodes/status",
       "nodeActions": "src/components/nodes/menu-actions.tsx",
       "oauthConfigDetailsPage": "src/components/oauth-config/OAuthConfigDetailsPage.tsx",
-      "networkPolicyListPage": "src/components/network-policies/network-policy-list/NetworkPolicyListPage.tsx"
+      "networkPolicyListPage": "src/components/network-policies/multi-network-policy/NetworkPolicyListPage.tsx",
+      "multiNetworkFlag": "src/components/network-policies/multi-network-policy/multiNetworkFlag.ts"
     }
   }
 }

frontend/packages/console-app/src/__tests__/network-policies/create-network-policy.spec.tsx

@@ -19,14 +19,6 @@ jest.mock('@console/shared/src/hooks/useUserSettingsCompatibility', () => ({
   useUserSettingsCompatibility: () => ['', () => {}],
 }));
 
-jest.mock('react-router-dom-v5-compat', () => ({
-  ...require.requireActual('react-router-dom-v5-compat'),
-  useParams: jest.fn(() => ({ ns: 'default' })),
-  useLocation: jest.fn(() => ({
-    pathname: '/k8s/ns/default/networking.k8s.io~v1~NetworkPolicy/~new/form',
-  })),
-}));
-
 const emptyPolicy: NetworkPolicyKind = {
   metadata: {
     name: '',

frontend/packages/console-app/src/__tests__/network-policies/network-policy-form.spec.tsx

@@ -17,14 +17,6 @@ jest.mock('@console/shared/src/hooks/useUserSettingsCompatibility', () => ({
   useUserSettingsCompatibility: () => ['', () => {}],
 }));
 
-jest.mock('react-router-dom-v5-compat', () => ({
-  ...require.requireActual('react-router-dom-v5-compat'),
-  useParams: jest.fn(() => ({ ns: 'default' })),
-  useLocation: jest.fn(() => ({
-    pathname: '/k8s/ns/default/networking.k8s.io~v1~NetworkPolicy/~new/form',
-  })),
-}));
-
 const emptyPolicy: NetworkPolicyKind = {
   metadata: {
     name: '',

frontend/packages/console-app/src/components/network-policies/multi-network-policy/MultiNetworkPolicyListPage.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { useParams } from 'react-router-dom-v5-compat';
+import { ListPage } from '@console/internal/components/factory';
+import { NetworkPoliciesList } from '@console/internal/components/network-policy';
+import { multiNetworkPolicyRef } from './constants';
+
+export type MultiNetworkPolicyPageNavProps = {
+  namespace: string;
+  kind: string;
+};
+
+export const MultiNetworkPolicyListPage: React.FC<MultiNetworkPolicyPageNavProps> = (props) => {
+  const params = useParams();
+
+  const namespace = React.useMemo(() => params.ns || 'default', [params.ns]);
+
+  return (
+    <ListPage
+      ListComponent={NetworkPoliciesList}
+      canCreate
+      createProps={{
+        to: `/k8s/ns/${namespace}/${multiNetworkPolicyRef}/~new/form`,
+      }}
+      {...props}
+    />
+  );
+};

frontend/packages/console-app/src/components/network-policies/network-policy-list/constants.ts → frontend/packages/console-app/src/components/network-policies/multi-network-policy/constants.ts

@@ -1,12 +1,6 @@
 import { K8sModel } from '@console/dynamic-plugin-sdk/src';
 import { getReferenceForModel } from '@console/dynamic-plugin-sdk/src/utils/k8s';
-import { MultiNetworkPolicyModel, NetworkPolicyModel } from '@console/internal/models';
-
-export const TAB_INDEXES = {
-  ENABLE_MULTI: 2,
-  MULTI_NETWORK: 1,
-  NETWORK: 0,
-};
+import { MultiNetworkPolicyModel } from '@console/internal/models';
 
 export const NetworkConfigModel: K8sModel = {
   abbr: 'NO',
@@ -24,4 +18,5 @@ export const NetworkConfigModel: K8sModel = {
 export const ALL_NAMESPACES = 'all-namespaces';
 
 export const multiNetworkPolicyRef = getReferenceForModel(MultiNetworkPolicyModel);
-export const networkPolicyRef = getReferenceForModel(NetworkPolicyModel);
+
+export const FLAG_MULTI_NETWORK_POLICY = 'MULTI_NETWORK_POLICY_ENABLED';

frontend/packages/console-app/src/components/network-policies/multi-network-policy/multiNetworkFlag.ts

@@ -0,0 +1,22 @@
+import { SetFeatureFlag, K8sResourceCommon } from '@console/dynamic-plugin-sdk';
+import { k8sGetResource } from '@console/dynamic-plugin-sdk/src/utils/k8s';
+import { FLAG_MULTI_NETWORK_POLICY, NetworkConfigModel } from './constants';
+
+export const enableMultiNetworkPolicy = (setFeatureFlag: SetFeatureFlag) => {
+  k8sGetResource({ model: NetworkConfigModel, name: 'cluster' })
+    .then((networkClusterConfig: K8sResourceCommon & { spec: any }) => {
+      if (networkClusterConfig?.spec?.disableMultiNetwork) {
+        setFeatureFlag(FLAG_MULTI_NETWORK_POLICY, !networkClusterConfig.spec.disableMultiNetwork);
+        return;
+      }
+
+      if (networkClusterConfig?.spec?.useMultiNetworkPolicy) {
+        setFeatureFlag(FLAG_MULTI_NETWORK_POLICY, networkClusterConfig?.spec?.disableMultiNetwork);
+        return;
+      }
+
+      setFeatureFlag(FLAG_MULTI_NETWORK_POLICY, false);
+    })
+    // eslint-disable-next-line no-console
+    .catch(console.error);
+};