From 92d6076df295aeda17576625482280758b84636d Mon Sep 17 00:00:00 2001
From: Kyle Johnson <kyle@solidstategroup.com>
Date: Thu, 25 Jan 2024 10:57:20 +0000
Subject: [PATCH] fix: projects list navigation (#3328)

---
 .../web/components/ProjectManageWidget.tsx    | 293 +++++++++---------
 1 file changed, 153 insertions(+), 140 deletions(-)

diff --git a/frontend/web/components/ProjectManageWidget.tsx b/frontend/web/components/ProjectManageWidget.tsx
index f6fc57d759c6..a86dd15e0113 100644
--- a/frontend/web/components/ProjectManageWidget.tsx
+++ b/frontend/web/components/ProjectManageWidget.tsx
@@ -8,7 +8,7 @@ import AccountStore from 'common/stores/account-store'
 import { useHasPermission } from 'common/providers/Permission'
 import ConfigProvider from 'common/providers/ConfigProvider'
 import { useGetOrganisationsQuery } from 'common/services/useOrganisation'
-import { useGetProjectsQuery } from 'common/services/useProject'
+import OrganisationProvider from 'common/providers/OrganisationProvider'
 import { Project } from 'common/types/responses'
 import Button from './base/forms/Button'
 import PanelSearch from './PanelSearch'
@@ -28,10 +28,6 @@ const ProjectManageWidget: FC<SegmentsPageType> = ({
   const isAdmin = AccountStore.isAdmin()
 
   const { data: organisations } = useGetOrganisationsQuery({})
-  const { data: projects, isLoading: projectsLoading } = useGetProjectsQuery(
-    { organisationId: organisationId as string },
-    { skip: !organisationId },
-  )
   const organisation = useMemo(
     () => organisations?.results?.find((v) => `${v.id}` === organisationId),
     [organisations, organisationId],
@@ -71,155 +67,172 @@ const ProjectManageWidget: FC<SegmentsPageType> = ({
   }, [handleCreateProjectClick, router.route.location])
 
   return (
-    <div data-test='project-manage-widget' id='project-manage-widget'>
-      <div>
-        {(projects && projects.length) || projectsLoading ? (
-          <div className='flex-row pl-0 pr-0'></div>
-        ) : isAdmin ? (
-          <div className='container-mw-700 mb-4'>
-            <h5 className='mb-2'>
-              Great! Now you can create your first project.
-            </h5>
-            <p className='fs-small lh-sm mb-0'>
-              When you create a project we'll also generate a{' '}
-              <strong>development</strong> and <strong>production</strong>{' '}
-              environment for you.
-            </p>
-            <p className='fs-small lh-sm mb-0'>
-              You can create features for your project, then enable and
-              configure them per environment.
-            </p>
-          </div>
-        ) : (
-          <div className='container-mw-700 mb-4'>
-            <p className='fs-small lh-sm mb-0'>
-              You do not have access to any projects within this Organisation.
-              If this is unexpected please contact a member of the Project who
-              has Administrator privileges. Users can be added to Projects from
-              the Project settings menu.
-            </p>
-          </div>
-        )}
-        {(projectsLoading || !projects) && (
-          <div className='centered-container'>
-            <Loader />
-          </div>
-        )}
-        {!projectsLoading && (
+    <OrganisationProvider>
+      {({
+        isLoading,
+        projects,
+      }: {
+        isLoading: boolean
+        projects: Project[]
+      }) => (
+        <div data-test='project-manage-widget' id='project-manage-widget'>
           <div>
-            <FormGroup>
-              <PanelSearch
-                id='projects-list'
-                className='no-pad panel-projects'
-                listClassName='row mt-n2 gy-4'
-                title='Your projects'
-                items={projects}
-                renderRow={({ environments, id, name }: Project, i: number) => {
-                  return (
-                    <>
-                      {i === 0 && (
-                        <div className='col-md-6 col-xl-3'>
-                          {Utils.renderWithPermission(
-                            canCreateProject,
-                            Constants.organisationPermissions(
-                              Utils.getCreateProjectPermissionDescription(
-                                AccountStore.getOrganisation(),
-                              ),
+            {(projects && projects.length) || isLoading ? (
+              <div className='flex-row pl-0 pr-0'></div>
+            ) : isAdmin ? (
+              <div className='container-mw-700 mb-4'>
+                <h5 className='mb-2'>
+                  Great! Now you can create your first project.
+                </h5>
+                <p className='fs-small lh-sm mb-0'>
+                  When you create a project we'll also generate a{' '}
+                  <strong>development</strong> and <strong>production</strong>{' '}
+                  environment for you.
+                </p>
+                <p className='fs-small lh-sm mb-0'>
+                  You can create features for your project, then enable and
+                  configure them per environment.
+                </p>
+              </div>
+            ) : (
+              <div className='container-mw-700 mb-4'>
+                <p className='fs-small lh-sm mb-0'>
+                  You do not have access to any projects within this
+                  Organisation. If this is unexpected please contact a member of
+                  the Project who has Administrator privileges. Users can be
+                  added to Projects from the Project settings menu.
+                </p>
+              </div>
+            )}
+            {(isLoading || !projects) && (
+              <div className='centered-container'>
+                <Loader />
+              </div>
+            )}
+            {!isLoading && (
+              <div>
+                <FormGroup>
+                  <PanelSearch
+                    id='projects-list'
+                    className='no-pad panel-projects'
+                    listClassName='row mt-n2 gy-4'
+                    title='Your projects'
+                    items={projects}
+                    renderRow={(
+                      { environments, id, name }: Project,
+                      i: number,
+                    ) => {
+                      return (
+                        <>
+                          {i === 0 && (
+                            <div className='col-md-6 col-xl-3'>
+                              {Utils.renderWithPermission(
+                                canCreateProject,
+                                Constants.organisationPermissions(
+                                  Utils.getCreateProjectPermissionDescription(
+                                    AccountStore.getOrganisation(),
+                                  ),
+                                ),
+                                <Button
+                                  disabled={!canCreateProject}
+                                  onClick={handleCreateProjectClick}
+                                  className='btn-project btn-project-create'
+                                >
+                                  <Row className='flex-nowrap'>
+                                    <div className='btn-project-icon'>
+                                      <Icon
+                                        name='plus'
+                                        width={32}
+                                        fill='#9DA4AE'
+                                      />
+                                    </div>
+                                    <div className='font-weight-medium btn-project-title'>
+                                      Create Project
+                                    </div>
+                                  </Row>
+                                </Button>,
+                              )}
+                            </div>
+                          )}
+                          <Link
+                            key={id}
+                            id={`project-select-${i}`}
+                            to={`/project/${id}/environment/${
+                              environments && environments[0]
+                                ? `${environments[0].api_key}/features`
+                                : 'create'
+                            }`}
+                            className='clickable col-md-6 col-xl-3'
+                            style={{ minWidth: '190px' }}
+                          >
+                            <Button className='btn-project'>
+                              <Row className='flex-nowrap'>
+                                <h2
+                                  style={{
+                                    backgroundColor: Utils.getProjectColour(i),
+                                  }}
+                                  className='btn-project-letter mb-0'
+                                >
+                                  {name[0]}
+                                </h2>
+                                <div className='font-weight-medium btn-project-title'>
+                                  {name}
+                                </div>
+                              </Row>
+                            </Button>
+                          </Link>
+                        </>
+                      )
+                    }}
+                    renderNoResults={
+                      <div>
+                        {Utils.renderWithPermission(
+                          canCreateProject,
+                          Constants.organisationPermissions(
+                            Utils.getCreateProjectPermissionDescription(
+                              organisation,
                             ),
+                          ),
+                          <div className='col-md-6 col-xl-3'>
                             <Button
                               disabled={!canCreateProject}
                               onClick={handleCreateProjectClick}
+                              data-test='create-first-project-btn'
+                              id='create-first-project-btn'
                               className='btn-project btn-project-create'
                             >
-                              <Row className='flex-nowrap'>
+                              <Row>
                                 <div className='btn-project-icon'>
                                   <Icon name='plus' width={32} fill='#9DA4AE' />
                                 </div>
-                                <div className='font-weight-medium btn-project-title'>
+                                <div className='font-weight-medium'>
                                   Create Project
                                 </div>
                               </Row>
-                            </Button>,
-                          )}
-                        </div>
-                      )}
-                      <Link
-                        key={id}
-                        id={`project-select-${i}`}
-                        to={`/project/${id}/environment/${
-                          environments && environments[0]
-                            ? `${environments[0].api_key}/features`
-                            : 'create'
-                        }`}
-                        className='clickable col-md-6 col-xl-3'
-                        style={{ minWidth: '190px' }}
-                      >
-                        <Button className='btn-project'>
-                          <Row className='flex-nowrap'>
-                            <h2
-                              style={{
-                                backgroundColor: Utils.getProjectColour(i),
-                              }}
-                              className='btn-project-letter mb-0'
-                            >
-                              {name[0]}
-                            </h2>
-                            <div className='font-weight-medium btn-project-title'>
-                              {name}
-                            </div>
-                          </Row>
-                        </Button>
-                      </Link>
-                    </>
-                  )
-                }}
-                renderNoResults={
-                  <div>
-                    {Utils.renderWithPermission(
-                      canCreateProject,
-                      Constants.organisationPermissions(
-                        Utils.getCreateProjectPermissionDescription(
-                          organisation,
-                        ),
-                      ),
-                      <div className='col-md-6 col-xl-3'>
-                        <Button
-                          disabled={!canCreateProject}
-                          onClick={handleCreateProjectClick}
-                          data-test='create-first-project-btn'
-                          id='create-first-project-btn'
-                          className='btn-project btn-project-create'
-                        >
-                          <Row>
-                            <div className='btn-project-icon'>
-                              <Icon name='plus' width={32} fill='#9DA4AE' />
-                            </div>
-                            <div className='font-weight-medium'>
-                              Create Project
-                            </div>
-                          </Row>
-                        </Button>
-                      </div>,
-                    )}
-                  </div>
-                }
-                filterRow={(item: Project, search: string) =>
-                  item.name.toLowerCase().indexOf(search) > -1
-                }
-                sorting={[
-                  {
-                    default: true,
-                    label: 'Name',
-                    order: 'asc',
-                    value: 'name',
-                  },
-                ]}
-              />
-            </FormGroup>
+                            </Button>
+                          </div>,
+                        )}
+                      </div>
+                    }
+                    filterRow={(item: Project, search: string) =>
+                      item.name.toLowerCase().indexOf(search) > -1
+                    }
+                    sorting={[
+                      {
+                        default: true,
+                        label: 'Name',
+                        order: 'asc',
+                        value: 'name',
+                      },
+                    ]}
+                  />
+                </FormGroup>
+              </div>
+            )}
           </div>
-        )}
-      </div>
-    </div>
+        </div>
+      )}
+    </OrganisationProvider>
   )
 }