Adds error component tests to each added error component

Signed-off-by: Darshit Chanpura <[email protected]>
DarshitChanpura · May 25, 2024 · 94c1588 · 94c1588
1 parent ffe27b4
commit 94c1588
Show file tree

Hide file tree

Showing 23 changed files with 648 additions and 66 deletions.
diff --git a/public/apps/access-error-component.tsx → .../configuration/access-error-component.tsx b/public/apps/access-error-component.tsx → .../configuration/access-error-component.tsx
diff --git a/public/apps/configuration/panels/audit-logging/audit-logging.tsx b/public/apps/configuration/panels/audit-logging/audit-logging.tsx
@@ -22,6 +22,8 @@ import {
   EuiForm,
   EuiFormRow,
   EuiHorizontalRule,
+  EuiLoadingContent,
+  EuiPageHeader,
   EuiPanel,
   EuiSpacer,
   EuiSwitch,
@@ -46,7 +48,7 @@ import { ViewSettingGroup } from './view-setting-group';
 import { DocLinks } from '../../constants';
 import { DataSourceContext } from '../../app-router';
 import { SecurityPluginTopNavMenu } from '../../top-nav-menu';
-import { AccessErrorComponent } from '../../../access-error-component';
+import { AccessErrorComponent } from '../../access-error-component';
 
 interface AuditLoggingProps extends AppDependencies {
   fromType: string;
@@ -55,10 +57,6 @@ interface AuditLoggingProps extends AppDependencies {
 function renderStatusPanel(onSwitchChange: () => void, auditLoggingEnabled: boolean) {
   return (
     <EuiPanel>
-      <EuiTitle>
-        <h3>Audit logging</h3>
-      </EuiTitle>
-      <EuiHorizontalRule margin="m" />
       <EuiForm>
         <EuiDescribedFormGroup title={<h3>Storage location</h3>} className="described-form-group">
           <EuiFormRow className="form-row">
@@ -97,13 +95,11 @@ function renderStatusPanel(onSwitchChange: () => void, auditLoggingEnabled: bool
 
 function renderAccessErrorPanel(loading: boolean, dataSource: DataSourceOption) {
   return (
-    <EuiPanel>
-      <EuiTitle>
-        <h3>Audit logging</h3>
-      </EuiTitle>
-      <EuiHorizontalRule margin="m" />
-      <AccessErrorComponent loading={loading} dataSourceLabel={dataSource && dataSource.label} />
-    </EuiPanel>
+    <AccessErrorComponent
+      loading={loading}
+      dataSourceLabel={dataSource && dataSource.label}
+      message="You do not have permissions to configure audit logging settings"
+    />
   );
 }
 
@@ -201,7 +197,6 @@ export function AuditLogging(props: AuditLoggingProps) {
       <>
         {statusPanel}
         <EuiSpacer />
-
         <EuiPanel data-test-subj="general-settings">
           <EuiFlexGroup>
             <EuiFlexItem>
@@ -262,7 +257,13 @@ export function AuditLogging(props: AuditLoggingProps) {
         setDataSource={setDataSource}
         selectedDataSource={dataSource}
       />
-      {content}
+      <EuiPageHeader>
+        <EuiTitle size="l">
+          <h1>Audit Logging</h1>
+        </EuiTitle>
+      </EuiPageHeader>
+      <EuiSpacer />
+      {loading ? <EuiLoadingContent /> : content}
     </div>
   );
 }
diff --git a/...ic/apps/configuration/panels/audit-logging/test/__snapshots__/audit-logging.test.tsx.snap b/...ic/apps/configuration/panels/audit-logging/test/__snapshots__/audit-logging.test.tsx.snap
@@ -256,15 +256,17 @@ exports[`Audit logs render when AuditLoggingSettings.enabled is true 1`] = `
     }
     setDataSource={[MockFunction]}
   />
-  <EuiPanel>
-    <EuiTitle>
-      <h3>
-        Audit logging
-      </h3>
+  <EuiPageHeader>
+    <EuiTitle
+      size="l"
+    >
+      <h1>
+        Audit Logging
+      </h1>
     </EuiTitle>
-    <EuiHorizontalRule
-      margin="m"
-    />
+  </EuiPageHeader>
+  <EuiSpacer />
+  <EuiPanel>
     <EuiForm>
       <EuiDescribedFormGroup
         className="described-form-group"
@@ -644,3 +646,39 @@ exports[`Audit logs render when AuditLoggingSettings.enabled is true 1`] = `
   </EuiPanel>
 </div>
 `;
+
+exports[`Audit logs should load access error component 1`] = `
+<div
+  className="panel-restrict-width"
+>
+  <Memo()
+    coreStart={
+      Object {
+        "http": 1,
+      }
+    }
+    dataSourcePickerReadOnly={false}
+    navigation={Object {}}
+    selectedDataSource={
+      Object {
+        "id": "test",
+      }
+    }
+    setDataSource={[MockFunction]}
+  />
+  <EuiPageHeader>
+    <EuiTitle
+      size="l"
+    >
+      <h1>
+        Audit Logging
+      </h1>
+    </EuiTitle>
+  </EuiPageHeader>
+  <EuiSpacer />
+  <AccessErrorComponent
+    loading={false}
+    message="You do not have permissions to configure audit logging settings"
+  />
+</div>
+`;
diff --git a/public/apps/configuration/panels/audit-logging/test/audit-logging.test.tsx b/public/apps/configuration/panels/audit-logging/test/audit-logging.test.tsx
@@ -187,4 +187,17 @@ describe('Audit logs', () => {
       buildHashUrl(ResourceType.auditLogging) + SUB_URL_FOR_COMPLIANCE_SETTINGS_EDIT
     );
   });
+
+  it('should load access error component', () => {
+    const auditLoggingSettings = { enabled: true };
+    jest
+      .spyOn(React, 'useState')
+      .mockImplementationOnce(() => [auditLoggingSettings, setState])
+      .mockImplementationOnce(() => [false, jest.fn()])
+      .mockImplementationOnce(() => [true, jest.fn()]);
+    const component = shallow(
+      <AuditLogging coreStart={mockCoreStart as any} navigation={{} as any} />
+    );
+    expect(component).toMatchSnapshot();
+  });
 });
diff --git a/public/apps/configuration/panels/auth-view/auth-view.tsx b/public/apps/configuration/panels/auth-view/auth-view.tsx
@@ -13,8 +13,8 @@
  *   permissions and limitations under the License.
  */
 
-import React, { useContext, useState } from 'react';
-import { EuiPageHeader, EuiSpacer, EuiTitle } from '@elastic/eui';
+import React, { useContext } from 'react';
+import { EuiLoadingContent, EuiPageHeader, EuiSpacer, EuiTitle } from '@elastic/eui';
 import { isEmpty } from 'lodash';
 import { AuthenticationSequencePanel } from './authentication-sequence-panel';
 import { AuthorizationPanel } from './authorization-panel';
@@ -25,12 +25,12 @@ 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';
+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 [loading, setLoading] = React.useState(false);
   const { dataSource, setDataSource } = useContext(DataSourceContext)!;
   const [errorFlag, setErrorFlag] = React.useState(false);
   const [accessErrorFlag, setAccessErrorFlag] = React.useState(false);
@@ -59,7 +59,7 @@ export function AuthView(props: AppDependencies) {
     fetchData();
   }, [props.coreStart.http, dataSource]);
 
-  if (isEmpty(authentication)) {
+  if (isEmpty(authentication) && !loading) {
     return (
       <>
         <SecurityPluginTopNavMenu
@@ -97,14 +97,16 @@ export function AuthView(props: AppDependencies) {
         <EuiTitle size="l">
           <h1>Authentication and authorization</h1>
         </EuiTitle>
-        {!errorFlag && props.config.ui.backend_configurable && (
+        {!loading && !errorFlag && props.config.ui.backend_configurable && (
           <ExternalLinkButton
             href={DocLinks.BackendConfigurationDoc}
             text="Manage via config.yml"
           />
         )}
       </EuiPageHeader>
-      {accessErrorFlag ? (
+      {loading ? (
+        <EuiLoadingContent />
+      ) : accessErrorFlag ? (
         <AccessErrorComponent loading={loading} dataSourceLabel={dataSource && dataSource.label} />
       ) : (
         <>

diff --git a/public/apps/configuration/panels/auth-view/test/__snapshots__/auth-view.test.tsx.snap b/public/apps/configuration/panels/auth-view/test/__snapshots__/auth-view.test.tsx.snap
@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Auth view should load access error component 1`] = `
+<Fragment>
+  <Memo()
+    coreStart={
+      Object {
+        "http": 1,
+      }
+    }
+    dataSourcePickerReadOnly={false}
+    navigation={Object {}}
+    selectedDataSource={
+      Object {
+        "id": "test",
+      }
+    }
+    setDataSource={[MockFunction]}
+  />
+  <EuiTitle
+    size="l"
+  >
+    <h1>
+      Authentication and authorization
+    </h1>
+  </EuiTitle>
+  <AccessErrorComponent
+    loading={false}
+  />
+</Fragment>
+`;
diff --git a/public/apps/configuration/panels/auth-view/test/auth-view.test.tsx b/public/apps/configuration/panels/auth-view/test/auth-view.test.tsx
@@ -29,38 +29,37 @@ describe('Auth view', () => {
   const mockCoreStart = {
     http: 1,
   };
+  const config = {
+    authc: {
+      basic_internal_auth_domain: {
+        authentication_backend: {
+          type: 'intern',
+          config: {},
+        },
+      },
+    },
+    authz: {
+      ldap: {
+        http_enabled: true,
+      },
+    },
+  };
 
   const setState = jest.fn();
 
   beforeEach(() => {
-    // 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()])
       .mockImplementationOnce(() => [false, jest.fn()]);
     jest.spyOn(React, 'useEffect').mockImplementationOnce((f) => f());
   });
 
   it('valid data', (done) => {
-    const config = {
-      authc: {
-        basic_internal_auth_domain: {
-          authentication_backend: {
-            type: 'intern',
-            config: {},
-          },
-        },
-      },
-      authz: {
-        ldap: {
-          http_enabled: true,
-        },
-      },
-    };
-
     mockAuthViewUtils.getSecurityConfig = jest.fn().mockReturnValue(config);
 
     shallow(<AuthView coreStart={mockCoreStart as any} navigation={{} as any} />);
@@ -92,4 +91,20 @@ describe('Auth view', () => {
       done();
     });
   });
+
+  it('should load access error component', async () => {
+    jest.spyOn(React, 'useState').mockRestore();
+    jest
+      .spyOn(React, 'useState')
+      .mockImplementationOnce(() => [[], setState])
+      .mockImplementationOnce(() => [[], setState])
+      .mockImplementationOnce(() => [false, jest.fn()])
+      .mockImplementationOnce(() => [false, jest.fn()])
+      .mockImplementationOnce(() => [true, jest.fn()]);
+    mockAuthViewUtils.getSecurityConfig = jest
+      .fn()
+      .mockRejectedValue({ response: { status: 403 } });
+    const component = shallow(<AuthView coreStart={mockCoreStart as any} navigation={{} as any} />);
+    expect(component).toMatchSnapshot();
+  });
 });
diff --git a/public/apps/configuration/panels/permission-list/permission-list.tsx b/public/apps/configuration/panels/permission-list/permission-list.tsx
@@ -32,6 +32,7 @@ import {
   RIGHT_ALIGNMENT,
   EuiButtonEmpty,
   Query,
+  EuiLoadingContent,
 } from '@elastic/eui';
 import { difference } from 'lodash';
 import React, {
@@ -63,7 +64,7 @@ import { generateResourceName } from '../../utils/resource-utils';
 import { DocLinks } from '../../constants';
 import { SecurityPluginTopNavMenu } from '../../top-nav-menu';
 import { DataSourceContext } from '../../app-router';
-import { AccessErrorComponent } from '../../../access-error-component';
+import { AccessErrorComponent } from '../../access-error-component';
 
 export function renderBooleanToCheckMark(value: boolean): React.ReactNode {
   return value ? <EuiIcon type="check" /> : '';
@@ -367,7 +368,9 @@ export function PermissionList(props: AppDependencies) {
           <h1>Permissions</h1>
         </EuiTitle>
       </EuiPageHeader>
-      {accessErrorFlag ? (
+      {loading ? (
+        <EuiLoadingContent />
+      ) : accessErrorFlag ? (
         <AccessErrorComponent loading={loading} dataSourceLabel={dataSource && dataSource.label} />
       ) : (
         <EuiPageContent>

diff --git a/public/apps/configuration/panels/role-list.tsx b/public/apps/configuration/panels/role-list.tsx
@@ -30,6 +30,7 @@ import {
   EuiButtonEmpty,
   EuiSearchBarProps,
   Query,
+  EuiLoadingContent,
 } from '@elastic/eui';
 import { difference } from 'lodash';
 import { AppDependencies } from '../../types';
@@ -56,7 +57,7 @@ import { useContextMenuState } from '../utils/context-menu';
 import { DocLinks } from '../constants';
 import { DataSourceContext } from '../app-router';
 import { SecurityPluginTopNavMenu } from '../top-nav-menu';
-import { AccessErrorComponent } from '../../access-error-component';
+import { AccessErrorComponent } from '../access-error-component';
 
 const columns: Array<EuiBasicTableColumn<RoleListing>> = [
   {
@@ -271,7 +272,9 @@ export function RoleList(props: AppDependencies) {
           <h1>Roles</h1>
         </EuiTitle>
       </EuiPageHeader>
-      {accessErrorFlag ? (
+      {loading ? (
+        <EuiLoadingContent />
+      ) : accessErrorFlag ? (
         <AccessErrorComponent loading={loading} dataSourceLabel={dataSource && dataSource.label} />
       ) : (
         <EuiPageContent>