* Update LayoutContent to accept a wrapping component (defaults to a …

…component wrapping the contents in `div`) * Apply the update to admin_preferences page
eisbuk · Sep 24, 2023 · f4754f0 · f4754f0
1 parent 7a284d5
commit f4754f0
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 43 deletions.
diff --git a/packages/client/src/pages/admin_preferences/index.tsx b/packages/client/src/pages/admin_preferences/index.tsx
@@ -122,46 +122,45 @@ const OrganizationSettings: React.FC = () => {
         validationSchema={OrganizationValidation}
       >
         {({ isSubmitting, isValidating, handleReset }) => (
-          <Form className="flex flex-col overflow-hidden">
-            <LayoutContent
-              actionButtons={
-                <div className="py-2 flex justify-end items-center gap-2">
-                  <Button
-                    onClick={handleReset}
-                    disabled={isSubmitting || isValidating}
-                    className="!text-cyan-500"
-                    size={ButtonSize.MD}
-                  >
-                    {t(ActionButton.Reset)}
-                  </Button>
-                  <Button
-                    disabled={isSubmitting || isValidating}
-                    color={ButtonColor.Primary}
-                    size={ButtonSize.MD}
-                    aria-label={"save"}
-                    type="submit"
-                  >
-                    {t(ActionButton.Save)}
-                  </Button>
+          <LayoutContent
+            component={Form}
+            actionButtons={
+              <div className="py-2 flex justify-end items-center gap-2">
+                <Button
+                  onClick={handleReset}
+                  disabled={isSubmitting || isValidating}
+                  className="!text-cyan-500"
+                  size={ButtonSize.MD}
+                >
+                  {t(ActionButton.Reset)}
+                </Button>
+                <Button
+                  disabled={isSubmitting || isValidating}
+                  color={ButtonColor.Primary}
+                  size={ButtonSize.MD}
+                  aria-label={"save"}
+                  type="submit"
+                >
+                  {t(ActionButton.Save)}
+                </Button>
+              </div>
+            }
+          >
+            {view === View.GeneralSettings ? (
+              <div className="pt-[44px] px-[71px] pb-8 md:pt-[62px]">
+                <div className="md:px-11">
+                  <AdminsField currentUser={currentUser} />
+                  <GeneralSettings />
                 </div>
-              }
-            >
-              {view === View.GeneralSettings ? (
-                <div className="pt-[44px] px-[71px] pb-8 md:pt-[62px]">
-                  <div className="md:px-11">
-                    <AdminsField currentUser={currentUser} />
-                    <GeneralSettings />
-                  </div>
-                </div>
-              ) : view === View.EmailTemplates ? (
-                <EmailTemplateSettings />
-              ) : (
-                <div>
-                  <SMSTemplateSettings />
-                </div>
-              )}
-            </LayoutContent>
-          </Form>
+              </div>
+            ) : view === View.EmailTemplates ? (
+              <EmailTemplateSettings />
+            ) : (
+              <div>
+                <SMSTemplateSettings />
+              </div>
+            )}
+          </LayoutContent>
         )}
       </Formik>
     </Layout>

diff --git a/packages/ui/src/Layout/Layout.tsx b/packages/ui/src/Layout/Layout.tsx
@@ -71,16 +71,24 @@ const Layout: React.FC<LayoutProps> = ({
         </div>
       </header>
 
-      {children}
+      <main className="overflow-hidden flex flex-col">{children}</main>
     </div>
   );
 };
 
 export const LayoutContent: React.FC<{
   wide?: boolean;
   actionButtons?: JSX.Element;
-}> = ({ children, wide = false, actionButtons = null }) => (
-  <main className="flex flex-col overflow-hidden">
+  Component?: React.FC<{ className: string }>;
+}> = ({
+  children,
+  wide = false,
+  actionButtons = null,
+  Component = ({ children, className }) => (
+    <div className={className}>{children}</div>
+  ),
+}) => (
+  <Component className="flex flex-col overflow-hidden">
     <div className={`overflow-y-auto ${wide ? "" : "content-container"}`}>
       {children}
     </div>
@@ -89,7 +97,7 @@ export const LayoutContent: React.FC<{
         <div className="content-container">{actionButtons}</div>
       </div>
     )}
-  </main>
+  </Component>
 );
 
 /** Get styles for top / botton row of the header */