From 47fe791006402b93e0bdee7cdba6c9331c0a11b5 Mon Sep 17 00:00:00 2001
From: sean-brydon <55134778+sean-brydon@users.noreply.github.com>
Date: Thu, 5 Jan 2023 17:00:16 +0000
Subject: [PATCH] Tidy up v2 layouts (#6266)
* Lots of places use layouts huh
* Fix imports
* FIx merge removing rtl settings
* Fixing Icon Import
* Fix shell import
* Fix tab exports
---
.../components/apps}/layouts/AppsLayout.tsx | 6 +----
.../apps}/layouts/InstalledAppsLayout.tsx | 8 +++----
.../components/auth}/layouts/AdminLayout.tsx | 6 ++---
.../web/components}/layouts/WizardLayout.tsx | 2 +-
apps/web/components/layouts/_README.md | 4 ++++
apps/web/pages/apps/index.tsx | 4 +++-
apps/web/pages/apps/installed/[category].tsx | 4 ++--
.../pages/settings/admin/apps/[category].tsx | 4 +++-
.../pages/settings/admin/impersonation.tsx | 4 +++-
apps/web/pages/settings/admin/index.tsx | 4 +++-
apps/web/pages/settings/admin/users.tsx | 4 +++-
apps/web/pages/settings/billing/index.tsx | 3 ++-
.../web/pages/settings/developer/api-keys.tsx | 2 +-
.../pages/settings/my-account/appearance.tsx | 2 +-
.../pages/settings/my-account/calendars.tsx | 2 +-
.../settings/my-account/conferencing.tsx | 2 +-
.../web/pages/settings/my-account/general.tsx | 2 +-
.../web/pages/settings/my-account/profile.tsx | 2 +-
.../pages/settings/security/impersonation.tsx | 12 ++--------
apps/web/pages/settings/security/password.tsx | 3 ++-
.../settings/security/two-factor-auth.tsx | 11 ++-------
.../settings/teams/[id]/onboard-members.tsx | 3 ++-
apps/web/pages/settings/teams/new/index.tsx | 3 ++-
.../features/ee/sso/page/teams-sso-view.tsx | 5 ++--
.../features/ee/sso/page/user-sso-view.tsx | 2 +-
.../ee/teams/pages/team-appearance-view.tsx | 4 +++-
.../ee/teams/pages/team-billing-view.tsx | 4 +++-
.../ee/teams/pages/team-listing-view.tsx | 3 ++-
.../ee/teams/pages/team-members-view.tsx | 3 ++-
.../ee/teams/pages/team-profile-view.tsx | 3 ++-
.../settings}/layouts/SettingsLayout.tsx | 23 +++++++++++--------
.../webhooks/pages/webhook-edit-view.tsx | 3 ++-
.../webhooks/pages/webhook-new-view.tsx | 3 ++-
.../features/webhooks/pages/webhooks-view.tsx | 3 ++-
packages/ui/index.tsx | 20 ++++++++++------
35 files changed, 95 insertions(+), 78 deletions(-)
rename {packages/ui/v2/core => apps/web/components/apps}/layouts/AppsLayout.tsx (88%)
rename {packages/ui/v2/core => apps/web/components/apps}/layouts/InstalledAppsLayout.tsx (87%)
rename {packages/ui/v2/core => apps/web/components/auth}/layouts/AdminLayout.tsx (88%)
rename {packages/ui/v2/core => apps/web/components}/layouts/WizardLayout.tsx (97%)
create mode 100644 apps/web/components/layouts/_README.md
rename packages/{ui/v2/core => features/settings}/layouts/SettingsLayout.tsx (96%)
diff --git a/packages/ui/v2/core/layouts/AppsLayout.tsx b/apps/web/components/apps/layouts/AppsLayout.tsx
similarity index 88%
rename from packages/ui/v2/core/layouts/AppsLayout.tsx
rename to apps/web/components/apps/layouts/AppsLayout.tsx
index 9101a5b992..b02dde62ba 100644
--- a/packages/ui/v2/core/layouts/AppsLayout.tsx
+++ b/apps/web/components/apps/layouts/AppsLayout.tsx
@@ -3,11 +3,7 @@ import { useRouter } from "next/router";
import React, { ComponentProps } from "react";
import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { EmptyScreen, Icon } from "@calcom/ui";
-
-import Shell from "../Shell";
-import type { HorizontalTabItemProps } from "../navigation/tabs/HorizontalTabItem";
-import HorizontalTabs from "../navigation/tabs/HorizontalTabs";
+import { EmptyScreen, Icon, Shell, HorizontalTabs, HorizontalTabItemProps } from "@calcom/ui";
const tabs: HorizontalTabItemProps[] = [
{
diff --git a/packages/ui/v2/core/layouts/InstalledAppsLayout.tsx b/apps/web/components/apps/layouts/InstalledAppsLayout.tsx
similarity index 87%
rename from packages/ui/v2/core/layouts/InstalledAppsLayout.tsx
rename to apps/web/components/apps/layouts/InstalledAppsLayout.tsx
index a485acf620..e7f22aa1d5 100644
--- a/packages/ui/v2/core/layouts/InstalledAppsLayout.tsx
+++ b/apps/web/components/apps/layouts/InstalledAppsLayout.tsx
@@ -3,11 +3,9 @@ import React, { ComponentProps } from "react";
import AppCategoryNavigation from "@calcom/app-store/_components/AppCategoryNavigation";
import { InstalledAppVariants } from "@calcom/app-store/utils";
import { trpc } from "@calcom/trpc/react";
-
-import { Icon } from "../../../components/icon";
-import Shell from "../Shell";
-import type { HorizontalTabItemProps } from "../navigation/tabs/HorizontalTabItem";
-import type { VerticalTabItemProps } from "../navigation/tabs/VerticalTabItem";
+import { Icon, Shell } from "@calcom/ui";
+import type { HorizontalTabItemProps } from "@calcom/ui/v2/core/navigation/tabs/HorizontalTabItem";
+import type { VerticalTabItemProps } from "@calcom/ui/v2/core/navigation/tabs/VerticalTabItem";
const tabs: (VerticalTabItemProps | HorizontalTabItemProps)[] = [
{
diff --git a/packages/ui/v2/core/layouts/AdminLayout.tsx b/apps/web/components/auth/layouts/AdminLayout.tsx
similarity index 88%
rename from packages/ui/v2/core/layouts/AdminLayout.tsx
rename to apps/web/components/auth/layouts/AdminLayout.tsx
index 3a4b55dec7..65b2838878 100644
--- a/packages/ui/v2/core/layouts/AdminLayout.tsx
+++ b/apps/web/components/auth/layouts/AdminLayout.tsx
@@ -2,9 +2,9 @@ import { useSession } from "next-auth/react";
import { useRouter } from "next/router";
import React, { ComponentProps, useEffect } from "react";
-import { ErrorBoundary } from "../../..";
-import Shell from "../Shell";
-import SettingsLayout from "./SettingsLayout";
+import SettingsLayout from "@calcom/features/settings/layouts/SettingsLayout";
+import { ErrorBoundary, Shell } from "@calcom/ui";
+
import { UserPermissionRole } from ".prisma/client";
export default function AdminLayout({
diff --git a/packages/ui/v2/core/layouts/WizardLayout.tsx b/apps/web/components/layouts/WizardLayout.tsx
similarity index 97%
rename from packages/ui/v2/core/layouts/WizardLayout.tsx
rename to apps/web/components/layouts/WizardLayout.tsx
index 08e17bb690..58af085b29 100644
--- a/packages/ui/v2/core/layouts/WizardLayout.tsx
+++ b/apps/web/components/layouts/WizardLayout.tsx
@@ -3,7 +3,7 @@ import { useRouter } from "next/router";
import React, { useEffect, useState } from "react";
import { Toaster } from "react-hot-toast";
-import { StepCard, Steps } from "../../..";
+import { StepCard, Steps } from "@calcom/ui";
export default function WizardLayout({
children,
diff --git a/apps/web/components/layouts/_README.md b/apps/web/components/layouts/_README.md
new file mode 100644
index 0000000000..2291c3d14b
--- /dev/null
+++ b/apps/web/components/layouts/_README.md
@@ -0,0 +1,4 @@
+We don't have many layouts currently however, if they are relevant to a features - please put them in their relvant component folder
+in `web/components` if you believe they will be reused in other apps please place them in `packages/features/[feature]`
+
+Thanks Sean 🔥
diff --git a/apps/web/pages/apps/index.tsx b/apps/web/pages/apps/index.tsx
index 8022d525c0..9eff1e9336 100644
--- a/apps/web/pages/apps/index.tsx
+++ b/apps/web/pages/apps/index.tsx
@@ -7,7 +7,9 @@ import { getSession } from "@calcom/lib/auth";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import type { AppCategories } from "@calcom/prisma/client";
import { inferSSRProps } from "@calcom/types/inferSSRProps";
-import { AllApps, AppsLayout, AppStoreCategories, Icon, TextField, TrendingAppsSlider } from "@calcom/ui";
+import { AllApps, AppStoreCategories, Icon, TextField, TrendingAppsSlider } from "@calcom/ui";
+
+import AppsLayout from "@components/apps/layouts/AppsLayout";
import { ssgInit } from "@server/lib/ssg";
diff --git a/apps/web/pages/apps/installed/[category].tsx b/apps/web/pages/apps/installed/[category].tsx
index a6f6647c64..eb4be4f40e 100644
--- a/apps/web/pages/apps/installed/[category].tsx
+++ b/apps/web/pages/apps/installed/[category].tsx
@@ -14,7 +14,6 @@ import {
Button,
EmptyScreen,
Icon,
- InstalledAppsLayout,
List,
ShellSubHeading,
AppSkeletonLoader as SkeletonLoader,
@@ -24,6 +23,7 @@ import { QueryCell } from "@lib/QueryCell";
import { CalendarListContainer } from "@components/apps/CalendarListContainer";
import IntegrationListItem from "@components/apps/IntegrationListItem";
+import InstalledAppsLayout from "@components/apps/layouts/InstalledAppsLayout";
function ConnectOrDisconnectIntegrationButton(props: {
credentialIds: number[];
@@ -32,7 +32,7 @@ function ConnectOrDisconnectIntegrationButton(props: {
installed?: boolean;
invalidCredentialIds?: number[];
}) {
- const { type, credentialIds, isGlobal, installed, invalidCredentialIds } = props;
+ const { type, credentialIds, isGlobal, installed } = props;
const { t } = useLocale();
const [credentialId] = credentialIds;
diff --git a/apps/web/pages/settings/admin/apps/[category].tsx b/apps/web/pages/settings/admin/apps/[category].tsx
index bd4c9bde1a..f2ed6c9943 100644
--- a/apps/web/pages/settings/admin/apps/[category].tsx
+++ b/apps/web/pages/settings/admin/apps/[category].tsx
@@ -2,7 +2,9 @@ import { GetServerSidePropsContext } from "next";
import AdminAppsList from "@calcom/features/apps/AdminAppsList";
import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { getAdminLayout as getLayout, Meta } from "@calcom/ui";
+import { Meta } from "@calcom/ui";
+
+import { getLayout } from "@components/auth/layouts/AdminLayout";
import { ssrInit } from "@server/lib/ssr";
diff --git a/apps/web/pages/settings/admin/impersonation.tsx b/apps/web/pages/settings/admin/impersonation.tsx
index d7f0835dac..dacdbfa948 100644
--- a/apps/web/pages/settings/admin/impersonation.tsx
+++ b/apps/web/pages/settings/admin/impersonation.tsx
@@ -3,7 +3,9 @@ import { signIn } from "next-auth/react";
import { useRef } from "react";
import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Button, getAdminLayout as getLayout, Meta, TextField } from "@calcom/ui";
+import { Button, Meta, TextField } from "@calcom/ui";
+
+import { getLayout } from "@components/auth/layouts/AdminLayout";
import { ssrInit } from "@server/lib/ssr";
diff --git a/apps/web/pages/settings/admin/index.tsx b/apps/web/pages/settings/admin/index.tsx
index 07244d5615..83cd7f53c0 100644
--- a/apps/web/pages/settings/admin/index.tsx
+++ b/apps/web/pages/settings/admin/index.tsx
@@ -1,6 +1,8 @@
import { GetServerSidePropsContext } from "next";
-import { getAdminLayout as getLayout, Meta } from "@calcom/ui";
+import { Meta } from "@calcom/ui";
+
+import { getLayout } from "@components/auth/layouts/AdminLayout";
import { ssrInit } from "@server/lib/ssr";
diff --git a/apps/web/pages/settings/admin/users.tsx b/apps/web/pages/settings/admin/users.tsx
index 921b02dbb7..8df71ae46d 100644
--- a/apps/web/pages/settings/admin/users.tsx
+++ b/apps/web/pages/settings/admin/users.tsx
@@ -1,7 +1,9 @@
import { GetServerSidePropsContext } from "next";
import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { getAdminLayout as getLayout, Meta } from "@calcom/ui";
+import { Meta } from "@calcom/ui";
+
+import { getLayout } from "@components/auth/layouts/AdminLayout";
import { ssrInit } from "@server/lib/ssr";
diff --git a/apps/web/pages/settings/billing/index.tsx b/apps/web/pages/settings/billing/index.tsx
index 9f0f977777..4e8ea2a65b 100644
--- a/apps/web/pages/settings/billing/index.tsx
+++ b/apps/web/pages/settings/billing/index.tsx
@@ -3,11 +3,12 @@ import { useRouter } from "next/router";
import { useState } from "react";
import { HelpScout, useChat } from "react-live-chat-loader";
+import { getLayout } from "@calcom/features/settings/layouts/SettingsLayout";
import { classNames } from "@calcom/lib";
import { WEBAPP_URL } from "@calcom/lib/constants";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
-import { Button, getSettingsLayout as getLayout, Icon, Meta } from "@calcom/ui";
+import { Button, Icon, Meta } from "@calcom/ui";
import { ssrInit } from "@server/lib/ssr";
diff --git a/apps/web/pages/settings/developer/api-keys.tsx b/apps/web/pages/settings/developer/api-keys.tsx
index a939ea2a4a..7576882151 100644
--- a/apps/web/pages/settings/developer/api-keys.tsx
+++ b/apps/web/pages/settings/developer/api-keys.tsx
@@ -5,6 +5,7 @@ import { TApiKeys } from "@calcom/ee/api-keys/components/ApiKeyListItem";
import LicenseRequired from "@calcom/ee/common/components/v2/LicenseRequired";
import ApiKeyDialogForm from "@calcom/features/ee/api-keys/components/ApiKeyDialogForm";
import ApiKeyListItem from "@calcom/features/ee/api-keys/components/ApiKeyListItem";
+import { getLayout } from "@calcom/features/settings/layouts/SettingsLayout";
import { APP_NAME } from "@calcom/lib/constants";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
@@ -13,7 +14,6 @@ import {
Dialog,
DialogContent,
EmptyScreen,
- getSettingsLayout as getLayout,
Icon,
Meta,
AppSkeletonLoader as SkeletonLoader,
diff --git a/apps/web/pages/settings/my-account/appearance.tsx b/apps/web/pages/settings/my-account/appearance.tsx
index 3ccd1c9976..6fce4901f4 100644
--- a/apps/web/pages/settings/my-account/appearance.tsx
+++ b/apps/web/pages/settings/my-account/appearance.tsx
@@ -2,6 +2,7 @@ import { GetServerSidePropsContext } from "next";
import { useSession } from "next-auth/react";
import { Controller, useForm } from "react-hook-form";
+import { getLayout } from "@calcom/features/settings/layouts/SettingsLayout";
import { APP_NAME } from "@calcom/lib/constants";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
@@ -10,7 +11,6 @@ import {
Button,
ColorPicker,
Form,
- getSettingsLayout as getLayout,
Meta,
showToast,
SkeletonButton,
diff --git a/apps/web/pages/settings/my-account/calendars.tsx b/apps/web/pages/settings/my-account/calendars.tsx
index be9ce7ae2d..e1088c8250 100644
--- a/apps/web/pages/settings/my-account/calendars.tsx
+++ b/apps/web/pages/settings/my-account/calendars.tsx
@@ -6,6 +6,7 @@ import { Fragment } from "react";
import DisconnectIntegration from "@calcom/features/apps/components/DisconnectIntegration";
import DestinationCalendarSelector from "@calcom/features/calendars/DestinationCalendarSelector";
+import { getLayout } from "@calcom/features/settings/layouts/SettingsLayout";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
import {
@@ -13,7 +14,6 @@ import {
Badge,
Button,
EmptyScreen,
- getSettingsLayout as getLayout,
Icon,
List,
ListItem,
diff --git a/apps/web/pages/settings/my-account/conferencing.tsx b/apps/web/pages/settings/my-account/conferencing.tsx
index 54304c614d..cd0ef80ef2 100644
--- a/apps/web/pages/settings/my-account/conferencing.tsx
+++ b/apps/web/pages/settings/my-account/conferencing.tsx
@@ -1,6 +1,7 @@
import { GetServerSidePropsContext } from "next";
import { useState } from "react";
+import { getLayout } from "@calcom/features/settings/layouts/SettingsLayout";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
import {
@@ -13,7 +14,6 @@ import {
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
- getSettingsLayout as getLayout,
Icon,
List,
ListItem,
diff --git a/apps/web/pages/settings/my-account/general.tsx b/apps/web/pages/settings/my-account/general.tsx
index efc5c92bc4..56475dbf31 100644
--- a/apps/web/pages/settings/my-account/general.tsx
+++ b/apps/web/pages/settings/my-account/general.tsx
@@ -3,12 +3,12 @@ import { useRouter } from "next/router";
import { useMemo } from "react";
import { Controller, useForm } from "react-hook-form";
+import { getLayout } from "@calcom/features/settings/layouts/SettingsLayout";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { RouterOutputs, trpc } from "@calcom/trpc/react";
import {
Button,
Form,
- getSettingsLayout as getLayout,
Label,
Meta,
Select,
diff --git a/apps/web/pages/settings/my-account/profile.tsx b/apps/web/pages/settings/my-account/profile.tsx
index 1a50147cdb..4585c34351 100644
--- a/apps/web/pages/settings/my-account/profile.tsx
+++ b/apps/web/pages/settings/my-account/profile.tsx
@@ -5,6 +5,7 @@ import { signOut } from "next-auth/react";
import { BaseSyntheticEvent, useRef, useState } from "react";
import { Controller, useForm } from "react-hook-form";
+import { getLayout } from "@calcom/features/settings/layouts/SettingsLayout";
import { ErrorCode } from "@calcom/lib/auth";
import { APP_NAME } from "@calcom/lib/constants";
import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -21,7 +22,6 @@ import {
DialogFooter,
DialogTrigger,
Form,
- getSettingsLayout as getLayout,
Icon,
ImageUploader,
Label,
diff --git a/apps/web/pages/settings/security/impersonation.tsx b/apps/web/pages/settings/security/impersonation.tsx
index 4ef5f00b07..cea19bbd20 100644
--- a/apps/web/pages/settings/security/impersonation.tsx
+++ b/apps/web/pages/settings/security/impersonation.tsx
@@ -1,18 +1,10 @@
import { GetServerSidePropsContext } from "next";
import { useForm } from "react-hook-form";
+import { getLayout } from "@calcom/features/settings/layouts/SettingsLayout";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
-import {
- Button,
- Form,
- getSettingsLayout as getLayout,
- Label,
- Meta,
- showToast,
- Skeleton,
- Switch,
-} from "@calcom/ui";
+import { Button, Form, Label, Meta, showToast, Skeleton, Switch } from "@calcom/ui";
import { ssrInit } from "@server/lib/ssr";
diff --git a/apps/web/pages/settings/security/password.tsx b/apps/web/pages/settings/security/password.tsx
index a56b05d6d4..44ea30df2c 100644
--- a/apps/web/pages/settings/security/password.tsx
+++ b/apps/web/pages/settings/security/password.tsx
@@ -3,10 +3,11 @@ import { GetServerSidePropsContext } from "next";
import { Trans } from "next-i18next";
import { useForm } from "react-hook-form";
+import { getLayout } from "@calcom/features/settings/layouts/SettingsLayout";
import { identityProviderNameMap } from "@calcom/lib/auth";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
-import { Button, Form, getSettingsLayout as getLayout, Meta, PasswordField, showToast } from "@calcom/ui";
+import { Button, Form, Meta, PasswordField, showToast } from "@calcom/ui";
import { ssrInit } from "@server/lib/ssr";
diff --git a/apps/web/pages/settings/security/two-factor-auth.tsx b/apps/web/pages/settings/security/two-factor-auth.tsx
index 277f7f19de..33795f82f1 100644
--- a/apps/web/pages/settings/security/two-factor-auth.tsx
+++ b/apps/web/pages/settings/security/two-factor-auth.tsx
@@ -1,17 +1,10 @@
import { GetServerSidePropsContext } from "next";
import { useState } from "react";
+import { getLayout } from "@calcom/features/settings/layouts/SettingsLayout";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
-import {
- Badge,
- getSettingsLayout as getLayout,
- Meta,
- Switch,
- SkeletonButton,
- SkeletonContainer,
- SkeletonText,
-} from "@calcom/ui";
+import { Badge, Meta, Switch, SkeletonButton, SkeletonContainer, SkeletonText } from "@calcom/ui";
import DisableTwoFactorModal from "@components/settings/DisableTwoFactorModal";
import EnableTwoFactorModal from "@components/settings/EnableTwoFactorModal";
diff --git a/apps/web/pages/settings/teams/[id]/onboard-members.tsx b/apps/web/pages/settings/teams/[id]/onboard-members.tsx
index 6b7213f886..4703b6bad7 100644
--- a/apps/web/pages/settings/teams/[id]/onboard-members.tsx
+++ b/apps/web/pages/settings/teams/[id]/onboard-members.tsx
@@ -2,7 +2,8 @@ import Head from "next/head";
import AddNewTeamMembers from "@calcom/features/ee/teams/components/AddNewTeamMembers";
import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { WizardLayout } from "@calcom/ui";
+
+import WizardLayout from "@components/layouts/WizardLayout";
const OnboardTeamMembersPage = () => {
const { t } = useLocale();
diff --git a/apps/web/pages/settings/teams/new/index.tsx b/apps/web/pages/settings/teams/new/index.tsx
index e0d9aa8a47..85a8039937 100644
--- a/apps/web/pages/settings/teams/new/index.tsx
+++ b/apps/web/pages/settings/teams/new/index.tsx
@@ -3,7 +3,8 @@ import Head from "next/head";
import { CreateANewTeamForm } from "@calcom/features/ee/teams/components";
import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { getWizardLayout as getLayout } from "@calcom/ui";
+
+import { getLayout } from "@components/layouts/WizardLayout";
import { ssrInit } from "@server/lib/ssr";
diff --git a/packages/features/ee/sso/page/teams-sso-view.tsx b/packages/features/ee/sso/page/teams-sso-view.tsx
index e218b9a142..29412bef5d 100644
--- a/packages/features/ee/sso/page/teams-sso-view.tsx
+++ b/packages/features/ee/sso/page/teams-sso-view.tsx
@@ -2,8 +2,9 @@ import { useRouter } from "next/router";
import { HOSTED_CAL_FEATURES } from "@calcom/lib/constants";
import { trpc } from "@calcom/trpc/react";
-import { getSettingsLayout as getLayout, AppSkeletonLoader } from "@calcom/ui";
+import { AppSkeletonLoader as SkeletonLoader } from "@calcom/ui";
+import { getLayout } from "../../../settings/layouts/SettingsLayout";
import SAMLConfiguration from "../components/SAMLConfiguration";
const SAMLSSO = () => {
@@ -25,7 +26,7 @@ const SAMLSSO = () => {
);
if (isLoading) {
- return ;
+ return ;
}
if (!team) {
diff --git a/packages/features/ee/sso/page/user-sso-view.tsx b/packages/features/ee/sso/page/user-sso-view.tsx
index ce96edeb58..ca5794af8a 100644
--- a/packages/features/ee/sso/page/user-sso-view.tsx
+++ b/packages/features/ee/sso/page/user-sso-view.tsx
@@ -1,8 +1,8 @@
import { useRouter } from "next/router";
import { HOSTED_CAL_FEATURES } from "@calcom/lib/constants";
-import { getSettingsLayout as getLayout } from "@calcom/ui";
+import { getLayout } from "../../../settings/layouts/SettingsLayout";
import SAMLConfiguration from "../components/SAMLConfiguration";
const SAMLSSO = () => {
diff --git a/packages/features/ee/teams/pages/team-appearance-view.tsx b/packages/features/ee/teams/pages/team-appearance-view.tsx
index 5de3db0ffd..6a8faf4286 100644
--- a/packages/features/ee/teams/pages/team-appearance-view.tsx
+++ b/packages/features/ee/teams/pages/team-appearance-view.tsx
@@ -5,7 +5,9 @@ import { Controller, useForm } from "react-hook-form";
import { APP_NAME } from "@calcom/lib/constants";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
-import { Button, Form, getSettingsLayout as getLayout, Meta, showToast, Switch } from "@calcom/ui";
+import { Button, Form, Meta, showToast, Switch } from "@calcom/ui";
+
+import { getLayout } from "../../../settings/layouts/SettingsLayout";
interface TeamAppearanceValues {
hideBranding: boolean;
diff --git a/packages/features/ee/teams/pages/team-billing-view.tsx b/packages/features/ee/teams/pages/team-billing-view.tsx
index e9e4d1e420..31f31c29cc 100644
--- a/packages/features/ee/teams/pages/team-billing-view.tsx
+++ b/packages/features/ee/teams/pages/team-billing-view.tsx
@@ -2,7 +2,9 @@ import { useRouter } from "next/router";
import { WEBAPP_URL } from "@calcom/lib/constants";
import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Button, getSettingsLayout as getLayout, Icon, Meta } from "@calcom/ui";
+import { Button, Icon, Meta } from "@calcom/ui";
+
+import { getLayout } from "../../../settings/layouts/SettingsLayout";
const BillingView = () => {
const { t } = useLocale();
diff --git a/packages/features/ee/teams/pages/team-listing-view.tsx b/packages/features/ee/teams/pages/team-listing-view.tsx
index 3578ec4fc2..0e7b2a74e3 100644
--- a/packages/features/ee/teams/pages/team-listing-view.tsx
+++ b/packages/features/ee/teams/pages/team-listing-view.tsx
@@ -1,6 +1,7 @@
import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { getSettingsLayout as getLayout, Meta } from "@calcom/ui";
+import { Meta } from "@calcom/ui";
+import { getLayout } from "../../../settings/layouts/SettingsLayout";
import { TeamsListing } from "../components";
const BillingView = () => {
diff --git a/packages/features/ee/teams/pages/team-members-view.tsx b/packages/features/ee/teams/pages/team-members-view.tsx
index 83342a2175..b3f305f139 100644
--- a/packages/features/ee/teams/pages/team-members-view.tsx
+++ b/packages/features/ee/teams/pages/team-members-view.tsx
@@ -5,8 +5,9 @@ import { useState } from "react";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
-import { Button, getSettingsLayout as getLayout, Icon, Meta, showToast } from "@calcom/ui";
+import { Button, Icon, Meta, showToast } from "@calcom/ui";
+import { getLayout } from "../../../settings/layouts/SettingsLayout";
import DisableTeamImpersonation from "../components/DisableTeamImpersonation";
import MemberInvitationModal from "../components/MemberInvitationModal";
import MemberListItem from "../components/MemberListItem";
diff --git a/packages/features/ee/teams/pages/team-profile-view.tsx b/packages/features/ee/teams/pages/team-profile-view.tsx
index f7ab47cc3c..cef0bdb33c 100644
--- a/packages/features/ee/teams/pages/team-profile-view.tsx
+++ b/packages/features/ee/teams/pages/team-profile-view.tsx
@@ -19,7 +19,6 @@ import {
Dialog,
DialogTrigger,
Form,
- getSettingsLayout as getLayout,
Icon,
ImageUploader,
Label,
@@ -30,6 +29,8 @@ import {
TextField,
} from "@calcom/ui";
+import { getLayout } from "../../../settings/layouts/SettingsLayout";
+
const regex = new RegExp("^[a-zA-Z0-9-]*$");
const teamProfileFormSchema = z.object({
diff --git a/packages/ui/v2/core/layouts/SettingsLayout.tsx b/packages/features/settings/layouts/SettingsLayout.tsx
similarity index 96%
rename from packages/ui/v2/core/layouts/SettingsLayout.tsx
rename to packages/features/settings/layouts/SettingsLayout.tsx
index 323c03fa0b..49a3566cf8 100644
--- a/packages/ui/v2/core/layouts/SettingsLayout.tsx
+++ b/packages/features/settings/layouts/SettingsLayout.tsx
@@ -10,14 +10,17 @@ import { HOSTED_CAL_FEATURES, WEBAPP_URL } from "@calcom/lib/constants";
import { getPlaceholderAvatar } from "@calcom/lib/defaultAvatarImage";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
-import { Skeleton } from "@calcom/ui";
-
-import { Badge, Button, ErrorBoundary } from "../../..";
-import { Icon } from "../../../components/icon";
-import { useMeta } from "../Meta";
-import Shell from "../Shell";
-import { VerticalTabItemProps } from "../navigation/tabs/VerticalTabItem";
-import { VerticalTabItem } from "../navigation/tabs/VerticalTabs";
+import {
+ Badge,
+ Button,
+ ErrorBoundary,
+ Icon,
+ VerticalTabItemProps,
+ VerticalTabItem,
+ Shell,
+ Skeleton,
+ useMeta,
+} from "@calcom/ui";
const tabs: VerticalTabItemProps[] = [
{
@@ -164,10 +167,10 @@ const SettingsSidebarContainer = ({
return (