feat(2915): review feedback

packages/backend/src/graphql/resolvers/tenant.ts

@@ -10,7 +10,6 @@ import { GraphQLErrorCode } from '../errors'
 import { Tenant } from '../../tenants/model'
 import { Pagination, SortOrder } from '../../shared/baseModel'
 import { getPageInfo } from '../../shared/pagination'
-import { Config } from '../../config/app'
 
 export const whoami: QueryResolvers<TenantedApolloContext>['whoami'] = async (
   parent,
@@ -175,7 +174,6 @@ export function tenantToGraphQl(tenant: Tenant): SchemaTenant {
     createdAt: new Date(+tenant.createdAt).toISOString(),
     deletedAt: tenant.deletedAt
       ? new Date(+tenant.deletedAt).toISOString()
-      : null,
-    isOperator: tenant.apiSecret === Config.adminApiSecret
+      : null
   }
 }

packages/backend/src/graphql/schema.graphql

@@ -1551,8 +1551,6 @@ type Tenant implements Model {
   createdAt: String!
   "The date and time that this tenant was deleted."
   deletedAt: String
-  "Is the tenant an Operator tenant."
-  isOperator: Boolean!
 }
 
 type TenantsConnection {

packages/frontend/app/lib/api/tenant.server.ts

@@ -41,7 +41,6 @@ export const listTenants = async (request: Request, args: QueryTenantsArgs) => {
               publicName
               createdAt
               deletedAt
-              isOperator
             }
           }
           pageInfo {
@@ -161,7 +160,6 @@ export const getTenantInfo = async (
           publicName
           createdAt
           deletedAt
-          isOperator
         }
       }
     `,

packages/frontend/app/lib/validate.server.ts

@@ -132,19 +132,10 @@ export const updateTenantSchema = z
   .object({
     apiSecret: z
       .string()
-      .min(10, { message: 'API Secret should be at least 3 characters long' })
-      .max(255, { message: 'Maximum length of API Secret is 255 characters' })
-      .regex(
-        /^(?:[A-Za-z0-9+/]{4})*(?:[A-Za-z0-9+/]{2}==|[A-Za-z0-9+/]{3}=)?$/,
-        { message: 'API Secret should be Base64 encoded.' }
-      ),
+      .min(10, { message: 'API Secret should be at least 10 characters long' })
+      .max(255, { message: 'Maximum length of API Secret is 255 characters' }),
     publicName: z.string().optional(),
-    email: z
-      .string()
-      .regex(/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/, {
-        message: 'Invalid email address.'
-      })
-      .optional(),
+    email: z.string().optional(),
     idpConsentUrl: z.string().optional(),
     idpSecret: z.string().optional()
   })

packages/frontend/app/routes/tenants.$tenantId.tsx

@@ -31,7 +31,6 @@ export async function loader({ request, params }: LoaderFunctionArgs) {
   await checkAuthAndRedirect(request.url, cookies)
 
   const tenantId = params.tenantId
-
   const result = z.string().uuid().safeParse(tenantId)
   if (!result.success) {
     throw json(null, { status: 400, statusText: 'Invalid tenant ID.' })
@@ -42,13 +41,11 @@ export async function loader({ request, params }: LoaderFunctionArgs) {
     throw json(null, { status: 404, statusText: 'Tenant not found.' })
 
   const me = await whoAmI(request)
-  const isOperator = me.isOperator
-
-  return json({ tenant, isOperator })
+  return json({ tenant, me })
 }
 
 export default function ViewTenantPage() {
-  const { tenant, isOperator } = useLoaderData<typeof loader>()
+  const { tenant, me } = useLoaderData<typeof loader>()
   const response = useActionData<typeof action>()
   const navigation = useNavigation()
   const [formData, setFormData] = useState<FormData>()
@@ -98,12 +95,6 @@ export default function ViewTenantPage() {
                     disabled
                     readOnly
                   />
-                  <Input
-                    label='Is Operator'
-                    value={tenant.isOperator ? 'Yes' : 'No'}
-                    disabled
-                    readOnly
-                  />
                   <Input
                     label='Public Name'
                     name='publicName'
@@ -147,6 +138,7 @@ export default function ViewTenantPage() {
                     label='API Secret'
                     defaultValue={tenant.apiSecret ?? undefined}
                     required
+                    disabled
                   />
                 </div>
                 <div className='flex justify-end p-4'>
@@ -205,20 +197,17 @@ export default function ViewTenantPage() {
         {/* Identity Provider Information - END */}
 
         {/* DELETE TENANT - Danger zone */}
-        <DangerZone title='Delete Tenant'>
-          <Form method='post' onSubmit={submitHandler}>
-            <Input type='hidden' name='id' value={tenant.id} />
-            <Input type='hidden' name='intent' value='delete' />
-            <Button
-              disabled={!isOperator}
-              type='submit'
-              intent='danger'
-              aria-label='delete tenant'
-            >
-              Delete tenant
-            </Button>
-          </Form>
-        </DangerZone>
+        {me.isOperator && me.id !== tenant.id && (
+          <DangerZone title='Delete Tenant'>
+            <Form method='post' onSubmit={submitHandler}>
+              <Input type='hidden' name='id' value={tenant.id} />
+              <Input type='hidden' name='intent' value='delete' />
+              <Button type='submit' intent='danger' aria-label='delete tenant'>
+                Delete tenant
+              </Button>
+            </Form>
+          </DangerZone>
+        )}
       </div>
       <ConfirmationDialog
         ref={dialogRef}

packages/frontend/app/routes/tenants._index.tsx

@@ -49,18 +49,13 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
     tenantPageInfo,
     previousPageUrl,
     nextPageUrl,
-    isOperator
+    me
   })
 }
 
 export default function TenantsPage() {
-  const {
-    tenantEdges,
-    tenantPageInfo,
-    previousPageUrl,
-    nextPageUrl,
-    isOperator
-  } = useLoaderData<typeof loader>()
+  const { tenantEdges, tenantPageInfo, previousPageUrl, nextPageUrl, me } =
+    useLoaderData<typeof loader>()
   const navigate = useNavigate()
 
   return (
@@ -71,7 +66,7 @@ export default function TenantsPage() {
             <h3 className='text-2xl'>Tenants</h3>
           </div>
           <div className='ml-auto'>
-            {isOperator && (
+            {me.isOperator && (
               <Button aria-label='add new tenant' to='/tenants/create'>
                 Add tenant
               </Button>
@@ -106,7 +101,7 @@ export default function TenantsPage() {
                             </span>
                           )}
                         </span>
-                        {tenant.node.isOperator && (
+                        {me.isOperator && me.id == tenant.node.id && (
                           <Badge color={BadgeColor.Yellow}>Operator</Badge>
                         )}
                       </div>

packages/frontend/app/routes/tenants.create.tsx

@@ -1,8 +1,13 @@
-import { json, type ActionFunctionArgs } from '@remix-run/node'
-import { Form, useActionData, useNavigation } from '@remix-run/react'
+import { json, type ActionFunctionArgs, redirect } from '@remix-run/node'
+import {
+  Form,
+  useActionData,
+  useLoaderData,
+  useNavigation
+} from '@remix-run/react'
 import { PageHeader } from '~/components'
 import { Button, ErrorPanel, Input, PasswordInput } from '~/components/ui'
-import { createTenant } from '~/lib/api/tenant.server'
+import { createTenant, whoAmI } from '~/lib/api/tenant.server'
 import { messageStorage, setMessageAndRedirect } from '~/lib/message.server'
 import { createTenantSchema } from '~/lib/validate.server'
 import type { ZodFieldErrors } from '~/shared/types'
@@ -12,13 +17,16 @@ import { type LoaderFunctionArgs } from '@remix-run/node'
 export const loader = async ({ request }: LoaderFunctionArgs) => {
   const cookies = request.headers.get('cookie')
   await checkAuthAndRedirect(request.url, cookies)
-  return null
+  const me = await whoAmI(request)
+  return json({ me })
 }
 
 export default function CreateTenantPage() {
   const response = useActionData<typeof action>()
   const { state } = useNavigation()
   const isSubmitting = state === 'submitting'
+  const { me } = useLoaderData<typeof loader>()
+  if (!me || !me.isOperator) throw redirect('tenants')
 
   return (
     <div className='pt-4 flex flex-col space-y-4'>
@@ -126,14 +134,22 @@ export async function action({ request }: ActionFunctionArgs) {
 
   const formData = Object.fromEntries(await request.formData())
   const result = createTenantSchema.safeParse(formData)
-
   if (!result.success) {
     errors.fieldErrors = result.error.flatten().fieldErrors
     return json({ errors }, { status: 400 })
   }
+  if (
+    result.data.email &&
+    result.data.email.trim().length > 0 &&
+    !new RegExp(/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/).test(
+      result.data.email
+    )
+  ) {
+    errors.message = ['Email is invalid.']
+    return json({ errors }, { status: 400 })
+  }
 
   const response = await createTenant(request, { ...result.data })
-
   if (!response?.tenant) {
     errors.message = ['Could not create tenant. Please try again!']
     return json({ errors }, { status: 400 })