Skip to content

Commit e5fd455

Browse files
Ryukemeisterdevin-ai-integration[bot]bot_apk
authored
refactor: move AppList to features with slot props (calcom#28100)
* refactor: move AppSetDefaultLinkDialog to features + inline QueryCell + fix broken type import Co-Authored-By: rajiv@cal.com <sahalrajiv6900@gmail.com> * refactor: move AppList to features with slot props + delete AppListCard switcher Co-Authored-By: rajiv@cal.com <sahalrajiv6900@gmail.com> * fix: correct ConnectedApps type to avoid double nesting of items Co-Authored-By: rajiv@cal.com <sahalrajiv6900@gmail.com> --------- Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Co-authored-by: bot_apk <apk@cognition.ai>
1 parent 972d703 commit e5fd455

10 files changed

Lines changed: 104 additions & 133 deletions

File tree

‎apps/web/components/apps/CalendarListContainer.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,11 @@ import { ShellSubHeading } from "@calcom/ui/components/layout";
1111
import { List } from "@calcom/ui/components/list";
1212
import { showToast } from "@calcom/ui/components/toast";
1313
import { revalidateSettingsCalendars } from "@calcom/web/app/cache/path/settings/my-account";
14-
import AppListCard from "@calcom/web/modules/apps/components/AppListCard";
14+
import AppListCardWebWrapper from "@calcom/web/modules/apps/components/AppListCardWebWrapper";
1515
import { SkeletonLoader } from "@calcom/web/modules/apps/components/SkeletonLoader";
1616
import { SelectedCalendarsSettingsWebWrapper } from "@calcom/web/modules/calendars/components/SelectedCalendarsSettingsWebWrapper";
1717
import SubHeadingTitleWithConnections from "@components/integrations/SubHeadingTitleWithConnections";
1818
import useRouterQuery from "@lib/hooks/useRouterQuery";
19-
2019
import { QueryCell } from "@lib/QueryCell";
2120
import { Suspense, useEffect } from "react";
2221
import { DestinationCalendarSettingsWebWrapper } from "./DestinationCalendarSettingsWebWrapper";
@@ -45,7 +44,7 @@ function CalendarList(props: Props): JSX.Element {
4544
success={({ data }) => (
4645
<List>
4746
{data.items.map((item) => (
48-
<AppListCard
47+
<AppListCardWebWrapper
4948
title={item.name}
5049
key={item.name}
5150
logo={item.logo}

‎apps/web/modules/apps/components/AdminAppsList.tsx‎

Lines changed: 13 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,7 @@
11
"use client";
22

3-
import { zodResolver } from "@hookform/resolvers/zod";
4-
// eslint-disable-next-line no-restricted-imports
5-
import { noop } from "lodash";
6-
import type { FC } from "react";
7-
import { useReducer, useState } from "react";
8-
import { Controller, useForm } from "react-hook-form";
9-
import { z } from "zod";
10-
113
import AppCategoryNavigation from "@calcom/app-store/_components/AppCategoryNavigation";
124
import { appKeysSchemas } from "@calcom/app-store/apps.keys-schemas.generated";
13-
import AppListCard from "@calcom/web/modules/apps/components/AppListCard";
145
import { Dialog } from "@calcom/features/components/controlled-dialog";
156
import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";
167
import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -20,19 +11,25 @@ import { trpc } from "@calcom/trpc/react";
2011
import cs from "@calcom/ui/classNames";
2112
import { Button } from "@calcom/ui/components/button";
2213
import {
14+
ConfirmationDialogContent,
15+
DialogClose,
2316
DialogContent,
2417
DialogFooter,
25-
DialogClose,
26-
ConfirmationDialogContent,
2718
} from "@calcom/ui/components/dialog";
2819
import { EmptyScreen } from "@calcom/ui/components/empty-screen";
29-
import { Form } from "@calcom/ui/components/form";
30-
import { TextField } from "@calcom/ui/components/form";
31-
import { Switch } from "@calcom/ui/components/form";
20+
import { Form, Switch, TextField } from "@calcom/ui/components/form";
3221
import { List } from "@calcom/ui/components/list";
33-
import { PencilIcon } from "@coss/ui/icons";
3422
import { SkeletonButton, SkeletonContainer, SkeletonText } from "@calcom/ui/components/skeleton";
3523
import { showToast } from "@calcom/ui/components/toast";
24+
import AppListCardWebWrapper from "@calcom/web/modules/apps/components/AppListCardWebWrapper";
25+
import { PencilIcon } from "@coss/ui/icons";
26+
import { zodResolver } from "@hookform/resolvers/zod";
27+
// eslint-disable-next-line no-restricted-imports
28+
import { noop } from "lodash";
29+
import type { FC } from "react";
30+
import { useReducer, useState } from "react";
31+
import { Controller, useForm } from "react-hook-form";
32+
import { z } from "zod";
3633

3734
type App = RouterOutputs["viewer"]["apps"]["listLocal"][number];
3835

@@ -83,7 +80,7 @@ const IntegrationContainer = ({
8380

8481
return (
8582
<li>
86-
<AppListCard
83+
<AppListCardWebWrapper
8784
logo={app.logo}
8885
description={app.description}
8986
title={app.name}

‎apps/web/modules/apps/components/AppListCard.tsx‎

Lines changed: 0 additions & 25 deletions
This file was deleted.

‎apps/web/modules/apps/components/ConferencingAppsViewWebWrapper.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,17 @@
11
"use client";
22

3-
import { useReducer } from "react";
4-
3+
import { AppList } from "@calcom/features/apps/components/AppList";
4+
import DisconnectIntegrationModal from "@calcom/features/apps/components/DisconnectIntegrationModal";
55
import SettingsHeader from "@calcom/features/settings/appDir/SettingsHeader";
66
import { useLocale } from "@calcom/lib/hooks/useLocale";
7-
import { trpc } from "@calcom/trpc/react";
87
import type { RouterOutputs } from "@calcom/trpc/react";
8+
import { trpc } from "@calcom/trpc/react";
99
import { Button } from "@calcom/ui/components/button";
1010
import { EmptyScreen } from "@calcom/ui/components/empty-screen";
11-
import { SkeletonText, SkeletonContainer } from "@calcom/ui/components/skeleton";
11+
import { SkeletonContainer, SkeletonText } from "@calcom/ui/components/skeleton";
1212
import { showToast } from "@calcom/ui/components/toast";
13-
14-
import { AppList } from "./AppList";
15-
import DisconnectIntegrationModal from "@calcom/features/apps/components/DisconnectIntegrationModal";
13+
import AppListCardWebWrapper from "@calcom/web/modules/apps/components/AppListCardWebWrapper";
14+
import { useReducer } from "react";
1615

1716
export type UpdateUsersDefaultConferencingAppParams = {
1817
appSlug: string;
@@ -142,6 +141,7 @@ export const InstalledConferencingApps = ({
142141
isEventTypesFetching={false}
143142
handleConnectDisconnectIntegrationMenuToggle={handleConnectDisconnectIntegrationMenuToggle}
144143
handleBulkEditDialogToggle={handleBulkEditDialogToggle}
144+
AppListCardComponent={AppListCardWebWrapper}
145145
/>
146146
);
147147
};

‎apps/web/modules/apps/installed/[category]/installed-category-view.tsx‎

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,26 @@
11
"use client";
22

3-
import { useReducer } from "react";
4-
53
import getAppCategoryTitle from "@calcom/app-store/_utils/getAppCategoryTitle";
6-
import { AppList, type HandleDisconnect } from "@calcom/web/modules/apps/components/AppList";
7-
import type { UpdateUsersDefaultConferencingAppParams } from "@calcom/web/modules/apps/components/AppSetDefaultLinkDialog";
8-
import DisconnectIntegrationModal from "@calcom/features/apps/components/DisconnectIntegrationModal";
4+
import { AppList, type HandleDisconnect } from "@calcom/features/apps/components/AppList";
5+
import type { UpdateUsersDefaultConferencingAppParams } from "@calcom/features/apps/components/AppSetDefaultLinkDialog";
96
import type { RemoveAppParams } from "@calcom/features/apps/components/DisconnectIntegrationModal";
10-
import { SkeletonLoader } from "@calcom/web/modules/apps/components/SkeletonLoader";
7+
import DisconnectIntegrationModal from "@calcom/features/apps/components/DisconnectIntegrationModal";
118
import type { BulkUpdatParams } from "@calcom/features/eventtypes/components/BulkEditDefaultForEventsModal";
129
import { useLocale } from "@calcom/lib/hooks/useLocale";
1310
import { AppCategories } from "@calcom/prisma/enums";
14-
import { trpc } from "@calcom/trpc/react";
1511
import type { RouterOutputs } from "@calcom/trpc/react";
12+
import { trpc } from "@calcom/trpc/react";
1613
import { Button } from "@calcom/ui/components/button";
1714
import { EmptyScreen } from "@calcom/ui/components/empty-screen";
1815
import type { Icon } from "@calcom/ui/components/icon";
1916
import { ShellSubHeading } from "@calcom/ui/components/layout";
2017
import { showToast } from "@calcom/ui/components/toast";
21-
22-
import { QueryCell } from "@lib/QueryCell";
23-
18+
import AppListCardWebWrapper from "@calcom/web/modules/apps/components/AppListCardWebWrapper";
19+
import { SkeletonLoader } from "@calcom/web/modules/apps/components/SkeletonLoader";
2420
import { CalendarListContainer } from "@components/apps/CalendarListContainer";
2521
import InstalledAppsLayout from "@components/apps/layouts/InstalledAppsLayout";
22+
import { QueryCell } from "@lib/QueryCell";
23+
import { useReducer } from "react";
2624

2725
interface IntegrationsContainerProps {
2826
variant?: AppCategories;
@@ -166,6 +164,7 @@ const IntegrationsContainer = ({
166164
isEventTypesFetching={isEventTypesFetching}
167165
handleConnectDisconnectIntegrationMenuToggle={handleConnectDisconnectIntegrationMenuToggle}
168166
handleBulkEditDialogToggle={handleBulkEditDialogToggle}
167+
AppListCardComponent={AppListCardWebWrapper}
169168
/>
170169
</div>
171170
);

‎apps/web/modules/calendars/components/SelectedCalendarsSettingsWebWrapper.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,10 @@ import { trpc } from "@calcom/trpc/react";
55
import { Alert } from "@calcom/ui/components/alert";
66
import { Select } from "@calcom/ui/components/form";
77
import { List } from "@calcom/ui/components/list";
8-
import AppListCard from "@calcom/web/modules/apps/components/AppListCard";
8+
import AppListCardWebWrapper from "@calcom/web/modules/apps/components/AppListCardWebWrapper";
99
import CredentialActionsDropdown from "@calcom/web/modules/apps/components/CredentialActionsDropdown";
10-
import { CalendarSwitch } from "@calcom/web/modules/calendars/components/CalendarSwitch";
1110
import AdditionalCalendarSelector from "@calcom/web/modules/calendars/components/AdditionalCalendarSelector";
11+
import { CalendarSwitch } from "@calcom/web/modules/calendars/components/CalendarSwitch";
1212
import Link from "next/link";
1313
import React from "react";
1414

@@ -57,7 +57,7 @@ const ConnectedCalendarList = ({
5757
{items.map((connectedCalendar) => {
5858
if (!!connectedCalendar.calendars && connectedCalendar.calendars.length > 0) {
5959
return (
60-
<AppListCard
60+
<AppListCardWebWrapper
6161
key={`list-${connectedCalendar.credentialId}-${scope}`}
6262
shouldHighlight
6363
slug={connectedCalendar.integration.slug}
@@ -104,7 +104,7 @@ const ConnectedCalendarList = ({
104104
</>
105105
)}
106106
</div>
107-
</AppListCard>
107+
</AppListCardWebWrapper>
108108
);
109109
}
110110
return (

apps/web/modules/apps/components/AppList.tsx renamed to packages/features/apps/components/AppList.tsx

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
1-
import { useCallback, useState } from "react";
2-
3-
import { InstallAppButton } from "@calcom/app-store/InstallAppButton";
41
import { AppSettings } from "@calcom/app-store/_components/AppSettings";
5-
import { getLocationFromApp, type EventLocationType } from "@calcom/app-store/locations";
2+
import type { ConnectedApps } from "@calcom/app-store/_utils/getConnectedApps";
3+
import { InstallAppButton } from "@calcom/app-store/InstallAppButton";
4+
import { type EventLocationType, getLocationFromApp } from "@calcom/app-store/locations";
65
import type { AppCardApp } from "@calcom/app-store/types";
7-
import AppListCard from "@calcom/web/modules/apps/components/AppListCard";
8-
import type { UpdateUsersDefaultConferencingAppParams } from "@calcom/web/modules/apps/components/AppSetDefaultLinkDialog";
9-
import { AppSetDefaultLinkDialog } from "@calcom/web/modules/apps/components/AppSetDefaultLinkDialog";
6+
import type { UpdateUsersDefaultConferencingAppParams } from "@calcom/features/apps/components/AppSetDefaultLinkDialog";
7+
import { AppSetDefaultLinkDialog } from "@calcom/features/apps/components/AppSetDefaultLinkDialog";
108
import type {
119
BulkUpdatParams,
1210
EventTypes,
@@ -15,9 +13,10 @@ import { BulkEditDefaultForEventsModal } from "@calcom/features/eventtypes/compo
1513
import { isDelegationCredential } from "@calcom/lib/delegationCredential";
1614
import { useLocale } from "@calcom/lib/hooks/useLocale";
1715
import type { AppCategories } from "@calcom/prisma/enums";
18-
import { type RouterOutputs } from "@calcom/trpc/react";
16+
import type { DefaultConferencingApp } from "@calcom/prisma/zod-utils";
1917
import type { App } from "@calcom/types/App";
2018
import { Alert } from "@calcom/ui/components/alert";
19+
import type { AppListCardProps } from "@calcom/ui/components/app-list-card";
2120
import { Button } from "@calcom/ui/components/button";
2221
import {
2322
Dropdown,
@@ -28,24 +27,27 @@ import {
2827
} from "@calcom/ui/components/dropdown";
2928
import { List } from "@calcom/ui/components/list";
3029
import { showToast } from "@calcom/ui/components/toast";
30+
import type { ComponentType, ReactNode } from "react";
31+
import { useCallback, useState } from "react";
3132

3233
export type HandleDisconnect = (credentialId: number, app: App["slug"], teamId?: number) => void;
3334

3435
interface AppListProps {
3536
variant?: AppCategories;
36-
data: RouterOutputs["viewer"]["apps"]["integrations"];
37+
data: ConnectedApps;
3738
handleDisconnect: HandleDisconnect;
3839
listClassName?: string;
3940
appCardClassName?: string;
4041
appCardMenuClassName?: string;
41-
defaultConferencingApp: RouterOutputs["viewer"]["apps"]["getUsersDefaultConferencingApp"];
42+
defaultConferencingApp: DefaultConferencingApp | undefined;
4243
handleUpdateUserDefaultConferencingApp: (params: UpdateUsersDefaultConferencingAppParams) => void;
4344
handleBulkUpdateDefaultLocation: (params: BulkUpdatParams) => void;
4445
isBulkUpdateDefaultLocationPending: boolean;
4546
eventTypes?: EventTypes;
4647
isEventTypesFetching?: boolean;
4748
handleConnectDisconnectIntegrationMenuToggle: () => void;
4849
handleBulkEditDialogToggle: () => void;
50+
AppListCardComponent: ComponentType<AppListCardProps & { children?: ReactNode }>;
4951
}
5052

5153
export const AppList = ({
@@ -63,6 +65,7 @@ export const AppList = ({
6365
isEventTypesFetching,
6466
handleConnectDisconnectIntegrationMenuToggle,
6567
handleBulkEditDialogToggle,
68+
AppListCardComponent,
6669
}: AppListProps) => {
6770
const [bulkUpdateModal, setBulkUpdateModal] = useState(false);
6871
const [locationType, setLocationType] = useState<(EventLocationType & { slug: string }) | undefined>(
@@ -79,7 +82,7 @@ export const AppList = ({
7982
appSlug === defaultConferencingApp?.appSlug ||
8083
(appSlug === "daily-video" && !defaultConferencingApp?.appSlug);
8184
return (
82-
<AppListCard
85+
<AppListCardComponent
8386
key={item.name}
8487
description={item.description}
8588
title={item.name}
@@ -141,7 +144,7 @@ export const AppList = ({
141144
) : null
142145
}>
143146
<AppSettings slug={item.slug} />
144-
</AppListCard>
147+
</AppListCardComponent>
145148
);
146149
};
147150

apps/web/modules/apps/components/AppSetDefaultLinkDialog.tsx renamed to packages/features/apps/components/AppSetDefaultLinkDialog.tsx

File renamed without changes.

apps/web/modules/apps/components/AppListCardPlatformWrapper.tsx renamed to packages/platform/atoms/connect/conferencing-apps/AppListCardPlatformWrapper.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { AppListCard } from "@calcom/ui/components/app-list-card";
21
import type { AppListCardProps } from "@calcom/ui/components/app-list-card";
2+
import { AppListCard } from "@calcom/ui/components/app-list-card";
33

44
export default function AppListCardPlatformWrapper(props: AppListCardProps) {
55
const logo = `https://app.cal.com${props.logo}`;

0 commit comments

Comments
 (0)