feat: implement CRUD UI for IDP organization sync settings (#15503)

resolves coder/internal#205

The goal is to create a new page located in deployment settings to allow
users to create and update organization IDP sync settings.

- [x] Use shadcn button for export policy button
- [x] Disable save button if form is not dirty
- [x] Disable "Add IdP organization" button if idp org name or coder
orgs are empty
- [x] Add footnote label below organization sync field input
- [x] Add button to Delete rows in mapping table
- [x] Create Multi-select combox box component to select coder org to
map to idp org
- [x] Storybook tests
- [x] Tooltip for assign default org switch
- [x] Display success/error toast on form submission

<img width="1181" alt="Screenshot 2024-12-02 at 20 33 07"
src="https://github.com/user-attachments/assets/86877d3b-82ec-4ed2-b239-bf8497352a9e">

site/src/contexts/auth/permissions.tsx

@@ -21,6 +21,7 @@ export const checks = {
 	createGroup: "createGroup",
 	viewAllLicenses: "viewAllLicenses",
 	viewNotificationTemplate: "viewNotificationTemplate",
+	viewOrganizationIDPSyncSettings: "viewOrganizationIDPSyncSettings",
 } as const satisfies Record<string, string>;
 
 // Type expression seems a little redundant (`keyof typeof checks` has the same
@@ -152,6 +153,12 @@ export const permissionsToCheck = {
 		},
 		action: "read",
 	},
+	[checks.viewOrganizationIDPSyncSettings]: {
+		object: {
+			resource_type: "idpsync_settings",
+		},
+		action: "read",
+	},
 } as const satisfies Record<PermissionValue, AuthorizationCheck>;
 
 export type Permissions = Record<PermissionValue, boolean>;