Fixes an issue when loading unknown datasource causes page to crash

package.json

@@ -43,6 +43,7 @@
   "dependencies": {
     "@hapi/cryptiles": "5.0.0",
     "@hapi/wreck": "^17.1.0",
+    "@opensearch-project/oui": "^1.6.0",
     "html-entities": "1.3.1",
     "zxcvbn": "^4.4.2"
   },

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,6 +136,7 @@ export function renderComplianceSettings(config: AuditLoggingSettings) {
 }
 
 export function AuditLogging(props: AuditLoggingProps) {
+  const dataSourceEnabled = !!props.depsStart.dataSource?.dataSourceEnabled;
   const [configuration, setConfiguration] = React.useState<AuditLoggingSettings>({});
   const { dataSource, setDataSource } = useContext(DataSourceContext)!;
 
@@ -163,7 +165,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 +231,10 @@ export function AuditLogging(props: AuditLoggingProps) {
     );
   }
 
+  if (dataSourceEnabled && dataSource === undefined) {
+    return <UnknownDataSourcePage {...props} />;
+  }
+
   return (
     <div className="panel-restrict-width">
       <SecurityPluginTopNavMenu

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

@@ -25,11 +25,13 @@ import { getSecurityConfig } from '../../utils/auth-view-utils';
 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,16 @@ export function AuthView(props: AppDependencies) {
     };
 
     fetchData();
-  }, [props.coreStart.http, dataSource.id]);
+  }, [props.coreStart.http, dataSource]);
 
   if (isEmpty(authentication)) {
+    if (dataSourceEnabled && dataSource === undefined) {
+      return (
+        <>
+          <UnknownDataSourcePage {...props} />
+        </>
+      );
+    }
     return (
       <>
         <SecurityPluginTopNavMenu
@@ -64,6 +73,9 @@ export function AuthView(props: AppDependencies) {
     );
   }
 
+  if (dataSourceEnabled && dataSource === undefined) {
+    return <UnknownDataSourcePage {...props} />;
+  }
   return (
     <>
       <SecurityPluginTopNavMenu

public/apps/configuration/panels/get-started.tsx

@@ -39,6 +39,7 @@ import { createSuccessToast, createUnknownErrorToast, useToastState } from '../u
 import { SecurityPluginTopNavMenu } from '../top-nav-menu';
 import { DataSourceContext } from '../app-router';
 import { getClusterInfo } from '../../../utils/datasource-utils';
+import { UnknownDataSourcePage } from '../unknown-datasource';
 
 const addBackendStep = {
   title: 'Add backends',
@@ -173,6 +174,9 @@ export function GetStarted(props: AppDependencies) {
   }
   const [toasts, addToast, removeToast] = useToastState();
 
+  if (dataSourceEnabled && dataSource === undefined) {
+    return <UnknownDataSourcePage {...props} />;
+  }
   return (
     <>
       <div className="panel-restrict-width">

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

@@ -49,6 +49,7 @@ import { constructErrorMessageAndLog } from '../../../error-utils';
 import { BackendRolePanel } from './backend-role-panel';
 import { DataSourceContext } from '../../app-router';
 import { SecurityPluginTopNavMenu } from '../../top-nav-menu';
+import { UnknownDataSourcePage } from '../../unknown-datasource';
 
 interface InternalUserEditDeps extends BreadcrumbsPageDependencies {
   action: 'create' | 'edit' | 'duplicate';
@@ -98,7 +99,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 {
@@ -147,6 +148,10 @@ export function InternalUserEdit(props: InternalUserEditDeps) {
     }
   };
 
+  if (dataSourceEnabled && dataSource === undefined) {
+    return <UnknownDataSourcePage {...props} />;
+  }
+
   return (
     <>
       <SecurityPluginTopNavMenu

public/apps/configuration/panels/permission-list/permission-list.tsx

@@ -63,6 +63,7 @@ import { generateResourceName } from '../../utils/resource-utils';
 import { DocLinks } from '../../constants';
 import { SecurityPluginTopNavMenu } from '../../top-nav-menu';
 import { DataSourceContext } from '../../app-router';
+import { UnknownDataSourcePage } from '../../unknown-datasource';
 
 export function renderBooleanToCheckMark(value: boolean): React.ReactNode {
   return value ? <EuiIcon type="check" /> : '';
@@ -216,11 +217,11 @@ export function PermissionList(props: AppDependencies) {
     } finally {
       setLoading(false);
     }
-  }, [props.coreStart.http, dataSource.id]);
+  }, [props.coreStart.http, dataSource]);
 
   React.useEffect(() => {
     fetchData();
-  }, [props.coreStart.http, fetchData, dataSource.id]);
+  }, [props.coreStart.http, fetchData, dataSource]);
 
   const handleDelete = async () => {
     const groupsToDelete: string[] = selection.map((r) => r.name);
@@ -348,6 +349,10 @@ export function PermissionList(props: AppDependencies) {
     createActionGroupMenuItems
   );
 
+  if (dataSourceEnabled && dataSource === undefined) {
+    return <UnknownDataSourcePage {...props} />;
+  }
+
   return (
     <>
       <SecurityPluginTopNavMenu

public/apps/configuration/panels/role-edit/role-edit.tsx

@@ -59,6 +59,7 @@ import { generateResourceName } from '../../utils/resource-utils';
 import { NameRow } from '../../utils/name-row';
 import { DataSourceContext } from '../../app-router';
 import { SecurityPluginTopNavMenu } from '../../top-nav-menu';
+import { UnknownDataSourcePage } from '../../unknown-datasource';
 
 interface RoleEditDeps extends BreadcrumbsPageDependencies {
   action: 'create' | 'edit' | 'duplicate';
@@ -114,7 +115,7 @@ export function RoleEdit(props: RoleEditDeps) {
 
       fetchData();
     }
-  }, [addToast, props.action, props.coreStart.http, props.sourceRoleName, dataSource.id]);
+  }, [addToast, props.action, props.coreStart.http, props.sourceRoleName, dataSource]);
 
   const [actionGroups, setActionGroups] = useState<Array<[string, ActionGroupItem]>>([]);
   React.useEffect(() => {
@@ -129,7 +130,7 @@ export function RoleEdit(props: RoleEditDeps) {
     };
 
     fetchActionGroupNames();
-  }, [addToast, props.coreStart.http, dataSource.id]);
+  }, [addToast, props.coreStart.http, dataSource]);
 
   const [tenantNames, setTenantNames] = React.useState<string[]>([]);
   React.useEffect(() => {
@@ -143,7 +144,7 @@ export function RoleEdit(props: RoleEditDeps) {
     };
 
     fetchTenantNames();
-  }, [addToast, props.coreStart.http, dataSource.id]);
+  }, [addToast, props.coreStart.http, dataSource]);
 
   const updateRoleHandler = async () => {
     try {
@@ -233,6 +234,10 @@ export function RoleEdit(props: RoleEditDeps) {
 
   const tenantOptions = tenantNames.map(stringToComboBoxOption);
 
+  if (dataSourceEnabled && dataSource === undefined) {
+    return <UnknownDataSourcePage {...props} />;
+  }
+
   return (
     <>
       <SecurityPluginTopNavMenu

public/apps/configuration/panels/role-list.tsx

@@ -56,6 +56,7 @@ import { useContextMenuState } from '../utils/context-menu';
 import { DocLinks } from '../constants';
 import { DataSourceContext } from '../app-router';
 import { SecurityPluginTopNavMenu } from '../top-nav-menu';
+import { UnknownDataSourcePage } from '../unknown-datasource';
 
 const columns: Array<EuiBasicTableColumn<RoleListing>> = [
   {
@@ -103,6 +104,7 @@ const columns: Array<EuiBasicTableColumn<RoleListing>> = [
 ];
 
 export function RoleList(props: AppDependencies) {
+  const dataSourceEnabled = !!props.depsStart.dataSource?.dataSourceEnabled;
   const [roleData, setRoleData] = React.useState<RoleListing[]>([]);
   const [errorFlag, setErrorFlag] = React.useState(false);
   const [selection, setSelection] = React.useState<RoleListing[]>([]);
@@ -127,7 +129,7 @@ export function RoleList(props: AppDependencies) {
     };
 
     fetchData();
-  }, [props.coreStart.http, dataSource.id]);
+  }, [props.coreStart.http, dataSource]);
 
   const handleDelete = async () => {
     const rolesToDelete: string[] = selection.map((r) => r.roleName);
@@ -252,6 +254,14 @@ export function RoleList(props: AppDependencies) {
     });
   }, [roleData]);
 
+  if (dataSourceEnabled && dataSource === undefined) {
+    return (
+      <>
+        <UnknownDataSourcePage {...props} />
+      </>
+    );
+  }
+
   return (
     <>
       <SecurityPluginTopNavMenu

public/apps/configuration/panels/role-mapping/role-edit-mapped-user.tsx

@@ -46,6 +46,7 @@ import { ExternalLink } from '../../utils/display-utils';
 import { SecurityPluginTopNavMenu } from '../../top-nav-menu';
 import { DataSourceContext } from '../../app-router';
 import { getClusterInfo } from '../../../../utils/datasource-utils';
+import { UnknownDataSourcePage } from '../../unknown-datasource';
 
 interface RoleEditMappedUserProps extends BreadcrumbsPageDependencies {
   roleName: string;
@@ -86,7 +87,7 @@ export function RoleEditMappedUser(props: RoleEditMappedUserProps) {
     };
 
     fetchData();
-  }, [addToast, props.coreStart.http, props.roleName, dataSource.id]);
+  }, [addToast, props.coreStart.http, props.roleName, dataSource]);
 
   React.useEffect(() => {
     const fetchInternalUserNames = async () => {
@@ -101,7 +102,7 @@ export function RoleEditMappedUser(props: RoleEditMappedUserProps) {
     };
 
     fetchInternalUserNames();
-  }, [addToast, props.coreStart.http, dataSource.id]);
+  }, [addToast, props.coreStart.http, dataSource]);
   const internalUserOptions = userNames.map(stringToComboBoxOption);
 
   const updateRoleMappingHandler = async () => {
@@ -144,6 +145,10 @@ export function RoleEditMappedUser(props: RoleEditMappedUserProps) {
     }
   };
 
