V1->V2 connect calendar (#3961)

* V1->V2 connect calendar

* Fix imports

* Fix types

* Implementing v1 NoCalendarConnectedAlert changes on v2 component

Co-authored-by: Peer Richelsen <peeroke@gmail.com>
Co-authored-by: Alan <alannnc@gmail.com>
pull/4218/head^2
sean-brydon 2022-09-06 21:45:46 +01:00 committed by GitHub
parent 008706e5ac
commit 91bc6ae820
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 17 additions and 1 deletions

View File

@ -32,6 +32,7 @@ import EventTypeDescription from "@components/eventtype/EventTypeDescription";
import SkeletonLoader from "@components/eventtype/SkeletonLoader";
import Avatar from "@components/ui/Avatar";
import AvatarGroup from "@components/ui/AvatarGroup";
import NoCalendarConnectedAlert from "@components/ui/NoCalendarConnectedAlert";
import { TRPCClientError } from "@trpc/react";
@ -551,6 +552,7 @@ const WithQuery = withQuery(["viewer.eventTypes"]);
const EventTypesPage = () => {
const { t } = useLocale();
return (
<div>
<Head>
@ -581,6 +583,9 @@ const EventTypesPage = () => {
className="mb-4"
/>
)}
<NoCalendarConnectedAlert />
{data.eventTypeGroups.map((group, index) => (
<Fragment key={group.profile.slug}>
{/* hide list heading when there is only one (current user) */}

View File

@ -2,6 +2,7 @@ import classNames from "classnames";
import React, { useEffect, useState } from "react";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { DestinationCalendar } from "@calcom/prisma/client";
import { trpc } from "@calcom/trpc/react";
import Select from "@calcom/ui/v2/core/form/Select";
@ -10,6 +11,7 @@ interface Props {
isLoading?: boolean;
hidePlaceholder?: boolean;
/** The external Id of the connected calendar */
destinationCalendar?: DestinationCalendar | null;
value: string | undefined;
maxWidth?: number;
}
@ -20,6 +22,7 @@ const DestinationCalendarSelector = ({
value,
hidePlaceholder,
maxWidth,
destinationCalendar,
}: Props): JSX.Element | null => {
const { t } = useLocale();
const query = trpc.useQuery(["viewer.connectedCalendars"]);
@ -73,7 +76,15 @@ const DestinationCalendarSelector = ({
<div className="relative" title={`${t("select_destination_calendar")}: ${selectedOption?.label || ""}`}>
<Select
name="primarySelectedCalendar"
placeholder={!hidePlaceholder ? `${t("select_destination_calendar")}:` : undefined}
placeholder={
!hidePlaceholder ? (
`${t("select_destination_calendar")}`
) : (
<span>
{t("default_calendar_selected")} ({destinationCalendar?.externalId})
</span>
)
}
options={options}
styles={{
placeholder: (styles) => ({ ...styles, ...content(hidePlaceholder) }),