From 8e8e617d3312190344d38a20456f5ccaf2862360 Mon Sep 17 00:00:00 2001 From: Charlie Park Date: Mon, 21 Oct 2024 10:10:53 -0700 Subject: [PATCH 1/6] Reorder IDP create form elements --- app/forms/idp/create.tsx | 83 ++++++++++++++++++++++++---------------- 1 file changed, 51 insertions(+), 32 deletions(-) diff --git a/app/forms/idp/create.tsx b/app/forms/idp/create.tsx index 4fa8e10fa7..6026beb611 100644 --- a/app/forms/idp/create.tsx +++ b/app/forms/idp/create.tsx @@ -10,6 +10,7 @@ import { useNavigate } from 'react-router-dom' import { useApiMutation, useApiQueryClient } from '@oxide/api' +import { CheckboxField } from '~/components/form/fields/CheckboxField' import { DescriptionField } from '~/components/form/fields/DescriptionField' import { FileField } from '~/components/form/fields/FileField' import { NameField } from '~/components/form/fields/NameField' @@ -17,6 +18,7 @@ import { TextField } from '~/components/form/fields/TextField' import { SideModalForm } from '~/components/form/SideModalForm' import { useSiloSelector } from '~/hooks/use-params' import { addToast } from '~/stores/toast' +import { FormDivider } from '~/ui/lib/Divider' import { readBlobAsBase64 } from '~/util/file' import { pb } from '~/util/path-builder' @@ -59,6 +61,8 @@ export function CreateIdpSideModalForm() { }) const form = useForm({ defaultValues }) + const signedRequestsForm = useForm({ defaultValues: { signedRequests: false } }) + const signedRequests = signedRequestsForm.watch('signedRequests') return ( +

General

- {/* TODO: help text */} - - + + + +

Service provider

{/* TODO: help text */} - {/* TODO: Email field, probably */} - - {/* We don't bother validating that you have both of these or neither even + + Signed requests (optional) + + {signedRequests && ( + <> + {/* We don't bother validating that you have both of these or neither even though the API requires that because we are going to change the API to always require both, at which point these become simple `required` fields */} - - + + + )} + + + +

Identity Provider

