From 1b2707d4f071b6ed80642d908147e6db80c4d1a9 Mon Sep 17 00:00:00 2001 From: Leo Giovanetti Date: Sat, 17 Sep 2022 14:53:31 -0300 Subject: [PATCH] Old teams page in v2 (#4553) * Old teams page in v2 * Tea nav item fix * Team creation modal converted to v2 * Updated emptyscreen and shell button Co-authored-by: Peer Richelsen --- apps/web/components/team/TeamCreateModal.tsx | 23 ++----- apps/web/components/team/TeamList.tsx | 2 +- apps/web/components/team/TeamListItem.tsx | 29 ++++---- apps/web/middleware.ts | 1 + apps/web/pages/more.tsx | 1 - apps/web/pages/v2/teams/index.tsx | 72 ++++++++++++++++++++ packages/ui/v2/core/Shell.tsx | 10 ++- 7 files changed, 100 insertions(+), 38 deletions(-) create mode 100644 apps/web/pages/v2/teams/index.tsx diff --git a/apps/web/components/team/TeamCreateModal.tsx b/apps/web/components/team/TeamCreateModal.tsx index 41bc71bc4f..a1dc2e9b3a 100644 --- a/apps/web/components/team/TeamCreateModal.tsx +++ b/apps/web/components/team/TeamCreateModal.tsx @@ -3,9 +3,9 @@ import { useRef, useState } from "react"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { trpc } from "@calcom/trpc/react"; import { Button } from "@calcom/ui"; -import { Alert } from "@calcom/ui/Alert"; -import { Dialog, DialogContent, DialogFooter } from "@calcom/ui/Dialog"; import { Icon } from "@calcom/ui/Icon"; +import { Alert } from "@calcom/ui/v2/core/Alert"; +import { Dialog, DialogContent, DialogFooter } from "@calcom/ui/v2/core/Dialog"; interface Props { isOpen: boolean; @@ -28,15 +28,14 @@ export default function TeamCreate(props: Props) { }, }); - const createTeam = (e: React.FormEvent) => { - e.preventDefault(); + const createTeam = () => { createTeamMutation.mutate({ name: nameRef?.current?.value }); }; return ( <> - +
@@ -50,7 +49,7 @@ export default function TeamCreate(props: Props) {
-
+
{errorMessage && } - - - -
diff --git a/apps/web/components/team/TeamList.tsx b/apps/web/components/team/TeamList.tsx index a38edfb4f6..87ecf4f5a5 100644 --- a/apps/web/components/team/TeamList.tsx +++ b/apps/web/components/team/TeamList.tsx @@ -1,7 +1,7 @@ import { useState } from "react"; -import showToast from "@calcom/lib/notification"; import { inferQueryOutput, trpc } from "@calcom/trpc/react"; +import showToast from "@calcom/ui/v2/core/notifications"; import TeamListItem from "./TeamListItem"; diff --git a/apps/web/components/team/TeamListItem.tsx b/apps/web/components/team/TeamListItem.tsx index f759d5e412..24a107c2b8 100644 --- a/apps/web/components/team/TeamListItem.tsx +++ b/apps/web/components/team/TeamListItem.tsx @@ -4,19 +4,19 @@ import Link from "next/link"; import classNames from "@calcom/lib/classNames"; import { getPlaceholderAvatar } from "@calcom/lib/getPlaceholderAvatar"; import { useLocale } from "@calcom/lib/hooks/useLocale"; -import showToast from "@calcom/lib/notification"; import { inferQueryOutput, trpc } from "@calcom/trpc/react"; -import Button from "@calcom/ui/Button"; -import ConfirmationDialogContent from "@calcom/ui/ConfirmationDialogContent"; -import { Dialog, DialogTrigger } from "@calcom/ui/Dialog"; +import { Icon } from "@calcom/ui/Icon"; +import Button from "@calcom/ui/v2/core/Button"; +import ConfirmationDialogContent from "@calcom/ui/v2/core/ConfirmationDialogContent"; +import { Dialog, DialogTrigger } from "@calcom/ui/v2/core/Dialog"; import Dropdown, { DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, -} from "@calcom/ui/Dropdown"; -import { Icon } from "@calcom/ui/Icon"; -import { Tooltip } from "@calcom/ui/Tooltip"; +} from "@calcom/ui/v2/core/Dropdown"; +import { Tooltip } from "@calcom/ui/v2/core/Tooltip"; +import showToast from "@calcom/ui/v2/core/notifications"; import Avatar from "@components/ui/Avatar"; @@ -84,7 +84,7 @@ export default function TeamListItem(props: Props) { !isInvitee && "group hover:bg-neutral-50" )}> {!isInvitee ? ( - + {teamInfo} @@ -112,7 +112,6 @@ export default function TeamListItem(props: Props) { + }> + <> + {!!errorMessage && } + {showCreateTeamModal && ( + setShowCreateTeamModal(false)} /> + )} + {invites.length > 0 && ( +
+

{t("open_invitations")}

+ +
+ )} + {isLoading && } + {!teams.length && !isLoading && ( + setShowCreateTeamModal(true)}> + {t("create_team")} + + } + buttonOnClick={() => setShowCreateTeamModal(true)} + /> + )} + {teams.length > 0 && } + + + ); +} + +Teams.requiresLicense = false; + +export default Teams; diff --git a/packages/ui/v2/core/Shell.tsx b/packages/ui/v2/core/Shell.tsx index 0113283cd2..e96623bcdb 100644 --- a/packages/ui/v2/core/Shell.tsx +++ b/packages/ui/v2/core/Shell.tsx @@ -382,6 +382,8 @@ export type NavigationItemType = { icon?: SVGComponent; child?: NavigationItemType[]; pro?: true; + onlyMobile?: boolean; + onlyDesktop?: boolean; isCurrent?: ({ item, isChild, @@ -411,6 +413,12 @@ const navigation: NavigationItemType[] = [ href: "/availability", icon: Icon.FiClock, }, + { + name: "teams", + href: "/teams", + icon: Icon.FiUsers, + onlyDesktop: true, + }, { name: "apps", href: "/apps", @@ -480,7 +488,7 @@ const { desktopNavigationItems, mobileNavigationBottomItems, mobileNavigationMor // We filter out the "more" separator in desktop navigation if (item.name !== MORE_SEPARATOR_NAME) items.desktopNavigationItems.push(item); // Items for mobile bottom navigation - if (index < moreSeparatorIndex + 1) items.mobileNavigationBottomItems.push(item); + if (index < moreSeparatorIndex + 1 && !item.onlyDesktop) items.mobileNavigationBottomItems.push(item); // Items for the "more" menu in mobile navigation else items.mobileNavigationMoreItems.push(item); return items;