Replace AdminLayout with SettingsLayout (#4311)

* Replace AdminLayout with SettingsLayout

* Revert "Replace AdminLayout with SettingsLayout"

This reverts commit cc30ddcb6aa7a61157d53e46d60054f1cc565796.

* Revert to changes

* Add back changes

* Few nits + translate language to each local language

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
Co-authored-by: Alex van Andel <me@alexvanandel.com>

apps/web/pages/v2/settings/my-account/appearance.tsx

@@ -12,7 +12,7 @@ import Switch from "@calcom/ui/v2/core/Switch";
 import ColorPicker from "@calcom/ui/v2/core/colorpicker";
 import Select from "@calcom/ui/v2/core/form/Select";
 import { Form } from "@calcom/ui/v2/core/form/fields";
-import { getLayout } from "@calcom/ui/v2/core/layouts/AdminLayout";
+import { getLayout } from "@calcom/ui/v2/core/layouts/SettingsLayout";
 import showToast from "@calcom/ui/v2/core/notifications";
 
 import { getSession } from "@lib/auth";

apps/web/pages/v2/settings/my-account/calendars.tsx

@@ -1,14 +1,16 @@
 import { Trans } from "next-i18next";
 import Link from "next/link";
+import { useRouter } from "next/router";
 import { Fragment } from "react";
 
+import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import { Icon } from "@calcom/ui";
 import Badge from "@calcom/ui/v2/core/Badge";
 import EmptyScreen from "@calcom/ui/v2/core/EmptyScreen";
 import Meta from "@calcom/ui/v2/core/Meta";
-import { getLayout } from "@calcom/ui/v2/core/layouts/AdminLayout";
+import { getLayout } from "@calcom/ui/v2/core/layouts/SettingsLayout";
 import { List, ListItem, ListItemText, ListItemTitle } from "@calcom/ui/v2/modules/List";
 import DestinationCalendarSelector from "@calcom/ui/v2/modules/event-types/DestinationCalendarSelector";
 import DisconnectIntegration from "@calcom/ui/v2/modules/integrations/DisconnectIntegration";
@@ -19,6 +21,7 @@ import { CalendarSwitch } from "@components/v2/settings/CalendarSwitch";
 
 const CalendarsView = () => {
   const { t } = useLocale();
+  const router = useRouter();
 
   const utils = trpc.useContext();
 
@@ -120,7 +123,7 @@ const CalendarsView = () => {
               headline="No calendar installed"
               description="You have not yet connected any of your calendars"
               buttonText="Add a calendar"
-              buttonOnClick={() => console.log("Button Clicked")}
+              buttonOnClick={() => router.push(`${WEBAPP_URL}/apps/categories/calendar`)}
             />
           );
         }}

apps/web/pages/v2/settings/my-account/conferencing.tsx

@@ -1,6 +1,7 @@
 import { GetServerSidePropsContext } from "next";
 
 import getApps from "@calcom/app-store/utils";
+import { getSession } from "@calcom/lib/auth";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import prisma from "@calcom/prisma";
 import { Icon } from "@calcom/ui";
@@ -10,10 +11,10 @@ import Dropdown, {
   DropdownMenuTrigger,
 } from "@calcom/ui/v2/core/Dropdown";
 import Meta from "@calcom/ui/v2/core/Meta";
-import { getLayout } from "@calcom/ui/v2/core/layouts/AdminLayout";
+import { getLayout } from "@calcom/ui/v2/core/layouts/SettingsLayout";
+import { List, ListItem, ListItemText, ListItemTitle } from "@calcom/ui/v2/modules/List";
 import DisconnectIntegration from "@calcom/ui/v2/modules/integrations/DisconnectIntegration";
 