+ {/* TODO: help text */} + + + ) } From 3a659fbdf9b7938e06c2e3635bc189fd558aa1e3 Mon Sep 17 00:00:00 2001 From: Charlie Park Date: Fri, 1 Nov 2024 16:29:40 -0700 Subject: [PATCH 2/6] Update edit form order --- app/forms/idp/edit.tsx | 39 ++++++++++++++++++++++++--------------- 1 file changed, 24 insertions(+), 15 deletions(-) diff --git a/app/forms/idp/edit.tsx b/app/forms/idp/edit.tsx index b51d1d9043..301dc96a77 100644 --- a/app/forms/idp/edit.tsx +++ b/app/forms/idp/edit.tsx @@ -17,6 +17,7 @@ import { TextField } from '~/components/form/fields/TextField' import { SideModalForm } from '~/components/form/SideModalForm' import { getIdpSelector, useIdpSelector } from '~/hooks/use-params' import { DateTime } from '~/ui/lib/DateTime' +import { FormDivider } from '~/ui/lib/Divider' import { PropertiesTable } from '~/ui/lib/PropertiesTable' import { ResourceLabel } from '~/ui/lib/SideModal' import { Truncate } from '~/ui/lib/Truncate' @@ -70,20 +71,32 @@ export function EditIdpSideModalForm() { +

General

+ + + +

Service provider

{/* TODO: help text */} + + + + +

Identity Provider

{/* TODO: help text */} - {/* TODO: Email field, probably */} - ) } From 8b37a168f423e16b2ae72e1c7f348b7eb4a86d48 Mon Sep 17 00:00:00 2001 From: Charlie Park Date: Mon, 4 Nov 2024 15:55:05 -0800 Subject: [PATCH 3/6] Add docs link for Identity Providers --- app/pages/system/silos/SiloPage.tsx | 7 ++++++- app/util/links.ts | 6 ++++++ 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/app/pages/system/silos/SiloPage.tsx b/app/pages/system/silos/SiloPage.tsx index db8bf4c64c..65a634a7dd 100644 --- a/app/pages/system/silos/SiloPage.tsx +++ b/app/pages/system/silos/SiloPage.tsx @@ -62,7 +62,12 @@ export function SiloPage() { heading="silos" icon={} summary="Silos provide strict tenancy separation between groups of users. Each silo has its own resource limits and access policies as well as its own subdomain for the web console and API." - links={[docLinks.systemSilo, docLinks.systemIpPools, docLinks.access]} + links={[ + docLinks.systemSilo, + docLinks.identityProviders, + docLinks.systemIpPools, + docLinks.access, + ]} /> diff --git a/app/util/links.ts b/app/util/links.ts index 48c88d5eed..ef5a5aec4f 100644 --- a/app/util/links.ts +++ b/app/util/links.ts @@ -19,6 +19,8 @@ export const links = { imagesDocs: 'https://docs.oxide.computer/guides/creating-and-sharing-images', preparingImagesDocs: 'https://docs.oxide.computer/guides/creating-and-sharing-images#_preparing_images_for_import', + identityProvidersDocs: + 'https://docs.oxide.computer/guides/system/completing-rack-config#_configure_silo_identity_provider', instanceActionsDocs: 'https://docs.oxide.computer/guides/managing-instances', // TODO: link to section instanceBootDiskDocs: 'https://docs.oxide.computer/guides/deploying-workloads', @@ -72,6 +74,10 @@ export const docLinks = { href: links.keyConceptsIamPolicyDocs, linkText: 'Key Concepts', }, + identityProviders: { + href: links.identityProvidersDocs, + linkText: 'Identity Providers', + }, images: { href: links.imagesDocs, linkText: 'Images', From 1dbb740a07036e98485e55e44b88c2a47d51a4e0 Mon Sep 17 00:00:00 2001 From: Charlie Park Date: Tue, 5 Nov 2024 15:43:48 -0800 Subject: [PATCH 4/6] Remove checkbox for Signed Requests --- app/forms/idp/create.tsx | 45 ++++++++++++++++------------------------ 1 file changed, 18 insertions(+), 27 deletions(-) diff --git a/app/forms/idp/create.tsx b/app/forms/idp/create.tsx index e2f5548b25..05c8b08934 100644 --- a/app/forms/idp/create.tsx +++ b/app/forms/idp/create.tsx @@ -10,7 +10,6 @@ import { useNavigate } from 'react-router-dom' import { useApiMutation, useApiQueryClient } from '@oxide/api' -import { CheckboxField } from '~/components/form/fields/CheckboxField' import { DescriptionField } from '~/components/form/fields/DescriptionField' import { FileField } from '~/components/form/fields/FileField' import { NameField } from '~/components/form/fields/NameField' @@ -62,8 +61,6 @@ export function CreateIdpSideModalForm() { }) const form = useForm({ defaultValues }) - const signedRequestsForm = useForm({ defaultValues: { signedRequests: false } }) - const signedRequests = signedRequestsForm.watch('signedRequests') return ( - - Signed requests (optional) - - {signedRequests && ( - <> - {/* We don't bother validating that you have both of these or neither even - though the API requires that because we are going to change the API to - always require both, at which point these become simple `required` fields */} - - - - )} + + {/* We don't bother validating that you have both of these or neither even + though the API requires that because we are going to change the API to + always require both, at which point these become simple `required` fields */} + + From 6e17d29239564d6c9c6ae4c639d9145eb81fa9cf Mon Sep 17 00:00:00 2001 From: Benjamin Leonard Date: Wed, 6 Nov 2024 16:47:10 +0000 Subject: [PATCH 5/6] Add side modal heading (#2533) * Add side modal heading * Remove commented input legend * very important mt-2 * cut one word to cut a whole line out of the targets info box --------- Co-authored-by: David Crespo --- app/forms/firewall-rules-common.tsx | 150 +++++++++++++++------------- app/ui/lib/SideModal.tsx | 2 + 2 files changed, 81 insertions(+), 71 deletions(-) diff --git a/app/forms/firewall-rules-common.tsx b/app/forms/firewall-rules-common.tsx index b0935c893b..da348ee214 100644 --- a/app/forms/firewall-rules-common.tsx +++ b/app/forms/firewall-rules-common.tsx @@ -36,8 +36,10 @@ import { useVpcSelector } from '~/hooks/use-params' import { Badge } from '~/ui/lib/Badge' import { toComboboxItems, type ComboboxItem } from '~/ui/lib/Combobox' import { FormDivider } from '~/ui/lib/Divider' +import { FieldLabel } from '~/ui/lib/FieldLabel' import { Message } from '~/ui/lib/Message' import * as MiniTable from '~/ui/lib/MiniTable' +import { SideModal } from '~/ui/lib/SideModal' import { TextInputHint } from '~/ui/lib/TextInput' import { KEYS } from '~/ui/util/keys' import { ALL_ISH } from '~/util/consts' @@ -415,46 +417,50 @@ export const CommonFields = ({ control, nameTaken, error }: CommonFieldsProps) = {/* Really this should be its own
, but you can't have a form inside a form, so we just stick the submit handler in a button onClick */} -
-

Targets

- + Targets + + +

Targets determine the instances to which this rule applies. You can target - instances directly by name, or specify a VPC, VPC subnet, IP, or IP subnet, - which will apply the rule to traffic going to all matching instances. Targets - are additive: the rule applies to instances matching{' '} + instances directly or specify a VPC, VPC subnet, IP, or IP subnet, which will + apply the rule to traffic going to all matching instances. +

+

+ Targets are additive: the rule applies to instances matching{' '} any target. - - } - /> - - targetForm.reset({ type: targetForm.getValues('type'), value: '' }) - } - onInputChange={(value) => targetForm.setValue('value', value)} - onSubmitTextField={submitTarget} - /> - targetForm.reset()} - onSubmit={submitTarget} - /> -

