fix(ui): minor display issues in UI (#2460)

infrahq · Jul 7, 2022 · 337a9eb · 337a9eb
1 parent 21dfc93
commit 337a9eb
Show file tree

Hide file tree

Showing 11 changed files with 74 additions and 66 deletions.
diff --git a/ui/components/grant-form.js b/ui/components/grant-form.js
@@ -7,8 +7,10 @@ import { PlusIcon } from '@heroicons/react/outline'
 import RoleSelect from './role-select'
 
 export default function GrantForm({ roles, onSubmit = () => {} }) {
-  const { data: { items: users } = { items: [] } } = useSWR('/api/users')
-  const { data: { items: groups } = { items: [] } } = useSWR('/api/groups')
+  const { data: { items: users } = { items: [] }, mutate: mutateUsers } =
+    useSWR('/api/users')
+  const { data: { items: groups } = { items: [] }, mutate: mutateGroups } =
+    useSWR('/api/groups')
 
   const [role, setRole] = useState(roles?.[0])
   const [query, setQuery] = useState('')
@@ -44,6 +46,10 @@ export default function GrantForm({ roles, onSubmit = () => {} }) {
           className='relative flex-1'
           value={selected?.name}
           onChange={setSelected}
+          onFocus={() => {
+            mutateUsers()
+            mutateGroups()
+          }}
         >
           <Combobox.Input
             className='relative w-full bg-transparent py-3 pr-2 text-xs placeholder:italic focus:outline-none disabled:opacity-30'

diff --git a/ui/components/layouts/dashboard.js b/ui/components/layouts/dashboard.js
@@ -65,32 +65,33 @@ function Layout({ children }) {
           </Link>
         </div>
         <div className='flex-1 select-none space-y-1 px-5'>
-          {navigation.map(n => (
-            <Link key={n.name} href={n.href}>
-              <a
-                href={n.href}
-                className={`
+          {navigation
+            ?.filter(n => (n.admin ? admin : true))
+            .map(n => (
+              <Link key={n.name} href={n.href}>
+                <a
+                  href={n.href}
+                  className={`
                     ${
                       router.asPath.startsWith(n.href)
                         ? 'text-white'
                         : 'text-gray-400'
                     }
                     flex items-center rounded-lg py-2 text-xs leading-none transition-colors duration-100
-                    ${n.admin && !admin ? 'pointer-events-none opacity-30' : ''}
                   `}
-              >
-                <img
-                  alt={n?.name?.toLowerCase()}
-                  src={n.icon}
-                  className={`
+                >
+                  <img
+                    alt={n?.name?.toLowerCase()}
+                    src={n.icon}
+                    className={`
                       ${router.asPath.startsWith(n.href) ? '' : 'opacity-40'}
                       mr-3 h-[18px] w-[18px] flex-shrink-0
                     `}
-                />
-                {n.name}
-              </a>
-            </Link>
-          ))}
+                  />
+                  {n.name}
+                </a>
+              </Link>
+            ))}
         </div>
         <div className='group mx-2 mb-2 flex h-12 overflow-hidden rounded-xl bg-transparent p-2.5 pb-1 transition-all duration-300 ease-in-out hover:h-[132px] hover:bg-gray-900'>
           <div className='flex h-[23px] w-[23px] flex-none items-stretch self-start rounded-md border border-violet-300/40'>
@@ -101,7 +102,10 @@ function Layout({ children }) {
             </div>
           </div>
           <div className='ml-1 min-w-0 flex-1 select-none px-2'>
-            <div className='mt-[5px] mb-2 truncate pb-px text-2xs leading-none text-gray-400 transition-colors duration-300 group-hover:text-white'>
+            <div
+              title={auth?.name}
+              className='mt-[5px] mb-2 truncate pb-px text-2xs leading-none text-gray-400 transition-colors duration-300 group-hover:text-white'
+            >
               {auth?.name}
             </div>
             <div className='opacity-0 transition-opacity duration-300 group-hover:opacity-100'>

diff --git a/ui/components/page-header.js b/ui/components/page-header.js
@@ -4,12 +4,14 @@ import { PlusIcon } from '@heroicons/react/outline'
 export default function PageHeader({ header, buttonLabel, buttonHref }) {
   return (
     <div className='z-10 flex min-h-[40px] flex-none items-center justify-between bg-black py-3 px-6'>
-      <h1 className='text-xs font-semibold'>{header}</h1>
+      <h1 className='py-3 text-xs font-semibold'>{header}</h1>
       {buttonHref && (
         <Link href={buttonHref}>
-          <button className='flex items-center rounded-md  border border-violet-300 px-4 py-2.5 text-sm text-violet-100'>
+          <button className='flex items-center rounded-md  border border-violet-300 px-4 py-3 text-sm text-violet-100'>
             <PlusIcon className='mr-1 h-3 w-3' />
-            <div className='text-2xs font-medium'>{buttonLabel}</div>
+            <div className='text-2xs font-medium leading-none'>
+              {buttonLabel}
+            </div>
           </button>
         </Link>
       )}

diff --git a/ui/components/sidebar.js b/ui/components/sidebar.js
@@ -4,7 +4,7 @@ import ProfileIcon from './profile-icon'
 
 export default function Sidebar({
   children,
-  handleClose,
+  onClose,
   title,
   iconPath,
   profileIcon,
@@ -38,7 +38,7 @@ export default function Sidebar({
         <button
           type='button'
           className='bg-transparents -mr-2 flex-none cursor-pointer rounded-md p-2 text-gray-400 hover:text-white focus:outline-none'
-          onClick={handleClose}
+          onClick={onClose}
         >
           <XIcon className='h-6 w-6 stroke-1' aria-hidden='true' />
         </button>

diff --git a/ui/components/table.js b/ui/components/table.js
@@ -12,7 +12,10 @@ export default function Table({ columns, data, getRowProps = () => {} }) {
     )
 
   return (
-    <table className='sticky top-0 w-full table-fixed' {...getTableProps()}>
+    <table
+      className='w-full table-fixed border-separate border-spacing-0'
+      {...getTableProps()}
+    >
       <thead>
         {headerGroups.map(headerGroup => (
           <tr key={headerGroup.id} {...headerGroup.getHeaderGroupProps()}>

diff --git a/ui/package.json b/ui/package.json
@@ -2,7 +2,7 @@
   "scripts": {
     "dev": "concurrently 'npm run dev:ui' 'npm run dev:server'",
     "dev:ui": "next dev",
-    "dev:server": "go run .. server --ui-proxy-url http://localhost:3000",
+    "dev:server": "INFRA_SERVER_TLS_CA=../internal/server/testdata/pki/ca.crt INFRA_SERVER_TLS_CA_PRIVATE_KEY=file:../internal/server/testdata/pki/ca.key go run .. server --ui-proxy-url http://localhost:3000",
     "test": "jest --ci --passWithNoTests",
     "build": "next build",
     "start": "next start",

diff --git a/ui/pages/destinations/index.js b/ui/pages/destinations/index.js
@@ -410,7 +410,7 @@ export default function Destinations() {
           </div>
           {selected && (
             <Sidebar
-              handleClose={() => setSelected(null)}
+              onClose={() => setSelected(null)}
               title={selected.resource}
               iconPath='/destinations.svg'
             >

diff --git a/ui/pages/login/index.js b/ui/pages/login/index.js
@@ -20,28 +20,29 @@ function oidcLogin({ id, clientID, authURL, scopes }) {
   )}&state=${state}`
 }
 
+const KIND_OKTA = 'okta'
+
 function Providers({ providers }) {
   return (
     <>
       <div className='mt-2 w-full max-w-sm'>
-        {providers?.map(p => (
+        {providers.map(p => (
           <button
             onClick={() => oidcLogin(p)}
             key={p.id}
-            className='my-1.5 w-full rounded-md border border-gray-800 p-0.5 hover:to-pink-50'
+            title={`${p.name} — ${p.url}`}
+            className='my-1.5 flex w-full flex-row items-center justify-center rounded-md border border-gray-700 px-4 py-3 hover:hover:border-gray-600'
           >
-            <div className='flex flex-col items-center justify-center px-4 py-2'>
-              <div className='flex flex-col items-center py-0.5 text-center'>
-                <img
-                  alt='identity provider icon'
-                  className='h-4'
-                  src={`/providers/${p.kind}.svg`}
-                />
-                {providers?.length > 1 && p.kind !== p.name && (
-                  <div className='text-2xs text-gray-300'>{p.name}</div>
-                )}
-              </div>
-            </div>
+            <img
+              alt='identity provider icon'
+              className='h-4'
+              src={`/providers/${p.kind}.svg`}
+            />
+            {p.kind !== KIND_OKTA && (
+              <span className='relative pl-2 text-sm font-semibold leading-none'>
+                Single Sign-On
+              </span>
+            )}
           </button>
         ))}
       </div>

diff --git a/ui/pages/providers/add/details.js b/ui/pages/providers/add/details.js
@@ -98,7 +98,6 @@ export default function ProvidersAddDetails() {
           </label>
           <input
             required
-            autoFocus
             type='search'
             placeholder='choose a name for your identity provider'
             value={name}
@@ -126,6 +125,7 @@ export default function ProvidersAddDetails() {
           </label>
           <input
             required
+            autoFocus
             placeholder='domain or URL'
             value={url}
             onChange={e => setURL(e.target.value)}

diff --git a/ui/pages/providers/index.js b/ui/pages/providers/index.js
@@ -49,30 +49,22 @@ function SidebarContent({ provider, admin, setSelectedProvider }) {
         <h3 className='border-b border-gray-800 py-4 text-3xs uppercase text-gray-400'>
           Metadata
         </h3>
-        <div className='flex flex-col space-y-2 pt-3'>
-          <div className='flex flex-row items-center'>
-            <div className='w-1/3 text-2xs text-gray-400'>Name</div>
-            <div className='text-2xs'>{provider.name}</div>
+        <div className='grid grid-cols-3 gap-x-1 gap-y-2 pt-3'>
+          <div className='col-span-1 text-2xs text-gray-400'>Name</div>
+          <div className='col-span-2 text-2xs'>{provider.name}</div>
+          <div className='col-span-1 text-2xs text-gray-400'>URL</div>
+          <div className='col-span-2 break-all text-2xs'>{provider.url}</div>
+          <div className='col-span-1 text-2xs text-gray-400'>Client ID</div>
+          <div className='col-span-2 break-all text-2xs'>
+            {provider.clientID}
           </div>
-          <div className='flex flex-row items-center'>
-            <div className='w-1/3 text-2xs text-gray-400'>URL</div>
-            <div className='text-2xs'>{provider.url}</div>
+          <div className='col-span-1 text-2xs text-gray-400'>Added</div>
+          <div className='col-span-2 text-2xs'>
+            {provider?.created ? dayjs(provider.created).fromNow() : '-'}
           </div>
-          <div className='flex flex-row items-center'>
-            <div className='w-1/3 text-2xs text-gray-400'>Client ID</div>
-            <div className='text-2xs'>{provider.clientID}</div>
-          </div>
-          <div className='flex flex-row items-center'>
-            <div className='w-1/3 text-2xs text-gray-400'>Added</div>
-            <div className='text-2xs'>
-              {provider?.created ? dayjs(provider.created).fromNow() : '-'}
-            </div>
-          </div>
-          <div className='flex flex-row items-center'>
-            <div className='w-1/3 text-2xs text-gray-400'>Updated</div>
-            <div className='text-2xs'>
-              {provider.updated ? dayjs(provider.updated).fromNow() : '-'}
-            </div>
+          <div className='col-span-1 text-2xs text-gray-400'>Updated</div>
+          <div className='col-span-2 text-2xs'>
+            {provider.updated ? dayjs(provider.updated).fromNow() : '-'}
           </div>
         </div>
       </section>
@@ -178,7 +170,7 @@ export default function Providers() {
           </div>
           {selected && (
             <Sidebar
-              handleClose={() => setSelected(null)}
+              onClose={() => setSelected(null)}
               title={selected.name}
               iconPath='/providers.svg'
             >

diff --git a/ui/pages/users/index.js b/ui/pages/users/index.js
@@ -247,7 +247,7 @@ export default function Users() {
           </div>
           {selected && (
             <Sidebar
-              handleClose={() => setSelected(null)}
+              onClose={() => setSelected(null)}
               title={selected.name}
               profileIcon={selected.name[0]}
             >