🪟 🎉 Allow setting organization name (#8396)

airbyte-webapp/src/core/api/hooks/organizations.ts

@@ -1,6 +1,9 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+
 import { SCOPE_USER } from "services/Scope";
 
-import { getOrganization } from "../generated/AirbyteClient";
+import { getOrganization, updateOrganization } from "../generated/AirbyteClient";
+import { OrganizationUpdateRequestBody } from "../generated/AirbyteClient.schemas";
 import { useRequestOptions } from "../useRequestOptions";
 import { useSuspenseQuery } from "../useSuspenseQuery";
 
@@ -15,3 +18,17 @@ export const useOrganization = (organizationId: string) => {
     getOrganization({ organizationId }, requestOptions)
   );
 };
+
+export const useUpdateOrganization = () => {
+  const requestOptions = useRequestOptions();
+  const queryClient = useQueryClient();
+
+  return useMutation(
+    (organization: OrganizationUpdateRequestBody) => updateOrganization(organization, requestOptions),
+    {
+      onSuccess: (data) => {
+        queryClient.setQueryData(organizationKeys.detail(data.organizationId), data);
+      },
+    }
+  );
+};

airbyte-webapp/src/locales/en.json

@@ -674,6 +674,7 @@
   "settings.workspaceSettings.deleteLabel": "Delete your workspace",
   "settings.generalSettings": "General Settings",
   "settings.organizationSettings": "Organization settings",
+  "settings.organizationSettings.organizationName": "Organization name",
   "settings.accountSettings": "Account Settings",
   "settings.accountSettings.logoutText": "Sign out",
   "settings.webhook": "Connection status Webhook",

airbyte-webapp/src/pages/SettingsPage/GeneralOrganizationSettingsPage.tsx

@@ -1,25 +1,83 @@
-import { FormattedMessage } from "react-intl";
+import React, { useEffect } from "react";
+import { FormattedMessage, useIntl } from "react-intl";
+import * as yup from "yup";
+import { AnySchema } from "yup";
 
+import { Form, FormControl } from "components/forms";
+import { FormSubmissionButtons } from "components/forms/FormSubmissionButtons";
 import { Box } from "components/ui/Box";
 import { Card } from "components/ui/Card";
-import { Text } from "components/ui/Text";
 
-import { useCurrentWorkspace } from "core/api";
+import { useCurrentWorkspace, useUpdateOrganization } from "core/api";
 import { useOrganization } from "core/api";
+import { OrganizationUpdateRequestBody } from "core/request/AirbyteClient";
+import { useNotificationService } from "hooks/services/Notification";
+
+const ORGANIZATION_UPDATE_NOTIFICATION_ID = "organization-update-notification";
+
+const organizationValidationSchema = yup.object().shape<Record<keyof OrganizationFormValues, AnySchema>>({
+  organizationName: yup.string().trim().required("form.empty.error"),
+});
+
+type OrganizationFormValues = Pick<OrganizationUpdateRequestBody, "organizationName">;
 
 export const GeneralOrganizationSettingsPage: React.FC = () => {
   const { organizationId } = useCurrentWorkspace();
 
   return (
     <Card title={<FormattedMessage id="settings.generalSettings" />}>
-      <Box p="xl">{organizationId && <Organization organizationId={organizationId} />}</Box>
+      <Box p="xl">{organizationId && <OrganizationSettingsForm organizationId={organizationId} />}</Box>
     </Card>
   );
 };
 
-const Organization = ({ organizationId }: { organizationId: string }) => {
+const OrganizationSettingsForm = ({ organizationId }: { organizationId: string }) => {
   const organization = useOrganization(organizationId);
+  const { mutateAsync: updateOrganization } = useUpdateOrganization();
+
+  const { formatMessage } = useIntl();
+  const { registerNotification, unregisterNotificationById } = useNotificationService();
+
+  const onSubmit = async (values: OrganizationFormValues) => {
+    await updateOrganization({
+      organizationId,
+      ...values,
+    });
+  };
 
-  // Placeholder for organization information and settings
-  return <Text>{organization.organizationName}</Text>;
+  useEffect(
+    () => () => {
+      unregisterNotificationById(ORGANIZATION_UPDATE_NOTIFICATION_ID);
+    },
+    [unregisterNotificationById]
+  );
+
+  return (
+    <Form<OrganizationFormValues>
+      onSubmit={onSubmit}
+      onSuccess={() => {
+        registerNotification({
+          id: ORGANIZATION_UPDATE_NOTIFICATION_ID,
+          text: formatMessage({ id: "form.changesSaved" }),
+          type: "success",
+        });
+      }}
+      onError={() => {
+        registerNotification({
+          id: ORGANIZATION_UPDATE_NOTIFICATION_ID,
+          text: formatMessage({ id: "form.someError" }),
+          type: "error",
+        });
+      }}
+      schema={organizationValidationSchema}
+      defaultValues={{ organizationName: organization.organizationName }}
+    >
+      <FormControl<OrganizationFormValues>
+        label={formatMessage({ id: "settings.organizationSettings.organizationName" })}
+        fieldType="input"
+        name="organizationName"
+      />
+      <FormSubmissionButtons submitKey="form.saveChanges" />
+    </Form>
+  );
 };