+

+ + } + /> + + + targetForm.reset({ type: targetForm.getValues('type'), value: '' }) + } + onInputChange={(value) => targetForm.setValue('value', value)} + onSubmitTextField={submitTarget} + /> + targetForm.reset()} + onSubmit={submitTarget} + /> {!!targets.value.length && } -

Filters

+ Filters
- {/* We have to blow this up instead of using TextField to get better + {/* We have to blow this up instead of using TextField to get better text styling on the label */}
- + A single destination port (1234) or a range (1234–2345) @@ -523,45 +529,47 @@ export const CommonFields = ({ control, nameTaken, error }: CommonFieldsProps) = )}
- Protocol filters + {/* todo: abstract this label and checkbox pattern */} + + Protocol filters +
-
-

Host filters

- - Host filters match the “other end” of traffic from the - target’s perspective: for an inbound rule, they match the source of - traffic. For an outbound rule, they match the destination. - - } - /> - - hostForm.reset({ type: hostForm.getValues('type'), value: '' }) - } - onInputChange={(value) => hostForm.setValue('value', value)} - onSubmitTextField={submitHost} - /> - hostForm.reset()} - onSubmit={submitHost} - /> -
+ + + Host filters + + + Host filters match the “other end” of traffic from the + target’s perspective: for an inbound rule, they match the source of + traffic. For an outbound rule, they match the destination. + + } + /> + hostForm.reset({ type: hostForm.getValues('type'), value: '' })} + onInputChange={(value) => hostForm.setValue('value', value)} + onSubmitTextField={submitHost} + /> + hostForm.reset()} + onSubmit={submitHost} + /> {!!hosts.value.length && } {error && ( diff --git a/app/ui/lib/SideModal.tsx b/app/ui/lib/SideModal.tsx index 63b1d89262..62d478c5e7 100644 --- a/app/ui/lib/SideModal.tsx +++ b/app/ui/lib/SideModal.tsx @@ -170,6 +170,8 @@ function SideModalBody({ children }: { children?: ReactNode }) { SideModal.Body = SideModalBody +SideModal.Heading = classed.div`text-sans-semi-xl` + SideModal.Section = classed.div`p-8 space-y-6 border-secondary` SideModal.Footer = ({ children, error }: { children: ReactNode; error?: boolean }) => ( From 6ec106ad55405e3746b93711c20b5d5945287579 Mon Sep 17 00:00:00 2001 From: David Crespo Date: Wed, 6 Nov 2024 10:57:06 -0600 Subject: [PATCH 6/6] change form section headings to SideModal.Heading, remove "General" --- app/forms/idp/create.tsx | 6 +++--- app/forms/idp/edit.tsx | 7 +++---- 2 files changed, 6 insertions(+), 7 deletions(-) diff --git a/app/forms/idp/create.tsx b/app/forms/idp/create.tsx index 05c8b08934..1d97d53ca6 100644 --- a/app/forms/idp/create.tsx +++ b/app/forms/idp/create.tsx @@ -19,6 +19,7 @@ import { HL } from '~/components/HL' import { useSiloSelector } from '~/hooks/use-params' import { addToast } from '~/stores/toast' import { FormDivider } from '~/ui/lib/Divider' +import { SideModal } from '~/ui/lib/SideModal' import { readBlobAsBase64 } from '~/util/file' import { pb } from '~/util/path-builder' @@ -107,7 +108,6 @@ export function CreateIdpSideModalForm() { submitError={createIdp.error} submitLabel="Create provider" > -

General

-

Service provider

+ Service provider {/* TODO: help text */} -

Identity Provider

+ Identity Provider {/* TODO: help text */} -

General

-

Service provider

+ Service provider {/* TODO: help text */} -

Identity Provider

+ Identity Provider {/* TODO: help text */}