From ec5dfdcecae1849b02a8674cec48a0a4ef4b9223 Mon Sep 17 00:00:00 2001
From: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
Date: Fri, 30 Jun 2023 12:32:03 +0800
Subject: [PATCH] more layout updates

---
 .../interfaces/Integrations/ProjectLinker.tsx |   2 +-
 .../IntegrationSettings/Integration.tsx       |  13 --
 .../Organization/OAuthApps/OAuthApps.tsx      | 173 +++++++++---------
 .../Organization/TeamSettings/MembersView.tsx |   2 +-
 .../TeamSettings/TeamSettings.tsx             |  19 +-
 studio/components/layouts/Scaffold.tsx        |  31 +++-
 studio/components/ui/AlertError.tsx           |   4 +-
 7 files changed, 133 insertions(+), 111 deletions(-)

diff --git a/studio/components/interfaces/Integrations/ProjectLinker.tsx b/studio/components/interfaces/Integrations/ProjectLinker.tsx
index 900efeb8a6c..898e42223e7 100644
--- a/studio/components/interfaces/Integrations/ProjectLinker.tsx
+++ b/studio/components/interfaces/Integrations/ProjectLinker.tsx
@@ -210,7 +210,7 @@ const ProjectLinker = ({
       </div>
       <Markdown
         content={`
-The following enviroment variables will be added:
+The following environment variables will be added:
 
 ${ENV_VAR_RAW_KEYS.map((x, idx) => {
   return `
diff --git a/studio/components/interfaces/Organization/IntegrationSettings/Integration.tsx b/studio/components/interfaces/Organization/IntegrationSettings/Integration.tsx
index 84a8d2bdee5..f67e692fefc 100644
--- a/studio/components/interfaces/Organization/IntegrationSettings/Integration.tsx
+++ b/studio/components/interfaces/Organization/IntegrationSettings/Integration.tsx
@@ -109,19 +109,6 @@ Repository connections for ${title?.toLowerCase()}
                                       size="large"
                                       overlay={
                                         <>
-                                          <Dropdown.Item
-                                            icon={
-                                              <div>
-                                                <IconRefreshCcw size={14} />
-                                              </div>
-                                            }
-                                          >
-                                            <div>Refresh Enviroment Variables</div>
-                                            <div className="text-scale-900 text-xs">
-                                              Reapply env vars in vercel.
-                                            </div>
-                                          </Dropdown.Item>
-                                          <Dropdown.Separator />
                                           <Dropdown.Item
                                             icon={<IconTrash size={14} />}
                                             onSelect={() =>
diff --git a/studio/components/interfaces/Organization/OAuthApps/OAuthApps.tsx b/studio/components/interfaces/Organization/OAuthApps/OAuthApps.tsx
index 416679f43e1..79919216744 100644
--- a/studio/components/interfaces/Organization/OAuthApps/OAuthApps.tsx
+++ b/studio/components/interfaces/Organization/OAuthApps/OAuthApps.tsx
@@ -13,6 +13,7 @@ import PublishAppModal from './PublishAppSidePanel'
 import { AuthorizedApp, useAuthorizedAppsQuery } from 'data/oauth/authorized-apps-query'
 import AuthorizedAppRow from './AuthorizedAppRow'
 import RevokeAppModal from './RevokeAppModal'
+import { ScaffoldContainerLegacy } from 'components/layouts/Scaffold'
 
 // [Joshen] Note on nav UX
 // Kang Ming mentioned that it might be better to split Published Apps and Authorized Apps into 2 separate tabs
@@ -51,7 +52,7 @@ const OAuthApps = () => {
 
   return (
     <>
-      <div className="container my-4 max-w-5xl space-y-8">
+      <ScaffoldContainerLegacy>
         <div>
           <div className="flex items-center justify-between">
             <div>
@@ -65,95 +66,93 @@ const OAuthApps = () => {
             </Button>
           </div>
 
-          <div className="mt-4">
-            {isLoadingPublishedApps && (
-              <div className="space-y-2">
-                <ShimmeringLoader />
-                <ShimmeringLoader className="w-3/4" />
-                <ShimmeringLoader className="w-1/2" />
+          {isLoadingPublishedApps && (
+            <div className="space-y-2">
+              <ShimmeringLoader />
+              <ShimmeringLoader className="w-3/4" />
+              <ShimmeringLoader className="w-1/2" />
+            </div>
+          )}
+
+          {isErrorPublishedApps && (
+            <AlertError className="mt-4" subject="Unable to retrieve published OAuth apps" />
+          )}
+
+          {createdApp !== undefined && (
+            <Alert withIcon variant="success" title="Successfully published a new application!">
+              <div className="absolute top-4 right-4">
+                <Button
+                  type="text"
+                  icon={<IconX size={18} />}
+                  className="px-1"
+                  onClick={() => setCreatedApp(undefined)}
+                />
               </div>
-            )}
-
-            {isErrorPublishedApps && (
-              <AlertError subject="Unable to retrieve published OAuth apps" />
-            )}
-
-            {createdApp !== undefined && (
-              <Alert withIcon variant="success" title="Successfully published a new application!">
-                <div className="absolute top-4 right-4">
-                  <Button
-                    type="text"
-                    icon={<IconX size={18} />}
-                    className="px-1"
-                    onClick={() => setCreatedApp(undefined)}
+              <div className="w-full space-y-4">
+                <p className="text-sm">
+                  Ensure that you store the client secret securely - you will not be able to see it
+                  again.
+                </p>
+                <div className="space-y-4">
+                  <Input
+                    copy
+                    readOnly
+                    size="small"
+                    // layout="horizontal"
+                    label="Client ID"
+                    className="max-w-xl input-mono"
+                    value={createdApp.client_id}
+                    onChange={() => {}}
+                  />
+                  <Input
+                    copy
+                    readOnly
+                    size="small"
+                    // layout="horizontal"
+                    label="Client secret"
+                    className="max-w-xl input-mono"
+                    value={createdApp.client_secret}
+                    onChange={() => {}}
                   />
                 </div>
-                <div className="w-full space-y-4">
-                  <p className="text-sm">
-                    Ensure that you store the client secret securely - you will not be able to see
-                    it again.
-                  </p>
-                  <div className="space-y-4">
-                    <Input
-                      copy
-                      readOnly
-                      size="small"
-                      // layout="horizontal"
-                      label="Client ID"
-                      className="max-w-xl input-mono"
-                      value={createdApp.client_id}
-                      onChange={() => {}}
-                    />
-                    <Input
-                      copy
-                      readOnly
-                      size="small"
-                      // layout="horizontal"
-                      label="Client secret"
-                      className="max-w-xl input-mono"
-                      value={createdApp.client_secret}
-                      onChange={() => {}}
-                    />
-                  </div>
-                </div>
-              </Alert>
-            )}
+              </div>
+            </Alert>
+          )}
 
-            {isSuccessPublishedApps && (
-              <>
-                {(publishedApps?.length ?? 0) === 0 ? (
-                  <div className="bg-scale-100 dark:bg-scale-300 border rounded p-4 flex items-center justify-between">
-                    <p className="prose text-sm">You do not have any published applications yet</p>
-                  </div>
-                ) : (
-                  <Table
-                    className="mt-4"
-                    head={[
-                      <Table.th key="icon" className="w-[30px]"></Table.th>,
-                      <Table.th key="name">Name</Table.th>,
-                      <Table.th key="client-id">Client ID</Table.th>,
-                      <Table.th key="client-secret">Client Secret</Table.th>,
-                      <Table.th key="client-secret">Created at</Table.th>,
-                      <Table.th key="delete-action"></Table.th>,
-                    ]}
-                    body={
-                      sortedPublishedApps?.map((app) => (
-                        <OAuthAppRow
-                          key={app.id}
-                          app={app}
-                          onSelectEdit={() => {
-                            setShowPublishModal(true)
-                            setSelectedAppToUpdate(app)
-                          }}
-                          onSelectDelete={() => setSelectedAppToDelete(app)}
-                        />
-                      )) ?? []
-                    }
-                  />
-                )}
-              </>
-            )}
-          </div>
+          {isSuccessPublishedApps && (
+            <>
+              {(publishedApps?.length ?? 0) === 0 ? (
+                <div className="bg-scale-100 dark:bg-scale-300 border rounded p-4 flex items-center justify-between mt-4">
+                  <p className="prose text-sm">You do not have any published applications yet</p>
+                </div>
+              ) : (
+                <Table
+                  className="mt-4"
+                  head={[
+                    <Table.th key="icon" className="w-[30px]"></Table.th>,
+                    <Table.th key="name">Name</Table.th>,
+                    <Table.th key="client-id">Client ID</Table.th>,
+                    <Table.th key="client-secret">Client Secret</Table.th>,
+                    <Table.th key="client-secret">Created at</Table.th>,
+                    <Table.th key="delete-action"></Table.th>,
+                  ]}
+                  body={
+                    sortedPublishedApps?.map((app) => (
+                      <OAuthAppRow
+                        key={app.id}
+                        app={app}
+                        onSelectEdit={() => {
+                          setShowPublishModal(true)
+                          setSelectedAppToUpdate(app)
+                        }}
+                        onSelectDelete={() => setSelectedAppToDelete(app)}
+                      />
+                    )) ?? []
+                  }
+                />
+              )}
+            </>
+          )}
         </div>
 
         <div>
@@ -204,7 +203,7 @@ const OAuthApps = () => {
             )}
           </div>
         </div>
-      </div>
+      </ScaffoldContainerLegacy>
 
       <PublishAppModal
         visible={showPublishModal}
diff --git a/studio/components/interfaces/Organization/TeamSettings/MembersView.tsx b/studio/components/interfaces/Organization/TeamSettings/MembersView.tsx
index 1f1335bc84d..1a15465fb53 100644
--- a/studio/components/interfaces/Organization/TeamSettings/MembersView.tsx
+++ b/studio/components/interfaces/Organization/TeamSettings/MembersView.tsx
@@ -111,7 +111,7 @@ const MembersView = ({ searchString }: MembersViewProps) => {
 
   return (
     <>
-      <div className="rounded">
+      <div className="rounded w-full">
         <Loading active={!filteredMembers}>
           <Table
             head={[
diff --git a/studio/components/interfaces/Organization/TeamSettings/TeamSettings.tsx b/studio/components/interfaces/Organization/TeamSettings/TeamSettings.tsx
index 0dc3dabf59a..f998e5720d3 100644
--- a/studio/components/interfaces/Organization/TeamSettings/TeamSettings.tsx
+++ b/studio/components/interfaces/Organization/TeamSettings/TeamSettings.tsx
@@ -14,7 +14,12 @@ import { useProfile } from 'lib/profile'
 import InviteMemberButton from './InviteMemberButton'
 import MembersView from './MembersView'
 import { hasMultipleOwners, useGetRolesManagementPermissions } from './TeamSettings.utils'
-import { ScaffoldContainerLegacy } from 'components/layouts/Scaffold'
+import {
+  ScaffoldActionsGroup,
+  ScaffoldContainerLegacy,
+  ScaffoldFilterAndContent,
+  ScaffoldActionsContainer,
+} from 'components/layouts/Scaffold'
 
 const TeamSettings = () => {
   const { ui } = useStore()
@@ -72,8 +77,8 @@ const TeamSettings = () => {
 
   return (
     <ScaffoldContainerLegacy>
-      <div className="flex flex-col gap-3">
-        <div className="flex justify-between">
+      <ScaffoldFilterAndContent>
+        <ScaffoldActionsContainer className="justify-between">
           <Input
             icon={<IconSearch size="tiny" />}
             size="small"
@@ -83,7 +88,7 @@ const TeamSettings = () => {
             id="email"
             placeholder="Filter members"
           />
-          <div className="flex items-center space-x-4">
+          <ScaffoldActionsGroup>
             {canAddMembers && profile !== undefined && (
               <div>
                 <InviteMemberButton
@@ -125,10 +130,10 @@ const TeamSettings = () => {
                 )}
               </Tooltip.Root>
             </div>
-          </div>
-        </div>
+          </ScaffoldActionsGroup>
+        </ScaffoldActionsContainer>
         <MembersView searchString={searchString} />
-      </div>
+      </ScaffoldFilterAndContent>
     </ScaffoldContainerLegacy>
   )
 }
diff --git a/studio/components/layouts/Scaffold.tsx b/studio/components/layouts/Scaffold.tsx
index 1d11c68bc58..92c695d0e85 100644
--- a/studio/components/layouts/Scaffold.tsx
+++ b/studio/components/layouts/Scaffold.tsx
@@ -65,6 +65,29 @@ const ScaffoldSectionContent = React.forwardRef<
   )
 })
 
+// Table and filters
+const ScaffoldFilterAndContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  return <div ref={ref} {...props} className={cn('flex flex-col gap-3 items-center', className)} />
+})
+
+// Actions Group
+const ScaffoldActionsContainer = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  return <div ref={ref} {...props} className={cn('flex w-full items-center', className)} />
+})
+
+// Actions Group
+const ScaffoldActionsGroup = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    return <div ref={ref} {...props} className={cn('flex flex-row gap-3', className)} />
+  }
+)
+
 // For older layouts
 const ScaffoldContainerLegacy = React.forwardRef<
   HTMLDivElement,
@@ -74,7 +97,7 @@ const ScaffoldContainerLegacy = React.forwardRef<
     <div
       ref={ref}
       {...props}
-      className={cn(maxWidthClasses, paddingClasses, 'my-8 flex flex-col gap-4', className)}
+      className={cn(maxWidthClasses, paddingClasses, 'my-8 flex flex-col gap-8', className)}
     />
   )
 })
@@ -86,6 +109,9 @@ ScaffoldDivider.displayName = 'ScaffoldDivider'
 ScaffoldSection.displayName = 'ScaffoldSection'
 ScaffoldSectionDetail.displayName = 'ScaffoldSectionDetail'
 ScaffoldSectionContent.displayName = 'ScaffoldSectionContent'
+ScaffoldFilterAndContent.displayName = 'ScaffoldFilterAndContent'
+ScaffoldActionsContainer.displayName = 'ScaffoldActionsContainer'
+ScaffoldActionsGroup.displayName = 'ScaffoldActionsGroup'
 ScaffoldContainerLegacy.displayName = 'ScaffoldContainerLegacy'
 
 export {
@@ -96,5 +122,8 @@ export {
   ScaffoldSection,
   ScaffoldSectionDetail,
   ScaffoldSectionContent,
+  ScaffoldFilterAndContent,
+  ScaffoldActionsContainer,
+  ScaffoldActionsGroup,
   ScaffoldContainerLegacy,
 }
diff --git a/studio/components/ui/AlertError.tsx b/studio/components/ui/AlertError.tsx
index b8a8a614d9f..7b6af8e4c98 100644
--- a/studio/components/ui/AlertError.tsx
+++ b/studio/components/ui/AlertError.tsx
@@ -6,11 +6,12 @@ export interface AlertErrorProps {
   ref?: string
   subject?: string
   error?: ResponseError | null
+  className?: string
 }
 
 // [Joshen] To standardize the language for all error UIs
 
-const AlertError = ({ ref, subject, error }: AlertErrorProps) => {
+const AlertError = ({ ref, subject, error, className }: AlertErrorProps) => {
   const subjectString = subject?.replace(/ /g, '%20')
   let href = `/support/new?category=dashboard_bug`
 
@@ -21,6 +22,7 @@ const AlertError = ({ ref, subject, error }: AlertErrorProps) => {
   return (
     <Alert
       withIcon
+      className={className}
       variant="warning"
       title={subject}
       actions={[