Always show security screen and shows error page when trying to access forbidden data-source

public/apps/access-error-component.tsx

@@ -0,0 +1,32 @@
+/*
+ *   Copyright OpenSearch Contributors
+ *
+ *   Licensed under the Apache License, Version 2.0 (the "License").
+ *   You may not use this file except in compliance with the License.
+ *   A copy of the License is located at
+ *
+ *       http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *   or in the "license" file accompanying this file. This file 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 { EuiPageContent } from '@elastic/eui';
+import React from 'react';
+
+interface AccessErrorComponentProps {
+  dataSourceLabel?: string;
+  message?: string;
+}
+
+export const AccessErrorComponent: React.FC<AccessErrorComponentProps> = (props) => {
+  const { dataSourceLabel, message = 'You do not have permissions to view this data' } = props;
+  return (
+    <EuiPageContent>
+      {message}
+      {dataSourceLabel ? ` for ${props.dataSourceLabel}.` : '.'}
+    </EuiPageContent>
+  );
+};

public/apps/configuration/app-router.tsx

@@ -163,30 +163,6 @@
 
   const [dataSource, setDataSource] = useState<DataSourceOption>(dataSourceFromUrl);
 
-  function getTenancyRoutes() {
-    if (multitenancyEnabled) {
-      return (
-        <>
-          <Route
-            path={ROUTE_MAP.tenants.href}
-            render={() => {
-              setGlobalBreadcrumbs(ResourceType.tenants);
-              return <TenantList tabID={'Manage'} {...props} />;
-            }}
-          />
-          <Route
-            path={ROUTE_MAP.tenantsConfigureTab.href}
-            render={() => {
-              setGlobalBreadcrumbs(ResourceType.tenants);
-              return <TenantList tabID={'Configure'} {...props} />;
-            }}
-          />
-        </>
-      );
-    }
-    return null;
-  }
-
   return (
     <DataSourceContext.Provider value={{ dataSource, setDataSource }}>
       <Router basename={props.params.appBasePath}>
@@ -300,7 +276,24 @@
                   return <GetStarted {...props} />;
                 }}
               />
-              {getTenancyRoutes()}
+              {multitenancyEnabled && (
+                <Route
+                  path={ROUTE_MAP.tenants.href}
+                  render={() => {
+                    setGlobalBreadcrumbs(ResourceType.tenants);
+                    return <TenantList tabID={'Manage'} {...props} />;
+                  }}
+                />
+              )}
+              {multitenancyEnabled && (
+                <Route
+                  path={ROUTE_MAP.tenantsConfigureTab.href}
+                  render={() => {
+                    setGlobalBreadcrumbs(ResourceType.tenants);
+                    return <TenantList tabID={'Configure'} {...props} />;
+                  }}
+                />
+              )}
               <Redirect exact from="/" to={LANDING_PAGE_URL} />
             </Switch>
           </EuiPageBody>

public/apps/configuration/panels/audit-logging/audit-logging-edit-settings.tsx

@@ -76,7 +76,7 @@ export function AuditLoggingEditSettings(props: AuditLoggingEditSettingProps) {
     };
 
     fetchConfig();
-  }, [props.coreStart.http, dataSource.id]);
+  }, [props.coreStart.http, dataSource]);
 
   const renderSaveAndCancel = () => {
     return (

public/apps/configuration/panels/audit-logging/audit-logging.tsx

@@ -30,6 +30,7 @@
 } from '@elastic/eui';
 import React, { useContext } from 'react';
 import { FormattedMessage } from '@osd/i18n/react';
+import { DataSourceOption } from 'src/plugins/data_source_management/public';
 import { AppDependencies } from '../../../types';
 import { ResourceType } from '../../../../../common';
 import { getAuditLogging, updateAuditLogging } from '../../utils/audit-logging-utils';
@@ -45,6 +46,7 @@
 import { DocLinks } from '../../constants';
 import { DataSourceContext } from '../../app-router';
 import { SecurityPluginTopNavMenu } from '../../top-nav-menu';
+import { AccessErrorComponent } from '../../../access-error-component';
 
 interface AuditLoggingProps extends AppDependencies {
   fromType: string;
@@ -93,6 +95,18 @@
   );
 }
 
+function renderAccessErrorPanel(dataSource: DataSourceOption) {
+  return (
+    <EuiPanel>
+      <EuiTitle>
+        <h3>Audit logging</h3>
+      </EuiTitle>
+      <EuiHorizontalRule margin="m" />
+      <AccessErrorComponent dataSourceLabel={dataSource && dataSource.label} />
+    </EuiPanel>
+  );
+}
+
 export function renderGeneralSettings(config: AuditLoggingSettings) {
   return (
     <>
@@ -137,6 +151,7 @@
 export function AuditLogging(props: AuditLoggingProps) {
   const [configuration, setConfiguration] = React.useState<AuditLoggingSettings>({});
   const { dataSource, setDataSource } = useContext(DataSourceContext)!;
+  const [errorFlag, setErrorFlag] = React.useState(false);
 
   const onSwitchChange = async () => {
     try {
@@ -156,20 +171,24 @@
       try {
         const auditLogging = await getAuditLogging(props.coreStart.http, dataSource.id);
         setConfiguration(auditLogging);
+        setErrorFlag(false);
       } catch (e) {
         // TODO: switch to better error handling.
         console.log(e);
+        setErrorFlag(true);
       }
     };
 
     fetchData();
-  }, [props.coreStart.http, props.fromType, dataSource.id]);
+  }, [props.coreStart.http, props.fromType, dataSource]);
 
   const statusPanel = renderStatusPanel(onSwitchChange, configuration.enabled || false);
 
   let content;
 
-  if (!configuration.enabled) {
+  if (errorFlag) {
+    content = renderAccessErrorPanel(dataSource);
+  } else if (!configuration.enabled) {
     content = statusPanel;
   } else {
     content = (

public/apps/configuration/panels/audit-logging/test/audit-logging.test.tsx

@@ -40,7 +40,12 @@ describe('Audit logs', () => {
   };
 
   beforeEach(() => {
-    jest.spyOn(React, 'useState').mockImplementation((initialValue) => [initialValue, setState]);
+    // jest.spyOn(React, 'useState').mockImplementation((initialValue) => [initialValue, setState]);
+    jest.spyOn(React, 'useState').mockRestore();
+    jest
+      .spyOn(React, 'useState')
+      .mockImplementationOnce(() => [[], setState])
+      .mockImplementationOnce(() => [false, jest.fn()]);
     jest.spyOn(React, 'useEffect').mockImplementationOnce((f) => f());
   });
 
@@ -140,7 +145,11 @@ describe('Audit logs', () => {
 
   it('render when AuditLoggingSettings.enabled is true', () => {
     const auditLoggingSettings = { enabled: true };
-    jest.spyOn(React, 'useState').mockImplementation(() => [auditLoggingSettings, setState]);
+    jest.spyOn(React, 'useState').mockRestore();
+    jest
+      .spyOn(React, 'useState')
+      .mockImplementationOnce(() => [auditLoggingSettings, setState])
+      .mockImplementationOnce(() => [false, jest.fn()]);
     const component = shallow(
       <AuditLogging coreStart={mockCoreStart as any} navigation={{} as any} />
     );
@@ -149,7 +158,11 @@ describe('Audit logs', () => {
 
   it('Click Configure button of general setting section', () => {
     const auditLoggingSettings = { enabled: true };
-    jest.spyOn(React, 'useState').mockImplementation(() => [auditLoggingSettings, setState]);
+    jest.spyOn(React, 'useState').mockRestore();
+    jest
+      .spyOn(React, 'useState')
+      .mockImplementationOnce(() => [auditLoggingSettings, setState])
+      .mockImplementationOnce(() => [false, jest.fn()]);
     const component = shallow(
       <AuditLogging coreStart={mockCoreStart as any} navigation={{} as any} />
     );
@@ -161,7 +174,11 @@ describe('Audit logs', () => {
 
   it('Click Configure button of Compliance settings section', () => {
     const auditLoggingSettings = { enabled: true };
-    jest.spyOn(React, 'useState').mockImplementation(() => [auditLoggingSettings, setState]);
+    jest.spyOn(React, 'useState').mockRestore();
+    jest
+      .spyOn(React, 'useState')
+      .mockImplementationOnce(() => [auditLoggingSettings, setState])
+      .mockImplementationOnce(() => [false, jest.fn()]);
     const component = shallow(
       <AuditLogging coreStart={mockCoreStart as any} navigation={{} as any} />
     );

public/apps/configuration/panels/auth-view/auth-view.tsx

@@ -25,12 +25,14 @@ import { getSecurityConfig } from '../../utils/auth-view-utils';
 import { InstructionView } from './instruction-view';
 import { DataSourceContext } from '../../app-router';
 import { SecurityPluginTopNavMenu } from '../../top-nav-menu';
+import { AccessErrorComponent } from '../../../access-error-component';
 
 export function AuthView(props: AppDependencies) {
   const [authentication, setAuthentication] = React.useState([]);
   const [authorization, setAuthorization] = React.useState([]);
   const [loading, setLoading] = useState(false);
   const { dataSource, setDataSource } = useContext(DataSourceContext)!;
+  const [errorFlag, setErrorFlag] = React.useState(false);
 
   React.useEffect(() => {
     const fetchData = async () => {
@@ -40,15 +42,17 @@ export function AuthView(props: AppDependencies) {
 
         setAuthentication(config.authc);
         setAuthorization(config.authz);
+        setErrorFlag(false);
       } catch (e) {
         console.log(e);
+        setErrorFlag(true);
       } finally {
         setLoading(false);
       }
     };
 
     fetchData();
-  }, [props.coreStart.http, dataSource.id]);
+  }, [props.coreStart.http, dataSource]);
 
   if (isEmpty(authentication)) {
     return (
@@ -59,7 +63,14 @@ export function AuthView(props: AppDependencies) {
           setDataSource={setDataSource}
           selectedDataSource={dataSource}
         />
-        <InstructionView config={props.config} />
+        <EuiTitle size="l">
+          <h1>Authentication and authorization</h1>
+        </EuiTitle>
+        {errorFlag ? (
+          <AccessErrorComponent dataSourceLabel={dataSource && dataSource.label} />
+        ) : (
+          <InstructionView config={props.config} />
+        )}
       </>
     );
   }
@@ -76,18 +87,24 @@ export function AuthView(props: AppDependencies) {
         <EuiTitle size="l">
           <h1>Authentication and authorization</h1>
         </EuiTitle>
-        {props.config.ui.backend_configurable && (
+        {!errorFlag && props.config.ui.backend_configurable && (
           <ExternalLinkButton
             href={DocLinks.BackendConfigurationDoc}
             text="Manage via config.yml"
           />
         )}
       </EuiPageHeader>
-      {/* @ts-ignore */}
-      <AuthenticationSequencePanel authc={authentication} loading={loading} />
-      <EuiSpacer size="m" />
-      {/* @ts-ignore */}
-      <AuthorizationPanel authz={authorization} loading={loading} config={props.config} />
+      {errorFlag ? (
+        <AccessErrorComponent dataSourceLabel={dataSource && dataSource.label} />
+      ) : (
+        <>
+          {/* @ts-ignore */}
+          <AuthenticationSequencePanel authc={authentication} loading={loading} />
+          <EuiSpacer size="m" />
+          {/* @ts-ignore */}
+          <AuthorizationPanel authz={authorization} loading={loading} config={props.config} />
+        </>
+      )}
     </>
   );
 }

