Change: show count on system groups/users and toggle users on by default

cypress/e2e/organizations/users.cy.ts

@@ -17,6 +17,8 @@ describe('Org Users page', () => {
       aliasMutation(req, 'removeUserFromGroup');
       aliasMutation(req, 'addGroupToOrganization');
     });
+
+    registerIdleHandler('idle');
   });
 
   it('Creates a group', () => {
@@ -29,6 +31,7 @@ describe('Org Users page', () => {
   });
 
   it('Deletes user', () => {
+    cy.waitForNetworkIdle('@idle', 500);
     users.doDeleteUser(testData.organizations.users.email);
   });
 

src/components/Organizations/GroupMembers/index.js

@@ -75,8 +75,6 @@ const GroupMembers = ({
   projects,
   refetch,
 }) => {
-  const duRegex = new RegExp('^default-user@' + groupName.replace('project-', '') + '$', 'g');
-
   const [projectModalOpen, setProjectModalOpen] = useState(false);
   const [selectedProject, setSelectedProject] = useState('');
 
@@ -356,6 +354,7 @@ const GroupMembers = ({
           defaultViewOptions={{
             type: 'user',
             selected: false,
+            selectedOnZeroCount: true,
           }}
         />
         <div className="tableAction">

src/components/Organizations/PaginatedTable/PaginatedTable.tsx

@@ -17,12 +17,12 @@ import {
   TableRow,
 } from './Styles';
 
+interface NestedData {
+  [key: string]: string | Record<string, string> | string[];
+}
+
 type DataType = {
-  [key: string]:
-    | string
-    | Record<string, string>
-    | Record<string, Pick<Props, 'data'> | string[]>
-    | Array<Record<string, string>>;
+  [key: string]: string | NestedData | Record<string, string> | Array<Record<string, string>>;
   name: string;
   id: string;
 };
@@ -38,8 +38,13 @@ interface Props {
   disableUrlMutation?: boolean;
   defaultViewOptions?: {
     type: 'group' | 'user';
-    selected: boolean;
-  };
+  } & (
+    | { selected: true }
+    | {
+        selected: false;
+        selectedOnZeroCount?: boolean;
+      }
+  );
   numericSortOptions?: {
     key?: string;
     displayName: string;
@@ -100,9 +105,34 @@ const PaginatedTable: FC<Props> = ({
 
   const [unfilteredData, setUnfilteredData] = useState(data);
 
-  const [defaultsSelected, setDefaultsSelected] = useState(
-    (defaultViewOptions && defaultViewOptions.selected) || false
-  );
+  const filteredDataWithoutDefaults = useMemo(() => {
+    let filtered = unfilteredData;
+
+    if (defaultViewOptions) {
+      if (defaultViewOptions.type === 'group') {
+        filtered = filtered.filter(dataItem => dataItem.type !== 'project-default-group');
+      }
+      if (defaultViewOptions.type === 'user') {
+        filtered = filtered.filter(dataItem => {
+          //@ts-ignore
+          const filterItem = dataItem.email ? dataItem.email : (dataItem.user.email as string);
+          return !(filterItem as string).startsWith('default-user');
+        });
+      }
+    }
+
+    return filtered;
+  }, [defaultViewOptions, unfilteredData]);
+
+  const [defaultsSelected, setDefaultsSelected] = useState(() => {
+    if (defaultViewOptions?.selected) {
+      return true;
+    }
+    if (defaultViewOptions?.selectedOnZeroCount && filteredDataWithoutDefaults.length === 0) {
+      return true;
+    }
+    return false;
+  });
 
   useEffect(() => {
     setUnfilteredData(data);
@@ -321,6 +351,31 @@ const PaginatedTable: FC<Props> = ({
   const startPage = Math.max(currentPage - Math.floor(maxPagination / 2), 1);
   const endPage = Math.min(startPage + maxPagination - 1, totalPages);
 
+  const systemDefaultCount = useMemo(() => {
+    let count = 0;
+
+    if (defaultViewOptions) {
+      if (defaultViewOptions?.type === 'group') {
+        count = unfilteredData.filter(dataItem => dataItem.type === 'project-default-group').length;
+      }
+      if (defaultViewOptions?.type === 'user') {
+        count = unfilteredData.filter(dataItem => {
+          let filterItem = '';
+
+          if (dataItem.email) {
+            filterItem = dataItem.email as string;
+          }
+          if (dataItem.user && typeof dataItem.user === 'object' && 'email' in dataItem.user) {
+            filterItem = dataItem.user.email as string;
+          }
+
+          return filterItem.startsWith('default-user');
+        }).length;
+      }
+    }
+    return count;
+  }, [defaultViewOptions, unfilteredData]);
+
   return (
     <StyledTable className="paginatedTable">
       <Filters className="filters">
@@ -333,7 +388,7 @@ const PaginatedTable: FC<Props> = ({
         )}
         {defaultViewOptions ? (
           <Checkbox>
-            {defaultViewOptions.type === 'group' ? 'Show system groups' : 'Show default users'}
+            {defaultViewOptions.type === 'group' ? 'Show system groups' : 'Show default users'} ({systemDefaultCount})
             <input
               type="checkbox"
               checked={defaultsSelected}

src/components/Organizations/ProjectGroupMembers/ProjectGroupSkeleton.tsx

@@ -1,6 +1,9 @@
 import React from 'react';
 import Skeleton from 'react-loading-skeleton';
 
+import { SearchOutlined } from '@ant-design/icons';
+
+import { SearchBar } from '../Orgheader/Styles';
 import { StyledGroupMembers } from './Styles';
 
 const ProjectGroupSkeleton = () => {
@@ -24,10 +27,15 @@ const ProjectGroupSkeleton = () => {
   );
   return (
     <StyledGroupMembers>
-      <div className="header" style={{ marginTop: '20px', paddingRight: '0' }}>
-        <label style={{ paddingLeft: '0' }}>Groups</label>
-        <input aria-labelledby="search" className="searchInput" type="text" placeholder="Type to search" disabled />
+      <div className="tableheader skeleton">
+        <label>Groups</label>
+
+        <SearchBar className="search">
+          <SearchOutlined className="icon" />
+          <input aria-labelledby="search" className="searchInput" type="text" placeholder="Type to search" disabled />
+        </SearchBar>
       </div>
+
       <div className="data-table">{[...Array<undefined>(numberOfFields)].map((_, idx) => groupsSkeleton(idx))}</div>
     </StyledGroupMembers>
   );

src/components/Organizations/ProjectGroupMembers/Styles.tsx

@@ -4,6 +4,15 @@ import styled from 'styled-components';
 import { sharedTableStyles } from '../SharedStyles';
 
 export const StyledGroupMembers = styled.div`
+  .project-wrapper {
+    margin-top: 20px;
+  }
+  .skeleton {
+    margin-top: 40px;
+    input {
+      padding-left: 30px;
+    }
+  }
   .default-group-label {
     color: ${color.white};
     display: inline-block;