-import { getSession } from "@lib/auth";
 import { inferSSRProps } from "@lib/types/inferSSRProps";
 
 const ConferencingLayout = (props: inferSSRProps<typeof getServerSideProps>) => {
@@ -27,36 +28,69 @@ const ConferencingLayout = (props: inferSSRProps<typeof getServerSideProps>) =>
   // });
 
   return (
-    <div className="w-40 rounded-md border border-neutral-200 bg-white sm:mx-0 md:w-96 xl:mt-0">
+    <div className="w-full bg-white sm:mx-0 xl:mt-0">
       <Meta title="conferencing" description="conferencing_description" />
-      {apps.map((app) => (
-        <div
-          key={app.title}
-          className="flex flex-1 items-center space-x-3 border-b  py-5 px-4 rtl:space-x-reverse">
-          <img className="h-10 w-10" src={app.logo} alt={app.title} />
+      <List>
+        {apps.map((app) => (
+          <ListItem className="flex-col border-0" key={app.title}>
+            <div className="flex w-full flex-1 items-center space-x-3 pb-5 pl-1 pt-1 rtl:space-x-reverse">
+              {
+                // eslint-disable-next-line @next/next/no-img-element
+                app.logo && <img className="h-10 w-10" src={app.logo} alt={app.title} />
+              }
+              <div className="flex-grow truncate pl-2">
+                <ListItemTitle component="h3" className="mb-1 space-x-2">
+                  <h3 className="truncate text-sm font-medium text-neutral-900">{app.title}</h3>
+                </ListItemTitle>
+                <ListItemText component="p">{app.description}</ListItemText>
+              </div>
+              <div>
+                <Dropdown>
+                  <DropdownMenuTrigger className="focus:ring-brand-900 block h-[36px] w-auto justify-center  rounded-md border border-gray-200 bg-transparent text-gray-700 focus:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-1">
+                    <Icon.FiMoreHorizontal className="group-hover:text-gray-800" />
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent>
+                    <DropdownMenuItem>
+                      <DisconnectIntegration
+                        credentialId={app.credentialId}
+                        label={t("remove_app")}
+                        trashIcon
+                        isGlobal={app.isGlobal}
+                      />
+                    </DropdownMenuItem>
+                  </DropdownMenuContent>
+                </Dropdown>
+              </div>
+              {/* <div className="flex w-1/2 space-x-6">
+                <img className="h-10 w-10" src={app.logo} alt={app.title} />
 
-          <div className="truncate pl-2">
-            <h3 className="truncate text-sm font-medium text-neutral-900">{app.title}</h3>
-            <p className="truncate text-sm text-gray-500">{app.description}</p>
-          </div>
+                <div className=" truncate pl-2">
+                  <h3 className="truncate text-sm font-medium text-neutral-900">{app.title}</h3>
+                  <p className="truncate text-sm text-gray-500">{app.description}</p>
+                </div>
+              </div>
 
-          <Dropdown>
-            <DropdownMenuTrigger className="focus:ring-brand-900 block h-[36px] w-auto justify-center  rounded-md border border-gray-200 bg-transparent text-gray-700 focus:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-1">
-              <Icon.FiMoreHorizontal className="group-hover:text-gray-800" />
-            </DropdownMenuTrigger>
-            <DropdownMenuContent>
-              <DropdownMenuItem>
-                <DisconnectIntegration
-                  credentialId={app.credentialId}
-                  label={t("remove_app")}
-                  trashIcon
-                  isGlobal={app.isGlobal}
-                />
-              </DropdownMenuItem>
-            </DropdownMenuContent>
-          </Dropdown>
-        </div>
-      ))}
+              <div>
+                <Dropdown>
+                  <DropdownMenuTrigger className="focus:ring-brand-900 block h-[36px] w-auto justify-center  rounded-md border border-gray-200 bg-transparent text-gray-700 focus:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-1">
+                    <Icon.FiMoreHorizontal className="group-hover:text-gray-800" />
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent>
+                    <DropdownMenuItem>
+                      <DisconnectIntegration
+                        credentialId={app.credentialId}
+                        label={t("remove_app")}
+                        trashIcon
+                        isGlobal={app.isGlobal}
+                      />
+                    </DropdownMenuItem>
+                  </DropdownMenuContent>
+                </Dropdown>
+              </div> */}
+            </div>
+          </ListItem>
+        ))}
+      </List>
     </div>
   );
 };

apps/web/pages/v2/settings/my-account/general.tsx

@@ -12,7 +12,7 @@ import Meta from "@calcom/ui/v2/core/Meta";
 import TimezoneSelect from "@calcom/ui/v2/core/TimezoneSelect";
 import Select from "@calcom/ui/v2/core/form/Select";
 import { Form, Label } from "@calcom/ui/v2/core/form/fields";
-import { getLayout } from "@calcom/ui/v2/core/layouts/AdminLayout";
+import { getLayout } from "@calcom/ui/v2/core/layouts/SettingsLayout";
 import showToast from "@calcom/ui/v2/core/notifications";
 
 import { withQuery } from "@lib/QueryCell";
@@ -54,9 +54,9 @@ const GeneralView = ({ localeProp, t, user }: GeneralViewProps) => {
   const localeOptions = useMemo(() => {
     return (router.locales || []).map((locale) => ({
       value: locale,
-      label: new Intl.DisplayNames(localeProp, { type: "language" }).of(locale) || "",
+      label: new Intl.DisplayNames(locale, { type: "language" }).of(locale) || "",
     }));
-  }, [localeProp, router.locales]);
+  }, [router.locales]);
 
   const timeFormatOptions = [
     { value: 12, label: t("12_hour") },
@@ -105,18 +105,16 @@ const GeneralView = ({ localeProp, t, user }: GeneralViewProps) => {
       <Meta title="general" description="general_description" />
       <Controller
         name="locale"
-        control={formMethods.control}
-        render={({ field: { value } }) => (
+        render={({ field: { value, onChange } }) => (
           <>
-            <Label className="mt-8 text-gray-900">
+            <Label className="text-gray-900">
               <>{t("language")}</>
             </Label>
-            <Select
+            <Select<{ label: string; value: string }>
+              className="capitalize"
               options={localeOptions}
               value={value}
-              onChange={(event) => {
-                if (event) formMethods.setValue("locale", { ...event });
-              }}
+              onChange={onChange}
             />
           </>
         )}

apps/web/pages/v2/settings/my-account/profile.tsx

@@ -17,7 +17,7 @@ import { Button } from "@calcom/ui/v2/core/Button";
 import { Dialog, DialogContent, DialogTrigger } from "@calcom/ui/v2/core/Dialog";
 import Meta from "@calcom/ui/v2/core/Meta";
 import { Form, Label, TextField, PasswordField } from "@calcom/ui/v2/core/form/fields";
-import { getLayout } from "@calcom/ui/v2/core/layouts/AdminLayout";
+import { getLayout } from "@calcom/ui/v2/core/layouts/SettingsLayout";
 import showToast from "@calcom/ui/v2/core/notifications";
 
 import { inferSSRProps } from "@lib/types/inferSSRProps";
@@ -95,6 +95,7 @@ const ProfileView = (props: inferSSRProps<typeof getServerSideProps>) => {
     },
   });
 
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   const passwordRef = useRef<HTMLInputElement>(null!);
 
   const errorMessages: { [key: string]: string } = {

apps/web/pages/v2/settings/security/password.tsx

@@ -8,7 +8,7 @@ import { trpc } from "@calcom/trpc/react";
 import { Button } from "@calcom/ui/v2/core/Button";
 import Meta from "@calcom/ui/v2/core/Meta";
 import { Form, TextField } from "@calcom/ui/v2/core/form/fields";
-import { getLayout } from "@calcom/ui/v2/core/layouts/AdminLayout";
+import { getLayout } from "@calcom/ui/v2/core/layouts/SettingsLayout";
 import showToast from "@calcom/ui/v2/core/notifications";
 
 const PasswordView = () => {

apps/web/pages/v2/settings/security/two-factor-auth.tsx

@@ -6,7 +6,7 @@ import Badge from "@calcom/ui/v2/core/Badge";
 import Loader from "@calcom/ui/v2/core/Loader";
 import Meta from "@calcom/ui/v2/core/Meta";
 import Switch from "@calcom/ui/v2/core/Switch";
-import { getLayout } from "@calcom/ui/v2/core/layouts/AdminLayout";
+import { getLayout } from "@calcom/ui/v2/core/layouts/SettingsLayout";
 
 import DisableTwoFactorModal from "@components/v2/settings/DisableTwoFactorModal";
 import EnableTwoFactorModal from "@components/v2/settings/EnableTwoFactorModal";

packages/ui/v2/core/layouts/SettingsLayout.tsx

@@ -153,7 +153,7 @@ export default function SettingsLayout({
         <MobileSettingsContainer onSideContainerOpen={() => setSideContainerOpen(!sideContainerOpen)} />
       }>
       <div className="flex flex-1 [&>*]:flex-1">
-        <div className="color-black mt-8 justify-center px-4 sm:px-6 md:px-8 ">
+        <div className="color-black mx-auto mt-8 max-w-4xl justify-center px-4 sm:px-6 md:px-8 ">
           <ShellHeader />
           {children}
         </div>
@@ -168,7 +168,7 @@ function ShellHeader() {
   const { meta } = useMeta();
   const { t, isLocaleReady } = useLocale();
   return (
-    <header className="mx-auto block max-w-4xl justify-between sm:flex md:px-12 md:pt-8">
+    <header className="mx-auto block max-w-4xl justify-between sm:flex md:pt-8">
       <div className="mb-8 w-full border-b border-gray-200 pb-8">
         {meta.title && isLocaleReady ? (
           <h1 className="font-cal mb-1 text-xl font-bold capitalize tracking-wide text-black">