From 162ac40d86093261f2eb289e5e93d9994e275459 Mon Sep 17 00:00:00 2001 From: Bruce Tian Date: Wed, 18 Sep 2024 15:09:43 -0700 Subject: [PATCH 01/12] feat(orgAdmin): add orgAdmin teaser --- .../components/OrgTeams/OrgTeams.tsx | 27 +++++++++++++++++++ 1 file changed, 27 insertions(+) diff --git a/packages/client/modules/userDashboard/components/OrgTeams/OrgTeams.tsx b/packages/client/modules/userDashboard/components/OrgTeams/OrgTeams.tsx index 1afe0340e6c..b4d50347bb7 100644 --- a/packages/client/modules/userDashboard/components/OrgTeams/OrgTeams.tsx +++ b/packages/client/modules/userDashboard/components/OrgTeams/OrgTeams.tsx @@ -1,6 +1,8 @@ +import {Lock} from '@mui/icons-material' import graphql from 'babel-plugin-relay/macro' import React from 'react' import {useFragment} from 'react-relay' +import {useHistory} from 'react-router' import {OrgTeams_organization$key} from '../../../../__generated__/OrgTeams_organization.graphql' import AddTeamDialogRoot from '../../../../components/AddTeamDialogRoot' import {Button} from '../../../../ui/Button/Button' @@ -31,6 +33,8 @@ const OrgTeams = (props: Props) => { organizationRef ) + const history = useHistory() + const { open: openAddTeamDialog, close: closeAddTeamDialog, @@ -40,6 +44,11 @@ const OrgTeams = (props: Props) => { const {allTeams, isOrgAdmin, featureFlags} = organization const hasPublicTeamsFlag = featureFlags.publicTeams const showAllTeams = isOrgAdmin || hasPublicTeamsFlag + + const handleSeePlansClick = () => { + history.push(`/me/organizations/${organization.id}/billing`) + } + return (
@@ -76,6 +85,24 @@ const OrgTeams = (props: Props) => { ))}
+
+
+ +

+ Parabol Enterprise includes our Org Admin role, which allows you to see{' '} + all teams in your organization +

+
+ +
+ {isAddTeamDialogOpened ? ( ) : null} From 1c7da031bf990c74821b14b996ce38aca5888473 Mon Sep 17 00:00:00 2001 From: Bruce Tian Date: Wed, 18 Sep 2024 15:13:29 -0700 Subject: [PATCH 02/12] Move the teaser into the bottom of the table --- .../components/OrgTeams/OrgTeams.tsx | 32 +++++++++---------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/packages/client/modules/userDashboard/components/OrgTeams/OrgTeams.tsx b/packages/client/modules/userDashboard/components/OrgTeams/OrgTeams.tsx index b4d50347bb7..071739234fb 100644 --- a/packages/client/modules/userDashboard/components/OrgTeams/OrgTeams.tsx +++ b/packages/client/modules/userDashboard/components/OrgTeams/OrgTeams.tsx @@ -83,24 +83,24 @@ const OrgTeams = (props: Props) => { {allTeams.map((team) => ( ))} -
-
-
- -

- Parabol Enterprise includes our Org Admin role, which allows you to see{' '} - all teams in your organization -

+
+
+ +

+ Parabol Enterprise includes our Org Admin role, which allows you to see{' '} + all teams in your organization +

+
+
-
{isAddTeamDialogOpened ? ( From d9f4c621b7cadf54198bb42f364b7769b3474c24 Mon Sep 17 00:00:00 2001 From: Bruce Tian Date: Wed, 18 Sep 2024 15:17:12 -0700 Subject: [PATCH 03/12] Only show the teaser when the org tier is not enterprise --- .../components/OrgTeams/OrgTeams.tsx | 37 ++++++++++--------- 1 file changed, 20 insertions(+), 17 deletions(-) diff --git a/packages/client/modules/userDashboard/components/OrgTeams/OrgTeams.tsx b/packages/client/modules/userDashboard/components/OrgTeams/OrgTeams.tsx index 071739234fb..39293c79482 100644 --- a/packages/client/modules/userDashboard/components/OrgTeams/OrgTeams.tsx +++ b/packages/client/modules/userDashboard/components/OrgTeams/OrgTeams.tsx @@ -21,6 +21,7 @@ const OrgTeams = (props: Props) => { fragment OrgTeams_organization on Organization { id isOrgAdmin + tier featureFlags { publicTeams } @@ -41,7 +42,7 @@ const OrgTeams = (props: Props) => { isOpen: isAddTeamDialogOpened } = useDialogState() - const {allTeams, isOrgAdmin, featureFlags} = organization + const {allTeams, isOrgAdmin, featureFlags, tier} = organization const hasPublicTeamsFlag = featureFlags.publicTeams const showAllTeams = isOrgAdmin || hasPublicTeamsFlag @@ -84,23 +85,25 @@ const OrgTeams = (props: Props) => { ))} -
-
- -

- Parabol Enterprise includes our Org Admin role, which allows you to see{' '} - all teams in your organization -

+ {tier !== 'enterprise' && ( +
+
+ +

+ Parabol Enterprise includes our Org Admin role, which allows you to see{' '} + all teams in your organization +

+
+
- -
+ )}
{isAddTeamDialogOpened ? ( From 43e39504f9b33237b24e42d4d8883cf382c8a021 Mon Sep 17 00:00:00 2001 From: Bruce Tian Date: Wed, 18 Sep 2024 15:22:20 -0700 Subject: [PATCH 04/12] Remove the space between OrgTeamsRow and the teaser --- .../modules/userDashboard/components/OrgTeams/OrgTeams.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/client/modules/userDashboard/components/OrgTeams/OrgTeams.tsx b/packages/client/modules/userDashboard/components/OrgTeams/OrgTeams.tsx index 39293c79482..8bb111df4a1 100644 --- a/packages/client/modules/userDashboard/components/OrgTeams/OrgTeams.tsx +++ b/packages/client/modules/userDashboard/components/OrgTeams/OrgTeams.tsx @@ -86,7 +86,7 @@ const OrgTeams = (props: Props) => { ))} {tier !== 'enterprise' && ( -
+

From 8adb4f2f00b9a6536eecdf6a79fd866da9690847 Mon Sep 17 00:00:00 2001 From: Bruce Tian Date: Wed, 18 Sep 2024 15:40:09 -0700 Subject: [PATCH 05/12] Add a hidden team row --- .../components/OrgTeams/OrgTeams.tsx | 36 ++++++++++--------- .../components/OrgTeams/TeaserOrgTeamsRow.tsx | 17 +++++++++ 2 files changed, 37 insertions(+), 16 deletions(-) create mode 100644 packages/client/modules/userDashboard/components/OrgTeams/TeaserOrgTeamsRow.tsx diff --git a/packages/client/modules/userDashboard/components/OrgTeams/OrgTeams.tsx b/packages/client/modules/userDashboard/components/OrgTeams/OrgTeams.tsx index 8bb111df4a1..78e8b5a94e7 100644 --- a/packages/client/modules/userDashboard/components/OrgTeams/OrgTeams.tsx +++ b/packages/client/modules/userDashboard/components/OrgTeams/OrgTeams.tsx @@ -9,6 +9,7 @@ import {Button} from '../../../../ui/Button/Button' import {useDialogState} from '../../../../ui/Dialog/useDialogState' import plural from '../../../../utils/plural' import OrgTeamsRow from './OrgTeamsRow' +import TeaserOrgTeamsRow from './TeaserOrgTeamsRow' type Props = { organizationRef: OrgTeams_organization$key @@ -86,23 +87,26 @@ const OrgTeams = (props: Props) => { ))} {tier !== 'enterprise' && ( -

-
- -

- Parabol Enterprise includes our Org Admin role, which allows you to see{' '} - all teams in your organization -

+ <> + +
+
+ +

+ Parabol Enterprise includes our Org Admin role, which allows you to see{' '} + all teams in your organization +

+
+
- -
+ )}
diff --git a/packages/client/modules/userDashboard/components/OrgTeams/TeaserOrgTeamsRow.tsx b/packages/client/modules/userDashboard/components/OrgTeams/TeaserOrgTeamsRow.tsx new file mode 100644 index 00000000000..96544f6bae1 --- /dev/null +++ b/packages/client/modules/userDashboard/components/OrgTeams/TeaserOrgTeamsRow.tsx @@ -0,0 +1,17 @@ +import {ChevronRight} from '@mui/icons-material' +import React from 'react' + +const TeaserOrgTeamsRow = () => { + return ( +
+
+
Hidden Teams
+
+
+ +
+
+ ) +} + +export default TeaserOrgTeamsRow From 8d7cd92b46e87ae5b4942827e107eebfaa2c4475 Mon Sep 17 00:00:00 2001 From: Bruce Tian Date: Wed, 18 Sep 2024 15:49:28 -0700 Subject: [PATCH 06/12] Adjust the format --- .../userDashboard/components/OrgTeams/OrgTeams.tsx | 12 +++++++----- .../components/OrgTeams/TeaserOrgTeamsRow.tsx | 2 +- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/packages/client/modules/userDashboard/components/OrgTeams/OrgTeams.tsx b/packages/client/modules/userDashboard/components/OrgTeams/OrgTeams.tsx index 78e8b5a94e7..0cb0e23eefd 100644 --- a/packages/client/modules/userDashboard/components/OrgTeams/OrgTeams.tsx +++ b/packages/client/modules/userDashboard/components/OrgTeams/OrgTeams.tsx @@ -74,7 +74,7 @@ const OrgTeams = (props: Props) => {
-
+
@@ -82,14 +82,16 @@ const OrgTeams = (props: Props) => {
- {allTeams.map((team) => ( - - ))} +
+ {allTeams.map((team) => ( + + ))} +
{tier !== 'enterprise' && ( <> -
+

diff --git a/packages/client/modules/userDashboard/components/OrgTeams/TeaserOrgTeamsRow.tsx b/packages/client/modules/userDashboard/components/OrgTeams/TeaserOrgTeamsRow.tsx index 96544f6bae1..b1ddb10e4db 100644 --- a/packages/client/modules/userDashboard/components/OrgTeams/TeaserOrgTeamsRow.tsx +++ b/packages/client/modules/userDashboard/components/OrgTeams/TeaserOrgTeamsRow.tsx @@ -3,7 +3,7 @@ import React from 'react' const TeaserOrgTeamsRow = () => { return ( -

+
Hidden Teams
From 4604578d161dcebfddfe9051a74c62aecf0435c0 Mon Sep 17 00:00:00 2001 From: Bruce Tian Date: Wed, 18 Sep 2024 16:00:34 -0700 Subject: [PATCH 07/12] Remove duplicate boarder-y --- .../modules/userDashboard/components/OrgTeams/OrgTeams.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/client/modules/userDashboard/components/OrgTeams/OrgTeams.tsx b/packages/client/modules/userDashboard/components/OrgTeams/OrgTeams.tsx index 0cb0e23eefd..a80fef6bfea 100644 --- a/packages/client/modules/userDashboard/components/OrgTeams/OrgTeams.tsx +++ b/packages/client/modules/userDashboard/components/OrgTeams/OrgTeams.tsx @@ -82,7 +82,7 @@ const OrgTeams = (props: Props) => {
-
+
{allTeams.map((team) => ( ))} From 883f55ddb87497da1c0846270f66909a9223184a Mon Sep 17 00:00:00 2001 From: Bruce Tian Date: Thu, 26 Sep 2024 11:21:15 +0800 Subject: [PATCH 08/12] Add hidden team count --- .../components/OrgTeams/OrgTeams.tsx | 25 ++++++++----------- .../components/OrgTeams/TeaserOrgTeamsRow.tsx | 12 +++++++-- .../public/typeDefs/Organization.graphql | 5 ++++ .../graphql/public/types/Organization.ts | 5 ++++ 4 files changed, 30 insertions(+), 17 deletions(-) diff --git a/packages/client/modules/userDashboard/components/OrgTeams/OrgTeams.tsx b/packages/client/modules/userDashboard/components/OrgTeams/OrgTeams.tsx index a80fef6bfea..e1661edf130 100644 --- a/packages/client/modules/userDashboard/components/OrgTeams/OrgTeams.tsx +++ b/packages/client/modules/userDashboard/components/OrgTeams/OrgTeams.tsx @@ -21,15 +21,15 @@ const OrgTeams = (props: Props) => { graphql` fragment OrgTeams_organization on Organization { id - isOrgAdmin tier - featureFlags { - publicTeams - } allTeams { id ...OrgTeamsRow_team } + viewerTeams { + id + } + allTeamsCount } `, organizationRef @@ -43,9 +43,9 @@ const OrgTeams = (props: Props) => { isOpen: isAddTeamDialogOpened } = useDialogState() - const {allTeams, isOrgAdmin, featureFlags, tier} = organization - const hasPublicTeamsFlag = featureFlags.publicTeams - const showAllTeams = isOrgAdmin || hasPublicTeamsFlag + const {allTeams, tier, viewerTeams, allTeamsCount} = organization + const showAllTeams = allTeams.length === allTeamsCount + const viewerTeamCount = viewerTeams.length const handleSeePlansClick = () => { history.push(`/me/organizations/${organization.id}/billing`) @@ -56,11 +56,6 @@ const OrgTeams = (props: Props) => {

Teams

-

- {!showAllTeams - ? "Only showing teams you're a member of" - : 'Showing all teams in the organization'} -

- {tier !== 'enterprise' && ( + {tier !== 'enterprise' && allTeamsCount > viewerTeamCount && !showAllTeams && ( <> - +
diff --git a/packages/client/modules/userDashboard/components/OrgTeams/TeaserOrgTeamsRow.tsx b/packages/client/modules/userDashboard/components/OrgTeams/TeaserOrgTeamsRow.tsx index b1ddb10e4db..0e3885250e2 100644 --- a/packages/client/modules/userDashboard/components/OrgTeams/TeaserOrgTeamsRow.tsx +++ b/packages/client/modules/userDashboard/components/OrgTeams/TeaserOrgTeamsRow.tsx @@ -1,11 +1,19 @@ import {ChevronRight} from '@mui/icons-material' import React from 'react' +import plural from '../../../../utils/plural' -const TeaserOrgTeamsRow = () => { +type Props = { + hiddenTeamCount: number +} + +const TeaserOrgTeamsRow = (props: Props) => { + const {hiddenTeamCount} = props return (
-
Hidden Teams
+
+ {hiddenTeamCount} {plural(hiddenTeamCount, 'Hidden Team')} +
diff --git a/packages/server/graphql/public/typeDefs/Organization.graphql b/packages/server/graphql/public/typeDefs/Organization.graphql index 4a08189c7f2..4994990efab 100644 --- a/packages/server/graphql/public/typeDefs/Organization.graphql +++ b/packages/server/graphql/public/typeDefs/Organization.graphql @@ -52,6 +52,11 @@ type Organization { """ allTeams: [Team!]! + """ + The count of all teams in the organization + """ + allTeamsCount: Int! + """ all the teams the viewer is on in the organization """ diff --git a/packages/server/graphql/public/types/Organization.ts b/packages/server/graphql/public/types/Organization.ts index 9383e193f7d..301b0068d31 100644 --- a/packages/server/graphql/public/types/Organization.ts +++ b/packages/server/graphql/public/types/Organization.ts @@ -72,6 +72,11 @@ const Organization: OrganizationResolvers = { } }, + allTeamsCount: async ({id: orgId}, _args, {dataLoader}) => { + const allTeamsOnOrg = await dataLoader.get('teamsByOrgIds').load(orgId) + return allTeamsOnOrg?.length ?? 0 + }, + viewerTeams: async ({id: orgId}, _args, {dataLoader, authToken}) => { const allTeamsOnOrg = await dataLoader.get('teamsByOrgIds').load(orgId) return allTeamsOnOrg From 08780f838ddc84852f42c47a77fe5b477ecfe831 Mon Sep 17 00:00:00 2001 From: Bruce Tian Date: Thu, 26 Sep 2024 13:08:05 +0800 Subject: [PATCH 09/12] Move TeaserOrgTeamsRow into its own component --- .../components/OrgTeams/OrgTeams.tsx | 32 ++------------ .../components/OrgTeams/TeaserOrgTeamsRow.tsx | 43 +++++++++++++++---- 2 files changed, 38 insertions(+), 37 deletions(-) diff --git a/packages/client/modules/userDashboard/components/OrgTeams/OrgTeams.tsx b/packages/client/modules/userDashboard/components/OrgTeams/OrgTeams.tsx index e1661edf130..07af919858d 100644 --- a/packages/client/modules/userDashboard/components/OrgTeams/OrgTeams.tsx +++ b/packages/client/modules/userDashboard/components/OrgTeams/OrgTeams.tsx @@ -1,8 +1,6 @@ -import {Lock} from '@mui/icons-material' import graphql from 'babel-plugin-relay/macro' import React from 'react' import {useFragment} from 'react-relay' -import {useHistory} from 'react-router' import {OrgTeams_organization$key} from '../../../../__generated__/OrgTeams_organization.graphql' import AddTeamDialogRoot from '../../../../components/AddTeamDialogRoot' import {Button} from '../../../../ui/Button/Button' @@ -35,8 +33,6 @@ const OrgTeams = (props: Props) => { organizationRef ) - const history = useHistory() - const { open: openAddTeamDialog, close: closeAddTeamDialog, @@ -47,10 +43,6 @@ const OrgTeams = (props: Props) => { const showAllTeams = allTeams.length === allTeamsCount const viewerTeamCount = viewerTeams.length - const handleSeePlansClick = () => { - history.push(`/me/organizations/${organization.id}/billing`) - } - return (
@@ -84,26 +76,10 @@ const OrgTeams = (props: Props) => {
{tier !== 'enterprise' && allTeamsCount > viewerTeamCount && !showAllTeams && ( - <> - -
-
- -

- Parabol Enterprise includes our Org Admin role, which allows you to see{' '} - all teams in your organization -

-
- -
- + )}
diff --git a/packages/client/modules/userDashboard/components/OrgTeams/TeaserOrgTeamsRow.tsx b/packages/client/modules/userDashboard/components/OrgTeams/TeaserOrgTeamsRow.tsx index 0e3885250e2..01d49fa0029 100644 --- a/packages/client/modules/userDashboard/components/OrgTeams/TeaserOrgTeamsRow.tsx +++ b/packages/client/modules/userDashboard/components/OrgTeams/TeaserOrgTeamsRow.tsx @@ -1,24 +1,49 @@ -import {ChevronRight} from '@mui/icons-material' +import {Lock} from '@mui/icons-material' import React from 'react' +import {useHistory} from 'react-router' +import {Button} from '../../../../ui/Button/Button' import plural from '../../../../utils/plural' type Props = { hiddenTeamCount: number + orgId: string } const TeaserOrgTeamsRow = (props: Props) => { - const {hiddenTeamCount} = props + const {hiddenTeamCount, orgId} = props + const history = useHistory() + + const handleSeePlansClick = () => { + history.push(`/me/organizations/${orgId}/billing`) + } + return ( -
-
-
- {hiddenTeamCount} {plural(hiddenTeamCount, 'Hidden Team')} + <> +
+
+
+ {hiddenTeamCount} {plural(hiddenTeamCount, 'Hidden Team')} +
-
- +
+
+ +

+ Parabol Enterprise includes our Org Admin role, which allows you to see{' '} + all teams in your organization +

+
+
-
+ ) } From 1a0661cf927b53370c008644bf2c74bd105b4691 Mon Sep 17 00:00:00 2001 From: Bruce Tian Date: Thu, 26 Sep 2024 14:23:34 +0800 Subject: [PATCH 10/12] Adjust the style of the teaser row --- .../components/OrgTeams/TeaserOrgTeamsRow.tsx | 36 ++++++++++--------- 1 file changed, 20 insertions(+), 16 deletions(-) diff --git a/packages/client/modules/userDashboard/components/OrgTeams/TeaserOrgTeamsRow.tsx b/packages/client/modules/userDashboard/components/OrgTeams/TeaserOrgTeamsRow.tsx index 01d49fa0029..832434c1559 100644 --- a/packages/client/modules/userDashboard/components/OrgTeams/TeaserOrgTeamsRow.tsx +++ b/packages/client/modules/userDashboard/components/OrgTeams/TeaserOrgTeamsRow.tsx @@ -18,32 +18,36 @@ const TeaserOrgTeamsRow = (props: Props) => { } return ( - <> -
-
-
+
+
+
+
{hiddenTeamCount} {plural(hiddenTeamCount, 'Hidden Team')}
+
+
+ Parabol Enterprise includes our Org Admin role, which allows you to{' '} + see all teams in your organization. +
+
-
-
-
- -

- Parabol Enterprise includes our Org Admin role, which allows you to see{' '} - all teams in your organization -

+
+
+ +
+
+
- +
) } From afb46abdf24ebe9263e15f8154ae0cf9c2f902fa Mon Sep 17 00:00:00 2001 From: Bruce Tian Date: Wed, 16 Oct 2024 14:27:29 -0700 Subject: [PATCH 11/12] Address feedback on sytle of the teaser row --- .../components/OrgTeams/TeaserOrgTeamsRow.tsx | 28 ++++++++----------- 1 file changed, 12 insertions(+), 16 deletions(-) diff --git a/packages/client/modules/userDashboard/components/OrgTeams/TeaserOrgTeamsRow.tsx b/packages/client/modules/userDashboard/components/OrgTeams/TeaserOrgTeamsRow.tsx index 832434c1559..7edbe7290b3 100644 --- a/packages/client/modules/userDashboard/components/OrgTeams/TeaserOrgTeamsRow.tsx +++ b/packages/client/modules/userDashboard/components/OrgTeams/TeaserOrgTeamsRow.tsx @@ -1,7 +1,6 @@ import {Lock} from '@mui/icons-material' import React from 'react' import {useHistory} from 'react-router' -import {Button} from '../../../../ui/Button/Button' import plural from '../../../../utils/plural' type Props = { @@ -13,7 +12,7 @@ const TeaserOrgTeamsRow = (props: Props) => { const {hiddenTeamCount, orgId} = props const history = useHistory() - const handleSeePlansClick = () => { + const handleParabolEnterpriseClick = () => { history.push(`/me/organizations/${orgId}/billing`) } @@ -26,27 +25,24 @@ const TeaserOrgTeamsRow = (props: Props) => {
- Parabol Enterprise includes our Org Admin role, which allows you to{' '} - see all teams in your organization. + + Parabol Enterprise + {' '} + includes our Org Admin role, which allows you to see all teams in + your organization.
-
- +
+
-
- -
) } From 1eed39a6f833cb911e6384a76913d7488b154f03 Mon Sep 17 00:00:00 2001 From: Bruce Tian Date: Wed, 16 Oct 2024 14:39:55 -0700 Subject: [PATCH 12/12] Clarify hidden teams count --- .../modules/userDashboard/components/OrgTeams/OrgTeams.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/client/modules/userDashboard/components/OrgTeams/OrgTeams.tsx b/packages/client/modules/userDashboard/components/OrgTeams/OrgTeams.tsx index 8bad958762a..e16c2371d6a 100644 --- a/packages/client/modules/userDashboard/components/OrgTeams/OrgTeams.tsx +++ b/packages/client/modules/userDashboard/components/OrgTeams/OrgTeams.tsx @@ -66,7 +66,8 @@ const OrgTeams = (props: Props) => {
- {allTeamsCount} {plural(allTeamsCount, 'Team')} + {allTeamsCount} {plural(allTeamsCount, 'Team')}{' '} + {!showAllTeams ? `(${allTeamsCount - viewerTeamCount} hidden)` : null}