-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #108 from gov4git/community-dashboard
add community dashboard
- Loading branch information
Showing
29 changed files
with
431 additions
and
160 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| --- | ||
| 'gov4git-desktop-app': minor | ||
| --- | ||
|
|
||
| Add community dashboard |
69 changes: 69 additions & 0 deletions
69
src/renderer/src/pages/dashboard/community/CommunityBreadcrumbs.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,69 @@ | ||
| import { | ||
| Breadcrumb, | ||
| BreadcrumbButton, | ||
| BreadcrumbDivider, | ||
| BreadcrumbItem, | ||
| } from '@fluentui/react-components' | ||
| import { FC, memo, useMemo } from 'react' | ||
|
|
||
| import { useDataStore } from '../../../store/store.js' | ||
|
|
||
| export const CommunityBreadcrumbs: FC = memo(function CommunityBreadcrumbs() { | ||
| const state = useDataStore((s) => s.communityDashboard.state) | ||
| const setCommunityDashboardState = useDataStore( | ||
| (s) => s.communityDashboard.setState, | ||
| ) | ||
| const setCommunityManageState = useDataStore( | ||
| (s) => s.communityManage.setState, | ||
| ) | ||
| const communityManageState = useDataStore((s) => s.communityManage.state) | ||
| const communityToManage = useDataStore( | ||
| (s) => s.communityManage.communityToManage, | ||
| ) | ||
|
|
||
| const communityManageMessage = useMemo(() => { | ||
| switch (communityManageState) { | ||
| case 'users': | ||
| return 'Users' | ||
| case 'issues': | ||
| return 'Issues' | ||
| case 'pull-requests': | ||
| return 'Pull Requests' | ||
| default: | ||
| return '' | ||
| } | ||
| }, [communityManageState]) | ||
|
|
||
| if (state == 'overview') { | ||
| return <></> | ||
| } | ||
|
|
||
| return ( | ||
| <Breadcrumb size="large"> | ||
| <BreadcrumbItem> | ||
| <BreadcrumbButton | ||
| onClick={() => { | ||
| setCommunityDashboardState('overview') | ||
| setCommunityManageState('overview') | ||
| }} | ||
| > | ||
| Communities | ||
| </BreadcrumbButton> | ||
| </BreadcrumbItem> | ||
| <BreadcrumbDivider /> | ||
| <BreadcrumbItem> | ||
| <BreadcrumbButton onClick={() => setCommunityManageState('overview')}> | ||
| Manage {communityToManage?.name} | ||
| </BreadcrumbButton> | ||
| </BreadcrumbItem> | ||
| {communityManageMessage !== '' && ( | ||
| <> | ||
| <BreadcrumbDivider /> | ||
| <BreadcrumbItem> | ||
| <BreadcrumbButton>{communityManageMessage}</BreadcrumbButton> | ||
| </BreadcrumbItem> | ||
| </> | ||
| )} | ||
| </Breadcrumb> | ||
| ) | ||
| }) |
9 changes: 0 additions & 9 deletions
9
src/renderer/src/pages/dashboard/community/DashboardCommunity.styles.ts
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
55 changes: 14 additions & 41 deletions
55
src/renderer/src/pages/dashboard/community/manage/ManageCommunity.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,54 +1,27 @@ | ||
| import { Tab, TabList } from '@fluentui/react-components' | ||
| import { type FC, memo, useMemo, useState } from 'react' | ||
| import { type FC, memo, useMemo } from 'react' | ||
|
|
||
| import { Loader } from '../../../../components/Loader.js' | ||
| import { useDataStore } from '../../../../store/store.js' | ||
| import { IssuesPanel } from './IssuesPanel.js' | ||
| import { UserPanel } from './UserPanel.js' | ||
| import { IssuesPanel } from './issues/IssuesPanel.js' | ||
| import { ManageCommunityOverview } from './overview/ManageCommunityOverview.js' | ||
| import { UserPanel } from './users/UserPanel.js' | ||
|
|
||
| export const ManageCommunity: FC = memo(function ManageCommunity() { | ||
| const [selectedTab, setSelectedTab] = useState('users') | ||
| const selectedCommunity = useDataStore( | ||
| (s) => s.communityManage.communityToManage, | ||
| )! | ||
| const managedUsers = useDataStore((s) => s.communityManage.users) | ||
| const managedIssues = useDataStore((s) => s.communityManage.issues) | ||
| const loading = useMemo(() => { | ||
| return managedUsers == null || managedIssues == null | ||
| }, [managedUsers, managedIssues]) | ||
| const communityManageState = useDataStore((s) => s.communityManage.state) | ||
|
|
||
| const Component: FC = useMemo(() => { | ||
| if (selectedTab === 'issues') { | ||
| return IssuesPanel | ||
| switch (communityManageState) { | ||
| case 'users': | ||
| return UserPanel | ||
| case 'issues': | ||
| return IssuesPanel | ||
| default: | ||
| return ManageCommunityOverview | ||
| } | ||
|
|
||
| return UserPanel | ||
| }, [selectedTab]) | ||
| }, [communityManageState]) | ||
|
|
||
| return ( | ||
| <> | ||
| <h2>Manage {selectedCommunity.name}</h2> | ||
| <div> | ||
| <TabList | ||
| selectedValue={selectedTab} | ||
| onTabSelect={(e, d) => setSelectedTab(d.value as string)} | ||
| > | ||
| <Tab id="users" value="users"> | ||
| Users | ||
| </Tab> | ||
| <Tab id="issues" value="issues"> | ||
| Issues | ||
| </Tab> | ||
| <Tab id="pull-requests" value="pull-requests"> | ||
| Pull Requests | ||
| </Tab> | ||
| </TabList> | ||
| <div> | ||
| <Loader isLoading={loading}> | ||
| <Component /> | ||
| </Loader> | ||
| </div> | ||
| </div> | ||
| <Component /> | ||
| </> | ||
| ) | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
21 changes: 21 additions & 0 deletions
21
src/renderer/src/pages/dashboard/community/manage/overview/ManageCommunityOverview.styles.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| import { makeStyles, shorthands } from '@fluentui/react-components' | ||
|
|
||
| import { gov4GitTokens } from '../../../../../App/theme/tokens.js' | ||
|
|
||
| export const useManageCommunityOverviewStyles = makeStyles({ | ||
| container: { | ||
| display: 'grid', | ||
| gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))', | ||
| ...shorthands.gap('16px', '28px'), | ||
| }, | ||
| card: { | ||
| ...shorthands.borderRadius(gov4GitTokens.borderRadiusXLarge), | ||
| boxShadow: gov4GitTokens.shadow16, | ||
| ...shorthands.border('1px', 'solid', gov4GitTokens.g4gColorNeutralDark), | ||
| ':hover': { | ||
| boxShadow: gov4GitTokens.shadow28, | ||
| backgroundColor: gov4GitTokens.g4gColorSecondaryGreen1, | ||
| cursor: 'pointer', | ||
| }, | ||
| }, | ||
| }) |
50 changes: 50 additions & 0 deletions
50
src/renderer/src/pages/dashboard/community/manage/overview/ManageCommunityOverview.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| import { Card } from '@fluentui/react-components' | ||
| import { FC } from 'react' | ||
|
|
||
| import { useDataStore } from '../../../../../store/store.js' | ||
| import { useManageCommunityOverviewStyles } from './ManageCommunityOverview.styles.js' | ||
|
|
||
| export const ManageCommunityOverview: FC = function ManageCommunityOverview() { | ||
| const styles = useManageCommunityOverviewStyles() | ||
| const setCommunityManageState = useDataStore( | ||
| (s) => s.communityManage.setState, | ||
| ) | ||
|
|
||
| return ( | ||
| <div className={styles.container}> | ||
| <Card | ||
| size="small" | ||
| className={styles.card} | ||
| onClick={() => setCommunityManageState('users')} | ||
| > | ||
| <h3>Manage Users</h3> | ||
| <div> | ||
| View active users, issue voting credits, and manage requests to join | ||
| the community. | ||
| </div> | ||
| </Card> | ||
| <Card | ||
| size="small" | ||
| className={styles.card} | ||
| onClick={() => setCommunityManageState('issues')} | ||
| > | ||
| <h3>Manage Issues</h3> | ||
| <div> | ||
| View all issues for selected GitHub community. Select issues to be | ||
| managed by Gov4Git. | ||
| </div> | ||
| </Card> | ||
| <Card | ||
| size="small" | ||
| className={styles.card} | ||
| onClick={() => setCommunityManageState('pull-requests')} | ||
| > | ||
| <h3>Manage Pull Requests</h3> | ||
| <div> | ||
| View all pull requests for selected GitHub community. Select pull | ||
| requests to be managed by Gov4Git. | ||
| </div> | ||
| </Card> | ||
| </div> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
13 changes: 13 additions & 0 deletions
13
src/renderer/src/pages/dashboard/community/overview/CommunityOverview.styles.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| import { makeStyles, shorthands } from '@fluentui/react-components' | ||
|
|
||
| export const useCommunityOverviewStyles = makeStyles({ | ||
| container: { | ||
| display: 'grid', | ||
| ...shorthands.gap('28px'), | ||
| }, | ||
| buttonRow: { | ||
| display: 'flex', | ||
| ...shorthands.gap('16px'), | ||
| alignItems: 'center', | ||
| }, | ||
| }) |
Oops, something went wrong.