@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

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 <TeamProfileLayout community={community} namespace={namespace} />;
+}

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/" }),

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/" }),

apps/cyberstorm-storybook/stories/layouts/TeamProfileLayout.stories.tsx

@@ -8,7 +8,7 @@ const meta = {
 } as Meta<typeof TeamProfileLayout>;
 
 const Template: StoryFn<typeof TeamProfileLayout> = () => (
-  <TeamProfileLayout teamName="team" />
+  <TeamProfileLayout community="community" namespace="team" />
 );
 
 const TeamProfile = Template.bind({});

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) {
           <CommunityLink community={community.identifier}>
             {community.name}
           </CommunityLink>
+          Packages
+          <TeamLink community={community.identifier} team={"TODO"}></TeamLink>
           <PackageLink
             community={pkg.community}
             namespace={pkg.namespace}

packages/cyberstorm/src/components/Layout/PackageDetailLayout/PackageDetailLayout.tsx

@@ -76,7 +76,11 @@ export function PackageDetailLayout(props: PackageDetailLayoutProps) {
   const packageDetailsMeta = [];
   if (packageData.author) {
     packageDetailsMeta.push(
-      <TeamLink key="1" team={packageData.team.name}>
+      <TeamLink
+        key="team"
+        community={packageData.community}
+        team={packageData.team.name}
+      >
         <Button.Root plain colorScheme="transparentPrimary" paddingSize="small">
           <Button.ButtonIcon>
             <Icon>
@@ -90,7 +94,7 @@ export function PackageDetailLayout(props: PackageDetailLayoutProps) {
   }
   if (packageData.gitHubLink) {
     packageDetailsMeta.push(
-      <a key="2" href={packageData.gitHubLink}>
+      <a key="github" href={packageData.gitHubLink}>
         <Button.Root>
           <Button.ButtonLabel>GitHub</Button.ButtonLabel>
           <Button.ButtonIcon>
@@ -112,6 +116,13 @@ export function PackageDetailLayout(props: PackageDetailLayoutProps) {
           <CommunityLink community={packageData.community}>
             {packageData.community}
           </CommunityLink>
+          Packages
+          <TeamLink
+            community={packageData.community}
+            team={packageData.team.name}
+          >
+            {packageData.team.name}
+          </TeamLink>
           {packageData.name}
         </BreadCrumbs>
       }
@@ -219,6 +230,7 @@ export function PackageDetailLayout(props: PackageDetailLayoutProps) {
           <PackageTagList tags={packageData.categories} />
           <PackageDependencyList namespace={namespace} community={community} />
           <PackageTeamMemberList
+            community={packageData.community}
             teamName={packageData.team.name}
             teamMembers={packageData.team.members}
           />

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 ? (
-            <TeamLink team={teamName}>
+            <TeamLink community={community} team={teamName}>
               <div className={styles.teamLink}>
                 See team
                 <div className={styles.teamLinkIcon}>

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 (
     <BaseLayout
       breadCrumb={
         <BreadCrumbs>
-          <TeamLink team={teamName}>{teamName}</TeamLink>
+          <CommunitiesLink>Communities</CommunitiesLink>
+          <CommunityLink community={community}>{community}</CommunityLink>
+          Packages
+          {namespace}
         </BreadCrumbs>
       }
       header={
         <div className={styles.header}>
-          Mods uploaded by <TeamLink team={teamName}>{teamName}</TeamLink>
+          Mods uploaded by{" "}
+          <TeamLink community={community} team={namespace}>
+            {namespace}
+          </TeamLink>
         </div>
       }
-      mainContent={<PackageSearch teamId={teamName} packageCategories={[]} />}
+      mainContent={<PackageSearch teamId={namespace} packageCategories={[]} />}
     />
   );
 }

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) {
         <div className={styles.dialogContent}>
           <p className={styles.description}>
             Enter the username of the user you wish to add to the team{" "}
-            <TeamLink team={teamName}>
-              <span className={styles.dialogTeamName}>{teamName}</span>
-            </TeamLink>
+            <span className={styles.dialogTeamName}>{teamName}</span>
           </p>
           <div className={styles.dialogInput}>
             <div className={styles.textInput}>

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) {
                     <p className={styles.description}>
                       Enter the nickname of the service account you wish to add
                       to the team{" "}
-                      <TeamLink team={teamName}>
-                        <span className={styles.dialogTeamName}>
-                          {teamName}
-                        </span>
-                      </TeamLink>
+                      <span className={styles.dialogTeamName}>{teamName}</span>
                     </p>
                     <TextInput
                       setValue={setAddedServiceAccountName}

packages/cyberstorm/src/components/Links/LinkLibrary.tsx

@@ -43,7 +43,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/" }),