Skip to content

Commit

Permalink
fix: projects list navigation (#3328)
Browse files Browse the repository at this point in the history
  • Loading branch information
@kyle-ssg
kyle-ssg authored Jan 25, 2024
1 parent d0e58c9 commit 92d6076
Showing 1 changed file with 153 additions and 140 deletions.
293 changes: 153 additions & 140 deletions frontend/web/components/ProjectManageWidget.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -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],
Expand Down Expand Up @@ -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>
)
}

Expand Down

3 comments on commit 92d6076

@vercel
Copy link

@vercel vercel bot commented on 92d6076 Jan 25, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

flagsmith-frontend-staging – ./frontend

flagsmith-frontend-staging-flagsmith.vercel.app
flagsmith-frontend-staging-git-main-flagsmith.vercel.app
flagsmith-staging-frontend.vercel.app
staging.flagsmith.com

@vercel
Copy link

@vercel vercel bot commented on 92d6076 Jan 25, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

flagsmith-frontend-preview – ./frontend

flagsmith-frontend-preview-git-main-flagsmith.vercel.app
flagsmith-frontend-preview-flagsmith.vercel.app
flagsmith-frontend-production-native.vercel.app

@vercel
Copy link

@vercel vercel bot commented on 92d6076 Jan 25, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

docs – ./docs

docs-git-main-flagsmith.vercel.app
docs.flagsmith.com
docs-flagsmith.vercel.app
docs.bullet-train.io

Please sign in to comment.