refactor: change up data structures for counts and project

.storybook/mocks/mocks.ts

@@ -445,6 +445,7 @@ export const organizationGroups = (groupQuota?: number) => {
       name: `${faker.word.words(1)}-group`,
       type: faker.helpers.arrayElement(['null', 'project-default-group']),
       members: organizationMembers(),
+      memberCount: faker.number.int({ min: 1, max: 10 }),
       __typename: 'Group',
     };
   });
@@ -541,6 +542,7 @@ export const organizationProjects = (projectQuota: number) => {
       name: `project-${faker.word.noun()}`,
       __typename: 'OrgProject',
       groups: organizationGroups(),
+      groupCount: organizationGroups().length,
       notifications: [
         { ...slack[0], type: 'SLACK' },
         { ...rocketChat[0], type: 'ROCKETCHAT' },

src/components/Organizations/GroupMembers/index.js

@@ -51,7 +51,7 @@ const ADD_GROUP_PROJECT_MUTATION = gql`
 /**
  * The primary list of members.
  */
-const GroupMembers = ({ members = [], groupName, organizationName, organizationId, projects, refetch }) => {
+const GroupMembers = ({ members = [], groupName, organizationName, organizationId, orgProjects, projects, refetch }) => {
   const duRegex = new RegExp('^default-user@' + groupName.replace('project-', '') + '$', 'g');
 
   const [projectModalOpen, setProjectModalOpen] = useState(false);
@@ -274,9 +274,7 @@ const GroupMembers = ({ members = [], groupName, organizationName, organizationI
 
         <PaginatedTable
           limit={10}
-          data={projects.filter(project => {
-            return project.groups.find(group => group.name === groupName);
-          })}
+          data={projects}
           columns={ProjectsColumns}
           labelText="Projects"
           emptyText="No Projects"
@@ -306,10 +304,8 @@ const GroupMembers = ({ members = [], groupName, organizationName, organizationI
                 refetch().then(closeAddProjectModal);
               }
 
-              const filtered = projects.filter(project => {
-                if (project.groups.length === 0) return project;
-
-                return project.groups.every(group => group.name !== groupName);
+              const filtered = orgProjects.filter(project => {
+                return projects.every(p => p.name !== project.name);
               });
 
               const opts = filtered.map(p => {

src/components/Organizations/Groups/index.js

@@ -86,7 +86,7 @@ const Groups = ({ groups = [], organizationId, organizationName, ableToAddGroup,
       width: '15%',
       key: 'members',
       render: i => {
-        return i.members && <span>Members: {i.members.length} </span>;
+        return typeof i.memberCount !== 'undefined' && <span>Members: {i.memberCount} </span>;
       },
     },
     {

src/components/Organizations/ProjectGroupMembers/index.js

@@ -56,7 +56,7 @@ const ProjectGroupMembers = ({ groups = [], organizationId, organizationName, pr
                 {group.name}
               </OrgGroupsLink>
             </div>
-            <div className="members">Members: {group.members.length}</div>
+            <div className="members">Members: {group.memberCount}</div>
 
             <div className="labels">
               {group.type.includes('project-default-group') && (

src/components/Organizations/Projects/index.js

@@ -51,7 +51,7 @@ const OrgProjects = ({ projects = [], organizationId, organizationName, refresh,
       render: project => {
         return (
           <div className="groups" style={{ fontSize: '13px' }}>
-            Groups: {project.groups.length}
+            Groups: {project.groupCount}
           </div>
         );
       },

src/lib/query/organizations/GroupByNameAndOrganization.js

@@ -6,6 +6,10 @@ export default gql`
       id
       name
       type
+      projects {
+        id
+        name
+      }
       members{
         role
         user{
@@ -31,9 +35,6 @@ export default gql`
       projects {
         id
         name
-        groups{
-          name
-        }
       }
     }
   }

src/lib/query/organizations/OrganizationByID.js

@@ -32,24 +32,13 @@ export default gql`
       projects {
         id
         name
-        groups {
-          type
-          id
-          name
-        }
+        groupCount
       }
       groups {
         id
         name
         type
-        members {
-          role
-          user {
-            email
-            comment
-          }
-          role
-        }
+        memberCount
       }
       slacks: notifications(type: SLACK) {
         __typename

src/lib/query/organizations/ProjectAndOrganizationByID.js

@@ -6,28 +6,27 @@ import TeamsFragment from 'lib/fragment/Teams';
 import WebhookFragment from 'lib/fragment/Webhook';
 
 export default gql`
-  query getOrganization($id: Int!){
-    organization: organizationById (organization: $id){
+  query getOrganization($project: String!, $id: Int!) {
+    project: orgProjectByName(name: $project){
       id
       name
-      quotaGroup
-      quotaNotification
-      projects {
+      groups {
+        type
         id
         name
-        groups {
-          type
-          id
-          name
-          members{
-            role
-          }
-        }
-        notifications{
-          name
-          type
-        }
+        memberCount
+      }
+      notifications{
+        name
+        type
       }
+    }
+
+    organization: organizationById (organization: $id){
+      id
+      name
+      quotaGroup
+      quotaNotification
       groups{
         type
         name

src/pages/organizations/group.js

@@ -98,7 +98,8 @@ export const PageGroup = ({ router }) => {
             <GroupMembers
               organizationId={organization.id}
               organizationName={organization.name}
-              projects={organization.projects || []}
+              orgProjects={organization.projects || []}
+              projects={group.projects || []}
               members={group.members || []}
               groupName={group.name}
               projectDefaultGroup={(group.type.includes('project-default-group') && 'project') || 'user'}

src/pages/organizations/project.js

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 
 import Head from 'next/head';
 import { withRouter } from 'next/router';
@@ -74,7 +74,7 @@ export const PageGroupProject = ({ router }) => {
     return <QueryError error={error} />;
   }
 
-  const { organization } = data;
+  const { organization, project } = data;
 
   if (!organization) {
     return <OrganizationNotFound variables={{ name: router.query.organizationSlug }} />;
@@ -100,36 +100,29 @@ export const PageGroupProject = ({ router }) => {
         </Breadcrumbs>
 
         <OrganizationsWrapper>
-          {organization.projects.map(
-            (project, idx) =>
-              project.name == router.query.projectName && (
-                <Fragment key={idx}>
-                  <OrgNavTabs activeTab="projects" organization={organization} />
-                  <OrgProjectWrapper>
-                    <OrgHeader headerText="Project" />
-                    <TableWrapper>
-                      <h3>{project.name}</h3>
-                      <ProjectGroupMembers
-                        refresh={handleRefetch}
-                        projectName={project.name}
-                        organizationId={organization.id}
-                        organizationName={organization.name}
-                        groups={project.groups || []}
-                        orgGroups={organization.groups}
-                      />
-                      <ProjectNotifications
-                        refresh={handleRefetch}
-                        projectName={project.name}
-                        organizationId={organization.id}
-                        organizationName={organization.name}
-                        notifications={project.notifications}
-                        organization={organization}
-                      />
-                    </TableWrapper>
-                  </OrgProjectWrapper>
-                </Fragment>
-              )
-          )}
+          <OrgNavTabs activeTab="projects" organization={organization} />
+          <OrgProjectWrapper>
+            <OrgHeader headerText="Project" />
+            <TableWrapper>
+              <h3>{project.name}</h3>
+              <ProjectGroupMembers
+                refresh={handleRefetch}
+                projectName={project.name}
+                organizationId={organization.id}
+                organizationName={organization.name}
+                groups={project.groups || []}
+                orgGroups={organization.groups}
+              />
+              <ProjectNotifications
+                refresh={handleRefetch}
+                projectName={project.name}
+                organizationId={organization.id}
+                organizationName={organization.name}
+                notifications={project.notifications}
+                organization={organization}
+              />
+            </TableWrapper>
+          </OrgProjectWrapper>
         </OrganizationsWrapper>
       </MainLayout>
     </>

src/stories/organizations/organizationProject.stories.tsx

@@ -3,7 +3,7 @@ import { Meta, StoryObj } from '@storybook/react';
 import { graphql } from 'msw';
 
 import { getOrganization } from '../../../.storybook/mocks/api';
-import { organizationGroups } from '../../../.storybook/mocks/mocks';
+import { organizationGroups, organizationProjects } from '../../../.storybook/mocks/mocks';
 import PageProject from '../../pages/organizations/project';
 
 faker.seed(123);
@@ -33,7 +33,7 @@ export const Default: Story = {
     msw: {
       handlers: [
         graphql.query('getOrganization', (_, res, ctx) => {
-          return res(ctx.delay(), ctx.data({ organization: mockOrganization }));
+          return res(ctx.delay(), ctx.data({ organization: mockOrganization, project: organizationProjects(2)[0] }));
         }),
 
         graphql.mutation('addProjectToGroup', (req, res, ctx) => {