From c72ee472b335a06c6f0d8b9c73efd6f84bc6bf1f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Antti=20M=C3=A4ki?= Date: Fri, 20 Oct 2023 15:00:56 +0300 Subject: [PATCH] @thunderstore/cyberstorm-nextjs: move TeamProfileLayout - Due to change in plans, the team page will reside in the same URL as on the old website - Move the page itself, and change it to accept community identifier as URL parameter - Update TeamLinks to point to this new path where community identifier is available, and remove the links where it's unavailable - Update breadcrumbs to match the new URL structure Refs TS-1876 --- .../app/c/[community]/p/[namespace]/page.tsx | 10 +++++++ apps/cyberstorm-nextjs/app/t/[team]/page.tsx | 5 ---- apps/cyberstorm-nextjs/utils/LinkLibrary.tsx | 2 +- apps/cyberstorm-storybook/LinkLibrary.tsx | 2 +- .../layouts/TeamProfileLayout.stories.tsx | 2 +- .../PackageDependantsLayout.tsx | 5 ++++ .../PackageDetailLayout.tsx | 16 +++++++++-- .../PackageTeamMemberList.tsx | 5 ++-- .../TeamProfileLayout/TeamProfileLayout.tsx | 27 ++++++++++++++----- .../TeamSettings/TeamMembers/TeamMembers.tsx | 5 +--- .../TeamServiceAccounts.tsx | 8 ++---- .../src/components/Links/LinkLibrary.tsx | 2 +- 12 files changed, 60 insertions(+), 29 deletions(-) create mode 100644 apps/cyberstorm-nextjs/app/c/[community]/p/[namespace]/page.tsx delete mode 100644 apps/cyberstorm-nextjs/app/t/[team]/page.tsx diff --git a/apps/cyberstorm-nextjs/app/c/[community]/p/[namespace]/page.tsx b/apps/cyberstorm-nextjs/app/c/[community]/p/[namespace]/page.tsx new file mode 100644 index 000000000..3c71e10f6 --- /dev/null +++ b/apps/cyberstorm-nextjs/app/c/[community]/p/[namespace]/page.tsx @@ -0,0 +1,10 @@ +import { TeamProfileLayout } from "@thunderstore/cyberstorm"; + +export default function Page({ + params, +}: { + params: { community: string; namespace: string }; +}) { + const { community, namespace } = params; + return ; +} diff --git a/apps/cyberstorm-nextjs/app/t/[team]/page.tsx b/apps/cyberstorm-nextjs/app/t/[team]/page.tsx deleted file mode 100644 index c31e228ac..000000000 --- a/apps/cyberstorm-nextjs/app/t/[team]/page.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import { TeamProfileLayout } from "@thunderstore/cyberstorm"; - -export default function Page({ params }: { params: { team: string } }) { - return ; -} diff --git a/apps/cyberstorm-nextjs/utils/LinkLibrary.tsx b/apps/cyberstorm-nextjs/utils/LinkLibrary.tsx index d7b4dad95..b682ca524 100644 --- a/apps/cyberstorm-nextjs/utils/LinkLibrary.tsx +++ b/apps/cyberstorm-nextjs/utils/LinkLibrary.tsx @@ -44,7 +44,7 @@ const library: LinkLibrary = { PackageUpload: (p) => Link({ ...p, url: "/developers/upload-package/" }), PrivacyPolicy: (p) => Link({ ...p, url: "/privacy-policy/" }), Settings: (p) => Link({ ...p, url: `/settings/` }), - Team: (p) => Link({ ...p, url: `/t/${p.team}/` }), + Team: (p) => Link({ ...p, url: `/c/${p.community}/p/${p.team}/` }), Teams: (p) => Link({ ...p, url: `/teams/` }), TeamSettings: (p) => Link({ ...p, url: `/teams/${p.team}/` }), TermsOfService: (p) => Link({ ...p, url: "/terms-of-service/" }), diff --git a/apps/cyberstorm-storybook/LinkLibrary.tsx b/apps/cyberstorm-storybook/LinkLibrary.tsx index 3cad28256..8c62f0637 100644 --- a/apps/cyberstorm-storybook/LinkLibrary.tsx +++ b/apps/cyberstorm-storybook/LinkLibrary.tsx @@ -51,7 +51,7 @@ const library: LinkLibrary = { PackageUpload: (p) => Link({ ...p, url: "/developers/upload-package/" }), PrivacyPolicy: (p) => Link({ ...p, url: "/privacy-policy/" }), Settings: (p) => Link({ ...p, url: `/settings/` }), - Team: (p) => Link({ ...p, url: `/t/${p.team}/` }), + Team: (p) => Link({ ...p, url: `/c/${p.community}/p/${p.team}/` }), Teams: (p) => Link({ ...p, url: `/teams/` }), TeamSettings: (p) => Link({ ...p, url: `/teams/${p.team}/` }), TermsOfService: (p) => Link({ ...p, url: "/terms-of-service/" }), diff --git a/apps/cyberstorm-storybook/stories/layouts/TeamProfileLayout.stories.tsx b/apps/cyberstorm-storybook/stories/layouts/TeamProfileLayout.stories.tsx index 3ce860102..f868ecd8e 100644 --- a/apps/cyberstorm-storybook/stories/layouts/TeamProfileLayout.stories.tsx +++ b/apps/cyberstorm-storybook/stories/layouts/TeamProfileLayout.stories.tsx @@ -8,7 +8,7 @@ const meta = { } as Meta; const Template: StoryFn = () => ( - + ); const TeamProfile = Template.bind({}); diff --git a/packages/cyberstorm/src/components/Layout/PackageDependantsLayout/PackageDependantsLayout.tsx b/packages/cyberstorm/src/components/Layout/PackageDependantsLayout/PackageDependantsLayout.tsx index 4615165a4..4acefa78b 100644 --- a/packages/cyberstorm/src/components/Layout/PackageDependantsLayout/PackageDependantsLayout.tsx +++ b/packages/cyberstorm/src/components/Layout/PackageDependantsLayout/PackageDependantsLayout.tsx @@ -9,6 +9,7 @@ import { CommunitiesLink, CommunityLink, PackageLink, + TeamLink, UserLink, } from "../../Links/Links"; import { PackageSearch } from "../../PackageSearch/PackageSearch"; @@ -22,6 +23,8 @@ interface PackageDependantsLayoutProps { * * TODO: Currently this lists Community's packages as the * PackageSearch doesn't support showing dependants. + * + * TODO: Fix TeamLink's team prop. */ export function PackageDependantsLayout(props: PackageDependantsLayoutProps) { const { package: pkg } = props; @@ -40,6 +43,8 @@ export function PackageDependantsLayout(props: PackageDependantsLayoutProps) { {community.name} + Packages + + @@ -90,7 +94,7 @@ export function PackageDetailLayout(props: PackageDetailLayoutProps) { } if (packageData.gitHubLink) { packageDetailsMeta.push( - + GitHub @@ -112,6 +116,13 @@ export function PackageDetailLayout(props: PackageDetailLayoutProps) { {packageData.community} + Packages + + {packageData.team.name} + {packageData.name} } @@ -219,6 +230,7 @@ export function PackageDetailLayout(props: PackageDetailLayoutProps) { diff --git a/packages/cyberstorm/src/components/Layout/PackageDetailLayout/PackageTeamMemberList/PackageTeamMemberList.tsx b/packages/cyberstorm/src/components/Layout/PackageDetailLayout/PackageTeamMemberList/PackageTeamMemberList.tsx index 38de11972..0013d60ca 100644 --- a/packages/cyberstorm/src/components/Layout/PackageDetailLayout/PackageTeamMemberList/PackageTeamMemberList.tsx +++ b/packages/cyberstorm/src/components/Layout/PackageDetailLayout/PackageTeamMemberList/PackageTeamMemberList.tsx @@ -11,6 +11,7 @@ import { Icon } from "../../../Icon/Icon"; const defaultImageSrc = "/images/logo.png"; export interface PackageTeamListProps { + community: string; teamMembers?: TeamMember[]; teamName?: string; } @@ -57,7 +58,7 @@ function compare(a: TeamMember, b: TeamMember) { } export function PackageTeamMemberList(props: PackageTeamListProps) { - const { teamMembers = [], teamName = null } = props; + const { community, teamMembers = [], teamName = null } = props; const mappedPackageTeamList = teamMembers .sort(compare) @@ -81,7 +82,7 @@ export function PackageTeamMemberList(props: PackageTeamListProps) { } headerRightContent={ teamName ? ( - +
See team
diff --git a/packages/cyberstorm/src/components/Layout/TeamProfileLayout/TeamProfileLayout.tsx b/packages/cyberstorm/src/components/Layout/TeamProfileLayout/TeamProfileLayout.tsx index d4a138c0f..faa30d023 100644 --- a/packages/cyberstorm/src/components/Layout/TeamProfileLayout/TeamProfileLayout.tsx +++ b/packages/cyberstorm/src/components/Layout/TeamProfileLayout/TeamProfileLayout.tsx @@ -1,34 +1,49 @@ import styles from "./TeamProfileLayout.module.css"; import { BaseLayout } from "../BaseLayout/BaseLayout"; import { BreadCrumbs } from "../../BreadCrumbs/BreadCrumbs"; -import { TeamLink } from "../../Links/Links"; +import { CommunitiesLink, CommunityLink, TeamLink } from "../../Links/Links"; import { PackageSearch } from "../../PackageSearch/PackageSearch"; interface Props { - teamName: string; + community: string; + namespace: string; } /** * Team's public profile view. * + * Due to changes in plans this layout is a bit badly names. It was + * supposed to be team's profile page which would be independent from + * communities, and match similar UserProfileLayout in functionality. + * However it's now used to list the teams packages under a single + * community. The naming should be rethinked when the actual profile + * page is implemented. + * * TODO: use Dapper to fetch package categories. + * TODO: use Dapper to fetch community's name and use it in CommunityLink. */ export function TeamProfileLayout(props: Props) { - const { teamName } = props; + const { community, namespace } = props; return ( - {teamName} + Communities + {community} + Packages + {namespace} } header={
- Mods uploaded by {teamName} + Mods uploaded by{" "} + + {namespace} +
} - mainContent={} + mainContent={} /> ); } diff --git a/packages/cyberstorm/src/components/Layout/Teams/TeamSettings/TeamMembers/TeamMembers.tsx b/packages/cyberstorm/src/components/Layout/Teams/TeamSettings/TeamMembers/TeamMembers.tsx index f4cc3e0e3..78e19b2b0 100644 --- a/packages/cyberstorm/src/components/Layout/Teams/TeamSettings/TeamMembers/TeamMembers.tsx +++ b/packages/cyberstorm/src/components/Layout/Teams/TeamSettings/TeamMembers/TeamMembers.tsx @@ -7,7 +7,6 @@ import * as Button from "../../../../Button/"; import { Dialog } from "../../../../Dialog/Dialog"; import { TextInput } from "../../../../TextInput/TextInput"; import { Select } from "../../../../Select/Select"; -import { TeamLink } from "../../../../Links/Links"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faPlus } from "@fortawesome/pro-solid-svg-icons"; import { Icon } from "../../../../Icon/Icon"; @@ -46,9 +45,7 @@ export function TeamMembers(props: Props) {

Enter the username of the user you wish to add to the team{" "} - - {teamName} - + {teamName}

diff --git a/packages/cyberstorm/src/components/Layout/Teams/TeamSettings/TeamServiceAccounts/TeamServiceAccounts.tsx b/packages/cyberstorm/src/components/Layout/Teams/TeamSettings/TeamServiceAccounts/TeamServiceAccounts.tsx index fce710c63..9d8332d2f 100644 --- a/packages/cyberstorm/src/components/Layout/Teams/TeamSettings/TeamServiceAccounts/TeamServiceAccounts.tsx +++ b/packages/cyberstorm/src/components/Layout/Teams/TeamSettings/TeamServiceAccounts/TeamServiceAccounts.tsx @@ -5,7 +5,7 @@ import { ServiceAccountList } from "./ServiceAccountList/ServiceAccountList"; import { Dialog } from "../../../../Dialog/Dialog"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faPlus, faCircleExclamation } from "@fortawesome/pro-solid-svg-icons"; -import { TeamLink, UserLink } from "../../../../Links/Links"; +import { UserLink } from "../../../../Links/Links"; import { TextInput } from "../../../../TextInput/TextInput"; import { useState } from "react"; import { CopyButton } from "../../../../CopyButton/CopyButton"; @@ -87,11 +87,7 @@ export function TeamServiceAccounts(props: Props) {

Enter the nickname of the service account you wish to add to the team{" "} - - - {teamName} - - + {teamName}

Link({ ...p, url: "/developers/upload-package/" }), PrivacyPolicy: (p) => Link({ ...p, url: "/privacy-policy/" }), Settings: (p) => Link({ ...p, url: "/settings/" }), - Team: (p) => Link({ ...p, url: `/t/${p.team}/` }), + Team: (p) => Link({ ...p, url: `/c/${p.community}/p/${p.team}/` }), Teams: (p) => Link({ ...p, url: "/teams/" }), TeamSettings: (p) => Link({ ...p, url: `/teams/${p.team}/` }), TermsOfService: (p) => Link({ ...p, url: "/terms-of-service/" }),