From 5ab5af753af54b09872256c949eb4bda19b52211 Mon Sep 17 00:00:00 2001 From: Joe Au-Yeung <65426560+joeauyeung@users.noreply.github.com> Date: Tue, 18 Oct 2022 14:06:26 -0400 Subject: [PATCH] Fix destination calendar overflow on installed and move DestinationCalendarSelector to feature package (#4778) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Standardize destination calendar selector * Move DestinationCalendarSelector to feature package * Render integration name * Add custom components to label and selected * Render destinationCalendar on page load * Change name to just Outlook * Small fixes * Merge branch 'main' into hotfix/install-calendar-overflow * Merge branch 'main' into hotfix/install-calendar-overflow * Fix type errors * Fix type errors * Update apps/web/pages/settings/my-account/calendars.tsx * More type fixes Co-authored-by: Omar López --- .../v2/apps/CalendarListContainer.tsx | 4 +- .../v2/eventtype/EventAdvancedTab.tsx | 2 +- .../pages/settings/my-account/calendars.tsx | 4 +- .../app-store/office365calendar/_metadata.ts | 4 +- .../DestinationCalendarSelector.tsx | 63 ++++++++++++++++--- packages/prisma/seed-app-store.config.json | 46 ++++---------- packages/ui/v2/modules/event-types/index.ts | 1 - 7 files changed, 73 insertions(+), 51 deletions(-) rename packages/{ui/v2/modules/event-types => features/calendars}/DestinationCalendarSelector.tsx (66%) diff --git a/apps/web/components/v2/apps/CalendarListContainer.tsx b/apps/web/components/v2/apps/CalendarListContainer.tsx index 6eb80e916a..240b7c8cff 100644 --- a/apps/web/components/v2/apps/CalendarListContainer.tsx +++ b/apps/web/components/v2/apps/CalendarListContainer.tsx @@ -3,6 +3,7 @@ import Link from "next/link"; import { Fragment } from "react"; import { InstallAppButton } from "@calcom/app-store/components"; +import DestinationCalendarSelector from "@calcom/features/calendars/DestinationCalendarSelector"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import showToast from "@calcom/lib/notification"; import { trpc } from "@calcom/trpc/react"; @@ -18,7 +19,6 @@ import { QueryCell } from "@lib/QueryCell"; import SubHeadingTitleWithConnections from "@components/integrations/SubHeadingTitleWithConnections"; import AdditionalCalendarSelector from "@components/v2/apps/AdditionalCalendarSelector"; -import DestinationCalendarSelector from "@components/v2/apps/DestinationCalendarSelector"; import IntegrationListItem from "@components/v2/apps/IntegrationListItem"; type Props = { @@ -287,7 +287,7 @@ export function CalendarListContainer(props: { heading?: boolean; fromOnboarding

{t("create_events_on")}

{t("set_calendar")}

-
+
{
-
+

{t("add_to_calendar")} diff --git a/packages/app-store/office365calendar/_metadata.ts b/packages/app-store/office365calendar/_metadata.ts index dedf244f71..3e4d91c7ac 100644 --- a/packages/app-store/office365calendar/_metadata.ts +++ b/packages/app-store/office365calendar/_metadata.ts @@ -3,10 +3,10 @@ import type { AppMeta } from "@calcom/types/App"; import _package from "./package.json"; export const metadata = { - name: "Office 365 / Outlook.com Calendar", + name: "Outlook Calendar", description: _package.description, type: "office365_calendar", - title: "Office 365 / Outlook.com Calendar", + title: "Outlook Calendar", imageSrc: "/api/app-store/office365calendar/icon.svg", variant: "calendar", category: "calendar", diff --git a/packages/ui/v2/modules/event-types/DestinationCalendarSelector.tsx b/packages/features/calendars/DestinationCalendarSelector.tsx similarity index 66% rename from packages/ui/v2/modules/event-types/DestinationCalendarSelector.tsx rename to packages/features/calendars/DestinationCalendarSelector.tsx index bc8e71d999..f886a09b08 100644 --- a/packages/ui/v2/modules/event-types/DestinationCalendarSelector.tsx +++ b/packages/features/calendars/DestinationCalendarSelector.tsx @@ -1,5 +1,7 @@ import classNames from "classnames"; import React, { useEffect, useState } from "react"; +import { components } from "react-select"; +import { SingleValueProps, OptionProps, SingleValue, ActionMeta } from "react-select"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { DestinationCalendar } from "@calcom/prisma/client"; @@ -16,6 +18,30 @@ interface Props { maxWidth?: number; } +interface Option { + label: string; + value: string; + subtitle: string; +} + +const SingleValueComponent = ({ ...props }: SingleValueProps

); diff --git a/packages/prisma/seed-app-store.config.json b/packages/prisma/seed-app-store.config.json index 11f30ee3e1..6a382ac020 100644 --- a/packages/prisma/seed-app-store.config.json +++ b/packages/prisma/seed-app-store.config.json @@ -2,89 +2,67 @@ { "/*": "This file is auto-generated and updated by `yarn app-store create/edit`. Don't edit it manually", "dirName": "routing-forms", - "categories": [ - "other" - ], + "categories": ["other"], "slug": "routing-forms", "type": "routing-forms_other" }, { "dirName": "whereby", - "categories": [ - "video" - ], + "categories": ["video"], "slug": "whereby", "type": "whereby_video" }, { "dirName": "around", - "categories": [ - "video" - ], + "categories": ["video"], "slug": "around", "type": "around_video" }, { "dirName": "riverside", - "categories": [ - "video" - ], + "categories": ["video"], "slug": "riverside", "type": "riverside_video" }, { "dirName": "typeform", - "categories": [ - "other" - ], + "categories": ["other"], "slug": "typeform", "type": "typeform_other" }, { "dirName": "ping", - "categories": [ - "video" - ], + "categories": ["video"], "slug": "ping", "type": "ping_video" }, { "dirName": "campfire", - "categories": [ - "video" - ], + "categories": ["video"], "slug": "campfire", "type": "campfire_video" }, { "dirName": "rainbow", - "categories": [ - "web3" - ], + "categories": ["web3"], "slug": "rainbow", "type": "rainbow_web3" }, { "dirName": "raycast", - "categories": [ - "other" - ], + "categories": ["other"], "slug": "raycast", "type": "raycast_other" }, { "dirName": "n8n", - "categories": [ - "automation" - ], + "categories": ["automation"], "slug": "n8n", "type": "n8n_automation" }, { "dirName": "exchangecalendar", - "categories": [ - "calendar" - ], + "categories": ["calendar"], "slug": "exchange", "type": "exchange_calendar" }, @@ -106,4 +84,4 @@ "slug": "fathom", "type": "fathom_analytics" } -] \ No newline at end of file +] diff --git a/packages/ui/v2/modules/event-types/index.ts b/packages/ui/v2/modules/event-types/index.ts index ca078a7dbf..b0f53fe2ec 100644 --- a/packages/ui/v2/modules/event-types/index.ts +++ b/packages/ui/v2/modules/event-types/index.ts @@ -1,4 +1,3 @@ export { default as CreateEventType } from "./CreateEventType"; -export { default as DestinationCalendarSelector } from "./DestinationCalendarSelector"; export { default as CustomInputItem } from "./CustomInputItem"; export { default as CheckedTeamSelect } from "./CheckedTeamSelect";