Fixes an issue when loading unknown datasource causes page to crash

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

@@ -38,6 +38,7 @@ import { setCrossPageToast } from '../../utils/storage-utils';
 import { SecurityPluginTopNavMenu } from '../../top-nav-menu';
 import { DataSourceContext } from '../../app-router';
 import { getClusterInfo } from '../../../../utils/datasource-utils';
+import { UnknownDataSourcePage } from '../../unknown-datasource';
 
 interface AuditLoggingEditSettingProps extends AppDependencies {
   setting: 'general' | 'compliance';
@@ -76,7 +77,7 @@ export function AuditLoggingEditSettings(props: AuditLoggingEditSettingProps) {
     };
 
     fetchConfig();
-  }, [props.coreStart.http, dataSource.id]);
+  }, [props.coreStart.http, dataSource]);
 
   const renderSaveAndCancel = () => {
     return (
@@ -248,6 +249,10 @@ export function AuditLoggingEditSettings(props: AuditLoggingEditSettingProps) {
     content = renderComplianceSetting();
   }
 
+  if (dataSourceEnabled && dataSource === undefined) {
+    return <UnknownDataSourcePage {...props} />;
+  }
+
   return (
     <div className="panel-restrict-width">
       <SecurityPluginTopNavMenu

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

@@ -45,6 +45,7 @@ import { ViewSettingGroup } from './view-setting-group';
 import { DocLinks } from '../../constants';
 import { DataSourceContext } from '../../app-router';
 import { SecurityPluginTopNavMenu } from '../../top-nav-menu';
+import { UnknownDataSourcePage } from '../../unknown-datasource';
 
 interface AuditLoggingProps extends AppDependencies {
   fromType: string;
@@ -135,8 +136,11 @@ export function renderComplianceSettings(config: AuditLoggingSettings) {
 }
 
 export function AuditLogging(props: AuditLoggingProps) {
+  const dataSourceEnabled = !!props.depsStart.dataSource?.dataSourceEnabled;
+  console.log(props.depsStart);
   const [configuration, setConfiguration] = React.useState<AuditLoggingSettings>({});
   const { dataSource, setDataSource } = useContext(DataSourceContext)!;
+  console.log(dataSource);
 
   const onSwitchChange = async () => {
     try {
@@ -163,7 +167,7 @@ export function AuditLogging(props: AuditLoggingProps) {
     };
 
     fetchData();
-  }, [props.coreStart.http, props.fromType, dataSource.id]);
+  }, [props.coreStart.http, props.fromType, dataSource]);
 
   const statusPanel = renderStatusPanel(onSwitchChange, configuration.enabled || false);
 
@@ -229,6 +233,10 @@ export function AuditLogging(props: AuditLoggingProps) {
     );
   }
 
+  if (dataSourceEnabled && dataSource === undefined) {
+    return <UnknownDataSourcePage {...props} />;
+  }
+
   return (
     <div className="panel-restrict-width">
       <SecurityPluginTopNavMenu

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

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Audit logs edit Render unable to access dataSource when enabled and inaccessible 1`] = `
+<Memo()
+  coreStart={
+    Object {
+      "http": 1,
+    }
+  }
+  depsStart={
+    Object {
+      "dataSource": Object {
+        "dataSourceEnabled": true,
+      },
+    }
+  }
+  navigation={Object {}}
+/>
+`;

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

@@ -248,6 +248,7 @@ exports[`Audit logs render when AuditLoggingSettings.enabled is true 1`] = `
       }
     }
     dataSourcePickerReadOnly={false}
+    depsStart={Object {}}
     navigation={Object {}}
     selectedDataSource={
       Object {
@@ -644,3 +645,21 @@ exports[`Audit logs render when AuditLoggingSettings.enabled is true 1`] = `
   </EuiPanel>
 </div>
 `;
+
+exports[`Audit logs Render unable to access dataSource when enabled and inaccessible 1`] = `
+<Memo()
+  coreStart={
+    Object {
+      "http": 1,
+    }
+  }
+  depsStart={
+    Object {
+      "dataSource": Object {
+        "dataSourceEnabled": true,
+      },
+    }
+  }
+  navigation={Object {}}
+/>
+`;

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

@@ -39,6 +39,14 @@ describe('Audit logs edit', () => {
     jest.spyOn(React, 'useState').mockImplementation((initialValue) => [initialValue, setState]);
   });
 
+  afterEach(() => {
+    React.useContext.mockRestore();
+    React.useContext.mockReturnValue({
+      dataSource: { id: 'test' },
+      setDataSource: jest.fn(),
+    });
+  });
+
   it('Render edit general settings', (done) => {
     jest.spyOn(React, 'useEffect').mockImplementationOnce((f) => f());
 
@@ -172,4 +180,24 @@ describe('Audit logs edit', () => {
     expect(mockAuditLoggingUtils.updateAuditLogging).toBeCalled();
     expect(window.location.hash).toBe(buildHashUrl(ResourceType.auditLogging));
   });
+
+  it('Render unable to access dataSource when enabled and inaccessible', () => {
+    React.useContext.mockImplementation(() => ({
+      dataSource: undefined,
+      setDataSource: jest.fn(),
+    }));
+    const depsStart = {
+      dataSource: {
+        dataSourceEnabled: true,
+      },
+    };
+    const component = shallow(
+      <AuditLoggingEditSettings
+        coreStart={mockCoreStart as any}
+        depsStart={depsStart as any}
+        navigation={{} as any}
+      />
+    );
+    expect(component).toMatchSnapshot();
+  });
 });

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

@@ -39,11 +39,21 @@ describe('Audit logs', () => {
     http: 1,
   };
 
+  const mockDepsStart = {};
+
   beforeEach(() => {
     jest.spyOn(React, 'useState').mockImplementation((initialValue) => [initialValue, setState]);
     jest.spyOn(React, 'useEffect').mockImplementationOnce((f) => f());
   });
 
+  afterEach(() => {
+    React.useContext.mockRestore();
+    React.useContext.mockReturnValue({
+      dataSource: { id: 'test' },
+      setDataSource: jest.fn(),
+    });
+  });
+
   it('Render disabled', () => {
     const mockAuditLoggingData = {
       enabled: false,
@@ -54,7 +64,11 @@ describe('Audit logs', () => {
     mockAuditLoggingUtils.getAuditLogging = jest.fn().mockReturnValue(mockAuditLoggingData);
 
     const component = shallow(
-      <AuditLogging coreStart={mockCoreStart as any} navigation={{} as any} />
+      <AuditLogging
+        coreStart={mockCoreStart as any}
+        depsStart={mockDepsStart as any}
+        navigation={{} as any}
+      />
     );
 
     const switchFound = component.find(EuiSwitch);
@@ -72,7 +86,13 @@ describe('Audit logs', () => {
 
     mockAuditLoggingUtils.getAuditLogging = jest.fn().mockReturnValue(mockAuditLoggingData);
 
-    shallow(<AuditLogging coreStart={mockCoreStart as any} navigation={{} as any} />);
+    shallow(
+      <AuditLogging
+        coreStart={mockCoreStart as any}
+        depsStart={mockDepsStart as any}
+        navigation={{} as any}
+      />
+    );
 
     process.nextTick(() => {
       expect(mockAuditLoggingUtils.getAuditLogging).toHaveBeenCalledTimes(1);
@@ -90,7 +110,13 @@ describe('Audit logs', () => {
       throw Error();
     });
 
-    shallow(<AuditLogging coreStart={mockCoreStart as any} navigation={{} as any} />);
+    shallow(
+      <AuditLogging
+        coreStart={mockCoreStart as any}
+        depsStart={mockDepsStart as any}
+        navigation={{} as any}
+      />
+    );
 
     process.nextTick(() => {
       expect(mockAuditLoggingUtils.getAuditLogging).toHaveBeenCalledTimes(1);
@@ -116,7 +142,11 @@ describe('Audit logs', () => {
 
   it('audit logging switch change', () => {
     const component = shallow(
-      <AuditLogging coreStart={mockCoreStart as any} navigation={{} as any} />
+      <AuditLogging
+        coreStart={mockCoreStart as any}
+        depsStart={mockDepsStart as any}
+        navigation={{} as any}
+      />
     );
     component.find('[data-test-subj="audit-logging-enabled-switch"]').simulate('change');
     expect(mockAuditLoggingUtils.updateAuditLogging).toHaveBeenCalledTimes(1);
@@ -130,7 +160,11 @@ describe('Audit logs', () => {
       throw Error();
     });
     const component = shallow(
-      <AuditLogging coreStart={mockCoreStart as any} navigation={{} as any} />
+      <AuditLogging
+        coreStart={mockCoreStart as any}
+        depsStart={mockDepsStart as any}
+        navigation={{} as any}
+      />
     );
     component.find('[data-test-subj="audit-logging-enabled-switch"]').simulate('change');
 
@@ -142,7 +176,11 @@ describe('Audit logs', () => {
     const auditLoggingSettings = { enabled: true };
     jest.spyOn(React, 'useState').mockImplementation(() => [auditLoggingSettings, setState]);
     const component = shallow(
-      <AuditLogging coreStart={mockCoreStart as any} navigation={{} as any} />
+      <AuditLogging
+        coreStart={mockCoreStart as any}
+        depsStart={mockDepsStart as any}
+        navigation={{} as any}
+      />
     );
     expect(component).toMatchSnapshot();
   });
@@ -151,7 +189,11 @@ describe('Audit logs', () => {
     const auditLoggingSettings = { enabled: true };
     jest.spyOn(React, 'useState').mockImplementation(() => [auditLoggingSettings, setState]);
     const component = shallow(
-      <AuditLogging coreStart={mockCoreStart as any} navigation={{} as any} />
+      <AuditLogging
+        coreStart={mockCoreStart as any}
+        depsStart={mockDepsStart as any}
+        navigation={{} as any}
+      />
     );
     component.find('[data-test-subj="general-settings-configure"]').simulate('click');
     expect(window.location.hash).toBe(
@@ -163,11 +205,35 @@ describe('Audit logs', () => {
     const auditLoggingSettings = { enabled: true };
     jest.spyOn(React, 'useState').mockImplementation(() => [auditLoggingSettings, setState]);
     const component = shallow(
-      <AuditLogging coreStart={mockCoreStart as any} navigation={{} as any} />
+      <AuditLogging
+        coreStart={mockCoreStart as any}
+        depsStart={mockDepsStart as any}
+        navigation={{} as any}
+      />
     );
     component.find('[data-test-subj="compliance-settings-configure"]').simulate('click');
     expect(window.location.hash).toBe(
       buildHashUrl(ResourceType.auditLogging) + SUB_URL_FOR_COMPLIANCE_SETTINGS_EDIT
     );
   });
+
+  it('Render unable to access dataSource when enabled and inaccessible', () => {
+    React.useContext.mockImplementation(() => ({
+      dataSource: undefined,
+      setDataSource: jest.fn(),
+    }));
+    const depsStart = {
+      dataSource: {
+        dataSourceEnabled: true,
+      },
+    };
+    const component = shallow(
+      <AuditLogging
+        coreStart={mockCoreStart as any}
+        depsStart={depsStart as any}
+        navigation={{} as any}
+      />
+    );
+    expect(component).toMatchSnapshot();
+  });
 });

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

@@ -25,11 +25,13 @@
 import { InstructionView } from './instruction-view';
 import { DataSourceContext } from '../../app-router';
 import { SecurityPluginTopNavMenu } from '../../top-nav-menu';
+import { UnknownDataSourcePage } from '../../unknown-datasource';
 
 export function AuthView(props: AppDependencies) {
   const [authentication, setAuthentication] = React.useState([]);
   const [authorization, setAuthorization] = React.useState([]);
   const [loading, setLoading] = useState(false);
+  const dataSourceEnabled = !!props.depsStart.dataSource?.dataSourceEnabled;
   const { dataSource, setDataSource } = useContext(DataSourceContext)!;
 
   React.useEffect(() => {
@@ -48,9 +50,18 @@
     };
 
     fetchData();
-  }, [props.coreStart.http, dataSource.id]);
+  }, [props.coreStart.http, dataSource]);
 
   if (isEmpty(authentication)) {
+    console.log(dataSource);
+    console.log(dataSourceEnabled);
+    if (dataSourceEnabled && dataSource === undefined) {
+      return (
+        <>
+          <UnknownDataSourcePage {...props} />
+        </>
+      );
+    }
     return (
       <>
         <SecurityPluginTopNavMenu
@@ -64,6 +75,9 @@
     );
   }
 
+  if (dataSourceEnabled && dataSource === undefined) {
+    return <UnknownDataSourcePage {...props} />;
+  }
   return (
     <>
       <SecurityPluginTopNavMenu

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

@@ -0,0 +1,41 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Auth view Render unable to access dataSource when enabled and inaccessible 1`] = `
+<Fragment>
+  <Memo()
+    coreStart={
+      Object {
+        "http": 1,
+      }
+    }
+    depsStart={
+      Object {
+        "dataSource": Object {
+          "dataSourceEnabled": true,
+        },
+      }
+    }
+    navigation={Object {}}
+  />
+</Fragment>
+`;
+
+exports[`Auth view Render unable to access dataSource when enabled and inaccessible: Empty Authentication 1`] = `
+<Fragment>
+  <Memo()
+    coreStart={
+      Object {
+        "http": 1,
+      }
+    }
+    depsStart={
+      Object {
+        "dataSource": Object {
+          "dataSourceEnabled": true,
+        },
+      }
+    }
+    navigation={Object {}}
+  />
+</Fragment>
+`;