Use useRequiredScopes instead of hasRequiredScopes

features/admin.server-configurations.v1/pages/connector-listing-page.tsx

@@ -17,11 +17,11 @@
  */
 
 import Typography from "@oxygen-ui/react/Typography";
+import { useRequiredScopes } from "@wso2is/access-control";
 import { AppState, FeatureConfigInterface, store  } from "@wso2is/admin.core.v1";
 import useUIConfig from "@wso2is/admin.core.v1/hooks/use-ui-configs";
 import { serverConfigurationConfig } from "@wso2is/admin.extensions.v1/configs/server-configuration";
 import { IdentityAppsApiException } from "@wso2is/core/exceptions";
-import { hasRequiredScopes } from "@wso2is/core/helpers";
 import { AlertLevels, ReferableComponentInterface, TestableComponentInterface } from "@wso2is/core/models";
 import { addAlert } from "@wso2is/core/store";
 import { I18n } from "@wso2is/i18n";
@@ -60,7 +60,7 @@ type GovernanceConnectorWithRef = GovernanceConnectorInterface & ReferableCompon
 export const ConnectorListingPage: FunctionComponent<ConnectorListingPageInterface> = (
     props: ConnectorListingPageInterface
 ): ReactElement => {
-    const { [ "data-testid" ]: testId } = props;
+    const { [ "data-testid" ]: testId = "governance-connectors-listing-page" } = props;
 
     const dispatch: Dispatch = useDispatch();
     const pageContextRef: MutableRefObject<any> = useRef(null);
@@ -73,23 +73,25 @@ export const ConnectorListingPage: FunctionComponent<ConnectorListingPageInterfa
     const isPasswordInputValidationEnabled: boolean = useSelector((state: AppState) =>
         state?.config?.ui?.isPasswordInputValidationEnabled);
 
+    const hasGovernanceConnectorReadPermission: boolean = useRequiredScopes(
+        featureConfig?.governanceConnectors?.scopes?.read
+    );
+    const hasOrganizationDiscoveryReadPermission: boolean = useRequiredScopes(
+        featureConfig?.organizationDiscovery?.scopes?.read
+    );
+    const hasResidentOutboundProvisioningFeaturePermission: boolean = useRequiredScopes(
+        featureConfig?.residentOutboundProvisioning?.scopes?.feature
+    );
+
     const predefinedCategories: any = useMemo(() => {
         const originalConnectors: Array<any> = GovernanceConnectorUtils.getPredefinedConnectorCategories();
         const refinedConnectorCategories: Array<any> = [];
 
         const isOrganizationDiscoveryEnabled: boolean = featureConfig?.organizationDiscovery?.enabled
-            && hasRequiredScopes(
-                featureConfig?.organizationDiscovery,
-                featureConfig?.organizationDiscovery?.scopes?.read,
-                allowedScopes
-            );
+            && hasOrganizationDiscoveryReadPermission;
 
         const isResidentOutboundProvisioningEnabled: boolean = featureConfig?.residentOutboundProvisioning?.enabled
-            && hasRequiredScopes(
-                featureConfig?.residentOutboundProvisioning,
-                featureConfig?.residentOutboundProvisioning?.scopes?.feature,
-                allowedScopes
-            );
+            && hasResidentOutboundProvisioningFeaturePermission;
 
         for (const category of originalConnectors) {
             if (!isOrganizationDiscoveryEnabled
@@ -122,9 +124,7 @@ export const ConnectorListingPage: FunctionComponent<ConnectorListingPageInterfa
     useEffect(() => {
 
         // If Governance Connector read permission is not available, prevent from trying to load the connectors.
-        if (!hasRequiredScopes(featureConfig?.governanceConnectors,
-            featureConfig?.governanceConnectors?.scopes?.read,
-            allowedScopes)) {
+        if (!hasGovernanceConnectorReadPermission) {
 
             return;
         }
@@ -357,13 +357,6 @@ export const ConnectorListingPage: FunctionComponent<ConnectorListingPageInterfa
     );
 };
 
-/**
- * Default props for the component.
- */
-ConnectorListingPage.defaultProps = {
-    "data-testid": "governance-connectors-listing-page"
-};
-
 /**
  * A default export was added to support React.lazy.
  * TODO: Change this to a named export once react starts supporting named exports for code splitting.