+  if (dataSourceEnabled && dataSource === undefined) {
+    return <UnknownDataSourcePage {...props} />;
+  }
+
   return (
     <>
       <SecurityPluginTopNavMenu

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

@@ -72,6 +72,7 @@ import { setCrossPageToast } from '../../utils/storage-utils';
 import { DataSourceContext } from '../../app-router';
 import { SecurityPluginTopNavMenu } from '../../top-nav-menu';
 import { getClusterInfo } from '../../../../utils/datasource-utils';
+import { UnknownDataSourcePage } from '../../unknown-datasource';
 
 interface RoleViewProps extends BreadcrumbsPageDependencies {
   roleName: string;
@@ -147,7 +148,7 @@ export function RoleView(props: RoleViewProps) {
     };
 
     fetchData();
-  }, [addToast, props.coreStart.http, props.roleName, props.prevAction, dataSource.id]);
+  }, [addToast, props.coreStart.http, props.roleName, props.prevAction, dataSource]);
 
   const handleRoleMappingDelete = async () => {
     try {
@@ -391,6 +392,10 @@ export function RoleView(props: RoleViewProps) {
     );
   }
 
+  if (dataSourceEnabled && dataSource === undefined) {
+    return <UnknownDataSourcePage {...props} />;
+  }
+
   return (
     <>
       <SecurityPluginTopNavMenu

public/apps/configuration/panels/user-list.tsx

@@ -50,6 +50,7 @@ import { showTableStatusMessage } from '../utils/loading-spinner-utils';
 import { buildHashUrl } from '../utils/url-builder';
 import { DataSourceContext } from '../app-router';
 import { SecurityPluginTopNavMenu } from '../top-nav-menu';
+import { UnknownDataSourcePage } from '../unknown-datasource';
 
 export function dictView(items: Dictionary<string>) {
   if (isEmpty(items)) {
@@ -99,6 +100,7 @@ export function getColumns(currentUsername: string) {
 }
 
 export function UserList(props: AppDependencies) {
+  const dataSourceEnabled = !!props.depsStart.dataSource?.dataSourceEnabled;
   const [userData, setUserData] = React.useState<InternalUsersListing[]>([]);
   const [errorFlag, setErrorFlag] = React.useState(false);
   const [selection, setSelection] = React.useState<InternalUsersListing[]>([]);
@@ -128,7 +130,7 @@ export function UserList(props: AppDependencies) {
     };
 
     fetchData();
-  }, [props.coreStart.http, dataSource.id]);
+  }, [props.coreStart.http, dataSource]);
 
   const handleDelete = async () => {
     const usersToDelete: string[] = selection.map((r) => r.username);
@@ -200,6 +202,10 @@ export function UserList(props: AppDependencies) {
 
   const [actionsMenu, closeActionsMenu] = useContextMenuState('Actions', {}, actionsMenuItems);
 
+  if (dataSourceEnabled && dataSource === undefined) {
+    return <UnknownDataSourcePage {...props} />;
+  }
+
   return (
     <>
       <SecurityPluginTopNavMenu