[MM-52618] Adding generic error to handle network issues when fetching groups (#23495)

* adding generic error to handle network issues
---------
Co-authored-by: Mattermost Build <build@mattermost.com>

webapp/channels/src/components/admin_console/group_settings/groups_list/groups_list.tsx

@@ -48,6 +48,7 @@ type FilterSearchMap = {
 type State = {
     checked?: any;
     loading: boolean;
+    fetchError: boolean;
     page: number;
     showFilters: boolean;
     searchString: string;
@@ -75,6 +76,7 @@ export default class GroupsList extends React.PureComponent<Props, State> {
         super(props);
         this.state = {
             checked: {},
+            fetchError: false,
             loading: true,
             page: 0,
             showFilters: false,
@@ -91,9 +93,7 @@ export default class GroupsList extends React.PureComponent<Props, State> {
     };
 
     public componentDidMount() {
-        this.props.actions.getLdapGroups(this.state.page, LDAP_GROUPS_PAGE_SIZE).then(() => {
+        this.props.actions.getLdapGroups(this.state.page, LDAP_GROUPS_PAGE_SIZE).then(this.handleGetGroupsResponse);
-            this.setState({loading: false});
-        });
     }
 
     public async previousPage(e: any): Promise<void> {
@@ -232,6 +232,16 @@ export default class GroupsList extends React.PureComponent<Props, State> {
                 </div>
             );
         }
+        if (this.state.fetchError) {
+            return (
+                <div className='groups-list-empty'>
+                    <FormattedMessage
+                        id='admin.group_settings.groups_list.groups_list_error'
+                        defaultMessage='Failed to retrieve LDAP groups. Please check your logs for details.'
+                    />
+                </div>
+            );
+        }
         if (this.props.groups.length === 0) {
             return (
                 <div className='groups-list-empty'>
@@ -294,9 +304,7 @@ export default class GroupsList extends React.PureComponent<Props, State> {
         newState.showFilters = false;
         this.setState(newState);
 
-        this.props.actions.getLdapGroups(page, LDAP_GROUPS_PAGE_SIZE, opts).then(() => {
+        this.props.actions.getLdapGroups(page, LDAP_GROUPS_PAGE_SIZE, opts).then(this.handleGetGroupsResponse);
-            this.setState({loading: false});
-        });
     }
 
     public handleGroupSearchKeyUp(e: any) {
@@ -434,9 +442,16 @@ export default class GroupsList extends React.PureComponent<Props, State> {
             filterIsUnlinked: false,
         };
         this.setState(newState as any);
-        this.props.actions.getLdapGroups(this.state.page, LDAP_GROUPS_PAGE_SIZE, {q: ''}).then(() => {
+        this.props.actions.getLdapGroups(this.state.page, LDAP_GROUPS_PAGE_SIZE, {q: ''}).then(this.handleGetGroupsResponse);
-            this.setState({loading: false});
+    };
-        });
+
+    handleGetGroupsResponse = (response: any) => {
+        if (response?.error) {
+            this.setState({fetchError: true});
+        } else {
+            this.setState({fetchError: false});
+        }
+        this.setState({loading: false});
     };
 
     public render(): JSX.Element {

webapp/channels/src/i18n/en.json

@@ -1104,6 +1104,7 @@
   "admin.group_settings.group_row.not_linked": "Not Linked",
   "admin.group_settings.group_row.unlink_failed": "Unlink failed",
   "admin.group_settings.group_row.unlinking": "Unlinking",
+  "admin.group_settings.groups_list.groups_list_error": "Failed to retrieve LDAP groups. Please check your logs for details.",
   "admin.group_settings.groups_list.link_selected": "Link Selected Groups",
   "admin.group_settings.groups_list.mappingHeader": "Mattermost Linking",
   "admin.group_settings.groups_list.nameHeader": "Name",