From 85b684c00e131296b80a64af8de71b2595ab3584 Mon Sep 17 00:00:00 2001
From: Marcin Maciaszczyk <marcin9yk@icloud.com>
Date: Tue, 22 Oct 2024 10:39:55 +0200
Subject: [PATCH] enhancement: OIDC styling improvements (#1383)

---
 .../plural-cloud/EditPluralOIDCClient.tsx     | 354 +++++++++---------
 .../plural-cloud/EditPluralOIDCClients.tsx    |   4 +-
 2 files changed, 184 insertions(+), 174 deletions(-)

diff --git a/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClient.tsx b/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClient.tsx
index 97426eb70..1a309b738 100644
--- a/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClient.tsx
+++ b/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClient.tsx
@@ -4,6 +4,7 @@ import {
   Chip,
   Codeline,
   Divider,
+  FillLevelProvider,
   FormField,
   Input,
   ListBoxItem,
@@ -189,202 +190,209 @@ function EditPluralOIDCClient({
     provider?.clientSecret ?? data?.createOidcProvider?.clientSecret
 
   return (
-    <div
-      css={{
-        display: 'flex',
-        flexDirection: 'column',
-        gap: theme.spacing.xlarge,
-        overflow: 'hidden',
-      }}
-    >
+    <FillLevelProvider value={0}>
       <div
         css={{
           display: 'flex',
           flexDirection: 'column',
-          gap: theme.spacing.small,
-          overflow: 'auto',
+          gap: theme.spacing.xlarge,
+          overflow: 'hidden',
         }}
       >
-        <FormField label="Client ID">
-          <Codeline
-            displayText={
-              clientId ?? 'A client ID will be generated upon creation'
-            }
-          >
-            {clientId}
-          </Codeline>
-        </FormField>
-        <FormField label="Client secret">
-          <Codeline
-            displayText={
-              clientSecret
-                ? '•••••••••••••••••••••'
-                : 'A client secret will be generated upon creation'
-            }
-          >
-            {clientSecret}
-          </Codeline>
-        </FormField>
-        {!data && (
-          <>
-            <Divider
-              backgroundColor="border-fill-two"
-              marginTop="medium"
-              marginBottom="medium"
-            />
-            <FormField
-              label="Name"
-              required
-            >
-              <Input
-                autoFocus
-                value={name}
-                onChange={({ target: { value } }) => setName(value)}
-              />
-            </FormField>
-            <FormField label="Description">
-              <Input
-                value={description}
-                onChange={({ target: { value } }) => setDescription(value)}
-              />
-            </FormField>
-            <BindingInput
-              label="User bindings"
-              placeholder="Search for user"
-              bindings={bindings
-                .filter(({ user }) => !!user)
-                .map(({ user }) => user?.email)}
-              fetcher={fetchUsers}
-              add={(user) => setBindings([...bindings, { user }])}
-              remove={(email) =>
-                setBindings(
-                  bindings.filter(({ user }) => !user || user.email !== email)
-                )
+        <div
+          css={{
+            display: 'flex',
+            flexDirection: 'column',
+            gap: theme.spacing.small,
+            overflow: 'auto',
+          }}
+        >
+          <FormField label="Client ID">
+            <Codeline
+              backgroundColor="fill-two"
+              displayText={
+                clientId ?? 'A client ID will be generated upon creation'
               }
-            />
-            <BindingInput
-              label="Group bindings"
-              placeholder="Search for group"
-              bindings={bindings
-                .filter(({ group }) => !!group)
-                .map(({ group: { name } }) => name)}
-              fetcher={fetchGroups}
-              add={(group) => setBindings([...bindings, { group }])}
-              remove={(name) =>
-                setBindings(
-                  bindings.filter(({ group }) => !group || group.name !== name)
-                )
+            >
+              {clientId}
+            </Codeline>
+          </FormField>
+          <FormField label="Client secret">
+            <Codeline
+              backgroundColor="fill-two"
+              displayText={
+                clientSecret
+                  ? '•••••••••••••••••••••'
+                  : 'A client secret will be generated upon creation'
               }
-            />
-            <FormField
-              label="Auth method"
-              required
             >
-              <Select
-                selectedKey={authMethod}
-                onSelectionChange={(v) => setAuthMethod(v as OidcAuthMethod)}
+              {clientSecret}
+            </Codeline>
+          </FormField>
+          {!data && (
+            <>
+              <Divider
+                backgroundColor="border-fill-two"
+                marginTop="medium"
+                marginBottom="medium"
+              />
+              <FormField
+                label="Name"
+                required
               >
-                <ListBoxItem
-                  key={OidcAuthMethod.Basic}
-                  label="Basic"
-                  textValue={OidcAuthMethod.Basic}
+                <Input
+                  autoFocus
+                  value={name}
+                  onChange={({ target: { value } }) => setName(value)}
                 />
-                <ListBoxItem
-                  key={OidcAuthMethod.Post}
-                  label="Post"
-                  textValue={OidcAuthMethod.Post}
+              </FormField>
+              <FormField label="Description">
+                <Input
+                  value={description}
+                  onChange={({ target: { value } }) => setDescription(value)}
                 />
-              </Select>
-            </FormField>
-            <FormField label="Redirect URIs">
-              <div
-                css={{
-                  display: 'flex',
-                  flexDirection: 'column',
-                  gap: theme.spacing.small,
-                }}
+              </FormField>
+              <BindingInput
+                label="User bindings"
+                placeholder="Search for user"
+                bindings={bindings
+                  .filter(({ user }) => !!user)
+                  .map(({ user }) => user?.email)}
+                fetcher={fetchUsers}
+                add={(user) => setBindings([...bindings, { user }])}
+                remove={(email) =>
+                  setBindings(
+                    bindings.filter(({ user }) => !user || user.email !== email)
+                  )
+                }
+              />
+              <BindingInput
+                label="Group bindings"
+                placeholder="Search for group"
+                bindings={bindings
+                  .filter(({ group }) => !!group)
+                  .map(({ group: { name } }) => name)}
+                fetcher={fetchGroups}
+                add={(group) => setBindings([...bindings, { group }])}
+                remove={(name) =>
+                  setBindings(
+                    bindings.filter(
+                      ({ group }) => !group || group.name !== name
+                    )
+                  )
+                }
+              />
+              <FormField
+                label="Auth method"
+                required
               >
-                <div css={{ display: 'flex' }}>
-                  <Input
-                    value={url}
-                    prefix={urlPrefix}
-                    suffix={urlSuffix}
-                    width="100%"
-                    placeholder="Enter a redirect URI"
-                    onChange={({ target: { value } }) => setUrl(value)}
+                <Select
+                  selectedKey={authMethod}
+                  onSelectionChange={(v) => setAuthMethod(v as OidcAuthMethod)}
+                >
+                  <ListBoxItem
+                    key={OidcAuthMethod.Basic}
+                    label="Basic"
+                    textValue={OidcAuthMethod.Basic}
                   />
-                  <Button
-                    onClick={addUrl}
-                    secondary
-                    marginLeft="small"
-                  >
-                    Add
-                  </Button>
-                </div>
+                  <ListBoxItem
+                    key={OidcAuthMethod.Post}
+                    label="Post"
+                    textValue={OidcAuthMethod.Post}
+                  />
+                </Select>
+              </FormField>
+              <FormField label="Redirect URIs">
                 <div
                   css={{
                     display: 'flex',
-                    flexWrap: 'wrap',
-                    gap: theme.spacing.xxsmall,
+                    flexDirection: 'column',
+                    gap: theme.spacing.small,
                   }}
                 >
-                  {redirectUris.map((url, i) => (
-                    <Chip
-                      key={i}
-                      size="small"
-                      clickable
-                      closeButton
-                      onClick={() => removeUrl(url)}
+                  <div css={{ display: 'flex' }}>
+                    <Input
+                      value={url}
+                      prefix={urlPrefix}
+                      suffix={urlSuffix}
+                      width="100%"
+                      placeholder="Enter a redirect URI"
+                      onChange={({ target: { value } }) => setUrl(value)}
+                    />
+                    <Button
+                      onClick={addUrl}
+                      secondary
+                      marginLeft="small"
                     >
-                      {url}
-                    </Chip>
-                  ))}
+                      Add
+                    </Button>
+                  </div>
+                  <div
+                    css={{
+                      display: 'flex',
+                      flexWrap: 'wrap',
+                      gap: theme.spacing.xxsmall,
+                    }}
+                  >
+                    {redirectUris.map((url, i) => (
+                      <Chip
+                        key={i}
+                        size="small"
+                        clickable
+                        closeButton
+                        onClick={() => removeUrl(url)}
+                        fillLevel={2}
+                      >
+                        {url}
+                      </Chip>
+                    ))}
+                  </div>
                 </div>
-              </div>
-            </FormField>
-          </>
+              </FormField>
+            </>
+          )}
+        </div>
+        {createError && (
+          <GqlError
+            error={createError}
+            header="Create OIDC provider request failed"
+          />
         )}
-      </div>
-      {createError && (
-        <GqlError
-          error={createError}
-          header="Create OIDC provider request failed"
-        />
-      )}
-      {updateError && (
-        <GqlError
-          error={updateError}
-          header="Update OIDC provider request failed"
-        />
-      )}
-      <div
-        css={{
-          display: 'flex',
-          justifyContent: 'end',
-          gap: theme.spacing.small,
-        }}
-      >
-        {!data ? (
-          <>
-            <Button
-              secondary
-              onClick={onClose}
-            >
-              Back to Plural OIDC clients
-            </Button>
-            <div css={{ flexGrow: 1 }} />
-            <Button
-              disabled={!name || !authMethod}
-              loading={creating || updating}
-              onClick={() => (createMode ? create() : update())}
-            >
-              {createMode ? 'Create' : 'Save'}
-            </Button>
-          </>
-        ) : (
-          <Button onClick={onClose}>Close</Button>
+        {updateError && (
+          <GqlError
+            error={updateError}
+            header="Update OIDC provider request failed"
+          />
         )}
+        <div
+          css={{
+            display: 'flex',
+            justifyContent: 'end',
+            gap: theme.spacing.small,
+          }}
+        >
+          {!data ? (
+            <>
+              <Button
+                secondary
+                onClick={onClose}
+              >
+                Back to Plural OIDC clients
+              </Button>
+              <div css={{ flexGrow: 1 }} />
+              <Button
+                disabled={!name || !authMethod}
+                loading={creating || updating}
+                onClick={() => (createMode ? create() : update())}
+              >
+                {createMode ? 'Create' : 'Save'}
+              </Button>
+            </>
+          ) : (
+            <Button onClick={onClose}>Close</Button>
+          )}
+        </div>
       </div>
-    </div>
+    </FillLevelProvider>
   )
 }
diff --git a/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClients.tsx b/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClients.tsx
index a372e5083..697ebef02 100644
--- a/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClients.tsx
+++ b/www/src/components/overview/clusters/plural-cloud/EditPluralOIDCClients.tsx
@@ -189,10 +189,12 @@ export function EditPluralOIDCClients({
     >
       {isEmpty(oidcProviders) ? (
         <EmptyState
-          message="No Plural OIDC clients found"
+          message="No Plural OIDC clients found."
           css={{
             backgroundColor: theme.colors['fill-one'],
+            color: theme.colors['text-light'],
             justifyContent: 'center',
+            p: { ...theme.partials.text.body2 },
           }}
         />
       ) : (