public/apps/configuration/panels/auth-view/test/auth-view.test.tsx

@@ -33,7 +33,14 @@ describe('Auth view', () => {
   const setState = jest.fn();
 
   beforeEach(() => {
-    jest.spyOn(React, 'useState').mockImplementation((initialValue) => [initialValue, setState]);
+    // jest.spyOn(React, 'useState').mockImplementation((initialValue) => [initialValue, setState]);
+    jest.spyOn(React, 'useState').mockRestore();
+    jest
+      .spyOn(React, 'useState')
+      .mockImplementationOnce(() => [[], setState])
+      .mockImplementationOnce(() => [[], setState])
+      .mockImplementationOnce(() => [false, jest.fn()])
+      .mockImplementationOnce(() => [false, jest.fn()]);
     jest.spyOn(React, 'useEffect').mockImplementationOnce((f) => f());
   });
 

public/apps/configuration/panels/internal-user-edit/internal-user-edit.tsx

@@ -98,7 +98,7 @@ export function InternalUserEdit(props: InternalUserEditDeps) {
 
       fetchData();
     }
-  }, [addToast, props.action, props.coreStart.http, props.sourceUserName, dataSource.id]);
+  }, [addToast, props.action, props.coreStart.http, props.sourceUserName, dataSource]);
 
   const updateUserHandler = async () => {
     try {