From 5009d23e1ea44805ceffd32831777a8972164d68 Mon Sep 17 00:00:00 2001
From: Eva Ho <eva.ho@infrahq.com>
Date: Mon, 19 Sep 2022 21:37:42 -0400
Subject: [PATCH 1/6] fix: few more bugs

---
 ui/components/grant-form.js        |  7 ++++++-
 ui/components/layouts/dashboard.js |  2 +-
 ui/pages/signup/index.js           | 12 ++++++++----
 3 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/ui/components/grant-form.js b/ui/components/grant-form.js
index df6599d2a1..81d7d61a05 100644
--- a/ui/components/grant-form.js
+++ b/ui/components/grant-form.js
@@ -66,7 +66,12 @@ export default function GrantForm({ grants, roles, onSubmit = () => {} }) {
           <Combobox.Input
             className={`block w-full rounded-md border-gray-300 text-xs shadow-sm focus:border-blue-500 focus:ring-blue-500`}
             placeholder='User or group'
-            onChange={e => setQuery(e.target.value)}
+            onChange={e => {
+              setQuery(e.target.value)
+              if (e.target.value.length === 0) {
+                setSelected(null)
+              }
+            }}
             onFocus={() => {
               if (!selected) {
                 button.current?.click()
diff --git a/ui/components/layouts/dashboard.js b/ui/components/layouts/dashboard.js
index b3deabcd2d..3f621f6c96 100644
--- a/ui/components/layouts/dashboard.js
+++ b/ui/components/layouts/dashboard.js
@@ -208,7 +208,7 @@ function Layout({ children }) {
 
       {/* Main content */}
       <div className='mx-auto flex min-w-0 flex-1 flex-col'>
-        <div className='sticky top-0 z-50 flex flex-shrink-0 border-b border-gray-100 bg-white/90 py-3 px-6 pl-2 backdrop-blur-lg md:py-2 md:px-6'>
+        <div className='sticky top-0 z-10 flex flex-shrink-0 border-b border-gray-100 bg-white/90 py-3 px-6 pl-2 backdrop-blur-lg md:py-2 md:px-6'>
           <button
             type='button'
             className='px-4 text-black focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500 md:hidden'
diff --git a/ui/pages/signup/index.js b/ui/pages/signup/index.js
index 3a8754f99a..0fc13703c7 100644
--- a/ui/pages/signup/index.js
+++ b/ui/pages/signup/index.js
@@ -145,10 +145,12 @@ export default function Signup() {
                 }
               }}
               className={`mt-1 block w-full rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm ${
-                errors.org?.name ? 'border-red-500' : 'border-gray-300'
+                errors['org.name'] ? 'border-red-500' : 'border-gray-300'
               }`}
             />
-            {errors.org?.name && <ErrorMessage message={errors.orgs?.name} />}
+            {errors['org.name'] && (
+              <ErrorMessage message={errors['org.name']} />
+            )}
           </div>
           <div className='w-full'>
             <label
@@ -172,14 +174,16 @@ export default function Signup() {
                   setError('')
                 }}
                 className={`block w-full min-w-0 rounded-l-lg px-3 py-2 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm ${
-                  errors.domain ? 'border-red-500' : 'border-gray-300'
+                  errors['org.subdomain'] ? 'border-red-500' : 'border-gray-300'
                 }`}
               />
               <span className='inline-flex select-none items-center rounded-r-lg border border-l-0 border-gray-300 bg-gray-50 px-3 text-2xs text-gray-500 shadow-sm'>
                 .{baseDomain}
               </span>
             </div>
-            {errors.domain && <ErrorMessage message={errors.domain} />}
+            {errors['org.subdomain'] && (
+              <ErrorMessage message={errors['org.subdomain']} />
+            )}
           </div>
         </div>
         <button

From fdbd98198ff885f8639709749af50f55c276c189 Mon Sep 17 00:00:00 2001
From: Eva Ho <eva.ho@infrahq.com>
Date: Mon, 19 Sep 2022 21:46:59 -0400
Subject: [PATCH 2/6] fix: removed provider breadcrumbs to be consistent
 through out the app

---
 ui/pages/providers/add.js | 353 +++++++++++++++++++-------------------
 1 file changed, 175 insertions(+), 178 deletions(-)

diff --git a/ui/pages/providers/add.js b/ui/pages/providers/add.js
index dce09d0408..f66bd2d6b7 100644
--- a/ui/pages/providers/add.js
+++ b/ui/pages/providers/add.js
@@ -161,214 +161,211 @@ export default function ProvidersAddDetails() {
       <Head>
         <title>Add Identity Provider - {kind}</title>
       </Head>
-      <header className='my-6 flex items-center justify-between'>
-        <h1 className='py-1 font-display text-xl font-medium'>
-          <Link href='/providers'>
-            <a className='text-gray-500/75 hover:text-gray-600'>Providers</a>
-          </Link>{' '}
-          <span className='mx-2 font-light text-gray-400'> / </span> Connect
-          provider
-        </h1>
-      </header>
-
-      <form onSubmit={onSubmit} className='mt-6 space-y-8'>
-        {/* Overview */}
-        <div>
-          <h3 className='mb-4 text-base font-medium text-gray-900'>Overview</h3>
-          <div className='mb-6 grid grid-cols-2 gap-2'>
-            {providers.map(
-              p =>
-                p.available && (
-                  <div
-                    key={p.name}
-                    onClick={() => {
-                      setKind(p.kind)
-                      setName(p.kind === 'azure' ? 'azure ad' : p.kind)
-                      router.replace(`/providers/add?type=${p.kind}`)
-                    }}
-                  >
-                    <Provider {...p} currentKind={kind} />
-                  </div>
-                )
-            )}
-          </div>
-          <label className='text-2xs font-medium text-gray-700'>Name</label>
-          <input
-            required
-            type='text'
-            value={name}
-            onChange={e => {
-              setName(e.target.value)
-              setErrors({})
-              setError('')
-            }}
-            className={`mt-1 block w-full rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm ${
-              errors.name ? 'border-red-500' : 'border-gray-300'
-            }`}
-          />
-          {errors.name && <ErrorMessage message={errors.name} />}
-        </div>
-        <div className='w-full'>
-          <div className='mb-1 flex'>
-            <h3 className='text-base font-medium leading-6 text-gray-900'>
-              Additional Information
+      <h1 className='my-6 py-1 font-display text-xl font-medium'>
+        Connect Provider
+      </h1>
+      <div className='flex w-full flex-col'>
+        <form onSubmit={onSubmit} className='mb-6 space-y-8'>
+          {/* Overview */}
+          <div>
+            <h3 className='mb-4 text-base font-medium text-gray-900'>
+              Overview
             </h3>
-            &nbsp;
-            <a
-              className='text-gray-500 underline hover:text-gray-600'
-              target='_blank'
-              href={docLink()}
-              rel='noreferrer'
-            >
-              learn more
-            </a>
+            <div className='mb-6 grid grid-cols-2 gap-2'>
+              {providers.map(
+                p =>
+                  p.available && (
+                    <div
+                      key={p.name}
+                      onClick={() => {
+                        setKind(p.kind)
+                        setName(p.kind === 'azure' ? 'azure ad' : p.kind)
+                        router.replace(`/providers/add?type=${p.kind}`)
+                      }}
+                    >
+                      <Provider {...p} currentKind={kind} />
+                    </div>
+                  )
+              )}
+            </div>
+            <label className='text-2xs font-medium text-gray-700'>Name</label>
+            <input
+              required
+              type='text'
+              value={name}
+              onChange={e => {
+                setName(e.target.value)
+                setErrors({})
+                setError('')
+              }}
+              className={`mt-1 block w-full rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm ${
+                errors.name ? 'border-red-500' : 'border-gray-300'
+              }`}
+            />
+            {errors.name && <ErrorMessage message={errors.name} />}
           </div>
-          <div className='mt-6 space-y-3'>
-            {kind !== 'google' && (
+          <div className='w-full'>
+            <div className='mb-1 flex'>
+              <h3 className='text-base font-medium leading-6 text-gray-900'>
+                Additional Information
+              </h3>
+              &nbsp;
+              <a
+                className='text-gray-500 underline hover:text-gray-600'
+                target='_blank'
+                href={docLink()}
+                rel='noreferrer'
+              >
+                learn more
+              </a>
+            </div>
+            <div className='mt-6 space-y-3'>
+              {kind !== 'google' && (
+                <div>
+                  <label className='text-2xs font-medium text-gray-700'>
+                    URL (Domain)
+                  </label>
+                  <input
+                    required
+                    type='text'
+                    value={url}
+                    onChange={e => {
+                      setURL(e.target.value)
+                      setErrors({})
+                      setError('')
+                    }}
+                    className={`mt-1 block w-full rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm ${
+                      errors.url ? 'border-red-500' : 'border-gray-300'
+                    }`}
+                  />
+                  {errors.url && <ErrorMessage message={errors.url} />}
+                </div>
+              )}
+
               <div>
                 <label className='text-2xs font-medium text-gray-700'>
-                  URL (Domain)
+                  Client ID
                 </label>
                 <input
                   required
-                  type='text'
-                  value={url}
+                  type='search'
+                  value={clientID}
                   onChange={e => {
-                    setURL(e.target.value)
+                    setClientID(e.target.value)
                     setErrors({})
                     setError('')
                   }}
                   className={`mt-1 block w-full rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm ${
-                    errors.url ? 'border-red-500' : 'border-gray-300'
+                    errors.clientid ? 'border-red-500' : 'border-gray-300'
                   }`}
                 />
-                {errors.url && <ErrorMessage message={errors.url} />}
+                {errors.clientid && <ErrorMessage message={errors.clientid} />}
               </div>
-            )}
-
-            <div>
-              <label className='text-2xs font-medium text-gray-700'>
-                Client ID
-              </label>
-              <input
-                required
-                type='search'
-                value={clientID}
-                onChange={e => {
-                  setClientID(e.target.value)
-                  setErrors({})
-                  setError('')
-                }}
-                className={`mt-1 block w-full rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm ${
-                  errors.clientid ? 'border-red-500' : 'border-gray-300'
-                }`}
-              />
-              {errors.clientid && <ErrorMessage message={errors.clientid} />}
-            </div>
-
-            <div>
-              <label className='text-2xs font-medium text-gray-700'>
-                Client Secret
-              </label>
-              <input
-                required
-                type='password'
-                value={clientSecret}
-                onChange={e => {
-                  setClientSecret(e.target.value)
-                  setErrors({})
-                  setError('')
-                }}
-                className={`mt-1 block w-full rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm ${
-                  errors.clientsecret ? 'border-red-500' : 'border-gray-300'
-                }`}
-              />
-              {errors.clientsecret && (
-                <ErrorMessage message={errors.clientsecret} />
-              )}
-            </div>
-          </div>
-        </div>
-
-        {kind === 'google' && (
-          <div className='space-y-1'>
-            <div className='py-6'>
-              <h3 className='text-base font-medium leading-6 text-gray-900'>
-                Optional information for Google Groups
-              </h3>
-              <div className='mt-1 flex flex-row items-center space-x-1 text-sm text-gray-500'>
-                <a
-                  className='underline hover:text-gray-600'
-                  target='_blank'
-                  href='https://infrahq.com/docs/identity-providers/google#groups'
-                  rel='noreferrer'
-                >
-                  learn more
-                </a>
-              </div>
-            </div>
-            <div className='mt-6 grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6'>
-              <div className='sm:col-span-6 lg:col-span-5'>
-                <label className='flex text-2xs font-medium text-gray-700'>
-                  Private Key
-                  <Tooltip
-                    message='upload the private key json file that was created for
-                        your service account'
-                  >
-                    <InformationCircleIcon className='mx-1 h-4 w-4' />
-                  </Tooltip>
-                </label>
 
-                <input
-                  type='file'
-                  onChange={parseGoogleCredentialFile}
-                  className='mt-1 block w-full rounded-md py-[6px] file:mr-4 file:rounded-md file:border-0 file:bg-blue-50
-                      file:py-2 file:px-4
-                      file:text-sm file:font-semibold
-                      file:text-blue-700 hover:file:bg-blue-100
-                      sm:text-sm'
-                />
-                {errors.privatekey && (
-                  <ErrorMessage message={errors.privatekey} />
-                )}
-              </div>
-              <div className='sm:col-span-6 lg:col-span-5'>
+              <div>
                 <label className='text-2xs font-medium text-gray-700'>
-                  Workspace Domain Admin Email
+                  Client Secret
                 </label>
                 <input
-                  spellCheck='false'
-                  type='email'
-                  value={domainAdminEmail}
+                  required
+                  type='password'
+                  value={clientSecret}
                   onChange={e => {
-                    setDomainAdminEmail(e.target.value)
+                    setClientSecret(e.target.value)
                     setErrors({})
                     setError('')
                   }}
                   className={`mt-1 block w-full rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm ${
-                    errors.domainadminemail
-                      ? 'border-red-500'
-                      : 'border-gray-300'
+                    errors.clientsecret ? 'border-red-500' : 'border-gray-300'
                   }`}
                 />
-                {errors.domainadminemail && (
-                  <ErrorMessage message={errors.domainadminemail} />
+                {errors.clientsecret && (
+                  <ErrorMessage message={errors.clientsecret} />
                 )}
               </div>
             </div>
           </div>
-        )}
-        {error && <ErrorMessage message={error} center />}
-
-        <div className='flex items-center justify-end space-x-3 pt-5 pb-3'>
-          <button
-            type='submit'
-            className='inline-flex items-center rounded-md border border-transparent bg-black px-4 py-2 text-xs font-medium text-white shadow-sm hover:bg-gray-800'
-          >
-            Connect Provider
-          </button>
-        </div>
-      </form>
+
+          {kind === 'google' && (
+            <div className='space-y-1'>
+              <div className='py-6'>
+                <h3 className='text-base font-medium leading-6 text-gray-900'>
+                  Optional information for Google Groups
+                </h3>
+                <div className='mt-1 flex flex-row items-center space-x-1 text-sm text-gray-500'>
+                  <a
+                    className='underline hover:text-gray-600'
+                    target='_blank'
+                    href='https://infrahq.com/docs/identity-providers/google#groups'
+                    rel='noreferrer'
+                  >
+                    learn more
+                  </a>
+                </div>
+              </div>
+              <div className='mt-6 grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6'>
+                <div className='sm:col-span-6 lg:col-span-5'>
+                  <label className='flex text-2xs font-medium text-gray-700'>
+                    Private Key
+                    <Tooltip
+                      message='upload the private key json file that was created for
+                        your service account'
+                    >
+                      <InformationCircleIcon className='mx-1 h-4 w-4' />
+                    </Tooltip>
+                  </label>
+
+                  <input
+                    type='file'
+                    onChange={parseGoogleCredentialFile}
+                    className='mt-1 block w-full rounded-md py-[6px] file:mr-4 file:rounded-md file:border-0 file:bg-blue-50
+                      file:py-2 file:px-4
+                      file:text-sm file:font-semibold
+                      file:text-blue-700 hover:file:bg-blue-100
+                      sm:text-sm'
+                  />
+                  {errors.privatekey && (
+                    <ErrorMessage message={errors.privatekey} />
+                  )}
+                </div>
+                <div className='sm:col-span-6 lg:col-span-5'>
+                  <label className='text-2xs font-medium text-gray-700'>
+                    Workspace Domain Admin Email
+                  </label>
+                  <input
+                    spellCheck='false'
+                    type='email'
+                    value={domainAdminEmail}
+                    onChange={e => {
+                      setDomainAdminEmail(e.target.value)
+                      setErrors({})
+                      setError('')
+                    }}
+                    className={`mt-1 block w-full rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm ${
+                      errors.domainadminemail
+                        ? 'border-red-500'
+                        : 'border-gray-300'
+                    }`}
+                  />
+                  {errors.domainadminemail && (
+                    <ErrorMessage message={errors.domainadminemail} />
+                  )}
+                </div>
+              </div>
+            </div>
+          )}
+          {error && <ErrorMessage message={error} center />}
+
+          <div className='flex items-center justify-end space-x-3 pt-5 pb-3'>
+            <button
+              type='submit'
+              className='inline-flex items-center rounded-md border border-transparent bg-black px-4 py-2 text-xs font-medium text-white shadow-sm hover:bg-gray-800'
+            >
+              Connect Provider
+            </button>
+          </div>
+        </form>
+      </div>
     </div>
   )
 }

From 80d7b212e8e1e715eee5fd9f3bd770ca37d1e04e Mon Sep 17 00:00:00 2001
From: Eva Ho <eva.ho@infrahq.com>
Date: Mon, 19 Sep 2022 21:57:14 -0400
Subject: [PATCH 3/6] fix: provider table formatting

---
 ui/pages/providers/index.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/ui/pages/providers/index.js b/ui/pages/providers/index.js
index 32f5141e2b..389a6499c1 100644
--- a/ui/pages/providers/index.js
+++ b/ui/pages/providers/index.js
@@ -64,11 +64,13 @@ export default function Providers() {
           },
           {
             cell: info => (
-              <div className='hidden lg:table-cell'>
+              <div className='truncate'>
                 {info.getValue() ? dayjs(info.getValue()).fromNow() : '-'}
               </div>
             ),
-            header: () => <span className='hidden lg:table-cell'>Added</span>,
+            header: () => (
+              <span className='hidden truncate lg:table-cell'>Added</span>
+            ),
             accessorKey: 'created',
           },
           {

From b3ff529d264c3a5c8d90be77b5914efc1603a4fb Mon Sep 17 00:00:00 2001
From: Eva Ho <eva.ho@infrahq.com>
Date: Mon, 19 Sep 2022 21:58:20 -0400
Subject: [PATCH 4/6] fix: build

---
 ui/pages/providers/add.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/ui/pages/providers/add.js b/ui/pages/providers/add.js
index f66bd2d6b7..f3d373739f 100644
--- a/ui/pages/providers/add.js
+++ b/ui/pages/providers/add.js
@@ -1,7 +1,6 @@
 import { useEffect, useState } from 'react'
 import { useRouter } from 'next/router'
 import Head from 'next/head'
-import Link from 'next/link'
 import { useSWRConfig } from 'swr'
 import { InformationCircleIcon } from '@heroicons/react/outline'
 

From 7e1b3da06aa4db127732ad6ea9b416aad0ee823b Mon Sep 17 00:00:00 2001
From: Eva Ho <eva.ho@infrahq.com>
Date: Tue, 20 Sep 2022 11:01:14 -0400
Subject: [PATCH 5/6] fix: hide account when the user is not login as local
 infra user

---
 ui/components/layouts/dashboard.js | 34 +++++++++++++++++++-----------
 1 file changed, 22 insertions(+), 12 deletions(-)

diff --git a/ui/components/layouts/dashboard.js b/ui/components/layouts/dashboard.js
index 3f621f6c96..5504df99ea 100644
--- a/ui/components/layouts/dashboard.js
+++ b/ui/components/layouts/dashboard.js
@@ -141,7 +141,13 @@ function Layout({ children }) {
     },
   ]
 
-  const subNavigation = [{ name: 'Account', href: '/account' }]
+  const subNavigation = [
+    {
+      name: 'Account',
+      href: '/account',
+      show: auth?.providerNames.includes('infra'),
+    },
+  ]
 
   for (const n of [...navigation]) {
     if (router.pathname.startsWith(n.href) && n.admin && !admin) {
@@ -245,17 +251,21 @@ function Layout({ children }) {
                         {auth?.name}
                       </p>
                     </div>
-                    <div className='py-1'>
-                      {subNavigation.map(item => (
-                        <Menu.Item key={item.name}>
-                          <NavLink href={item.href}>
-                            <p className='block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100'>
-                              {item.name}
-                            </p>
-                          </NavLink>
-                        </Menu.Item>
-                      ))}
-                    </div>
+                    {subNavigation?.filter(n => n.show === true).length > 0 && (
+                      <div className='py-1'>
+                        {subNavigation
+                          ?.filter(n => n.show === true)
+                          .map(item => (
+                            <Menu.Item key={item.name}>
+                              <NavLink href={item.href}>
+                                <p className='block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100'>
+                                  {item.name}
+                                </p>
+                              </NavLink>
+                            </Menu.Item>
+                          ))}
+                      </div>
+                    )}
                     <div className='py-1'>
                       <Menu.Item>
                         <button

From 98e4a975d40a4111ae539dd68330d6d6c6e5d613 Mon Sep 17 00:00:00 2001
From: Eva Ho <eva.ho@infrahq.com>
Date: Tue, 20 Sep 2022 11:56:18 -0400
Subject: [PATCH 6/6] fix: clean up

---
 ui/components/layouts/dashboard.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/ui/components/layouts/dashboard.js b/ui/components/layouts/dashboard.js
index 5504df99ea..9f88d41019 100644
--- a/ui/components/layouts/dashboard.js
+++ b/ui/components/layouts/dashboard.js
@@ -251,10 +251,10 @@ function Layout({ children }) {
                         {auth?.name}
                       </p>
                     </div>
-                    {subNavigation?.filter(n => n.show === true).length > 0 && (
+                    {subNavigation?.filter(n => n.show).length > 0 && (
                       <div className='py-1'>
                         {subNavigation
-                          ?.filter(n => n.show === true)
+                          ?.filter(n => n.show)
                           .map(item => (
                             <Menu.Item key={item.name}>
                               <NavLink href={item.href}>