move account ui user profile to shared

js/apps/account-ui/src/personal-info/PersonalInfo.tsx

@@ -10,8 +10,12 @@ import { useKeycloak } from "keycloak-masthead";
 import { useState } from "react";
 import { FormProvider, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
-import { useAlerts } from "ui-shared";
-import { getPersonalInfo, savePersonalInfo } from "../api/methods";
+import { UserProfileFields, useAlerts } from "ui-shared";
+import {
+  getPersonalInfo,
+  getSupportedLocales,
+  savePersonalInfo,
+} from "../api/methods";
 import {
   UserProfileMetadata,
   UserRepresentation,
@@ -20,7 +24,6 @@ import { Page } from "../components/page/Page";
 import { environment } from "../environment";
 import { TFuncKey } from "../i18n";
 import { usePromise } from "../utils/usePromise";
-import { UserProfileFields } from "./UserProfileFields";
 
 type FieldError = {
   field: string;
@@ -41,14 +44,20 @@ const PersonalInfo = () => {
   const keycloak = useKeycloak();
   const [userProfileMetadata, setUserProfileMetadata] =
     useState<UserProfileMetadata>();
+  const [supportedLocales, setSupportedLocales] = useState<string[]>([]);
   const form = useForm<UserRepresentation>({ mode: "onChange" });
   const { handleSubmit, reset, setError } = form;
   const { addAlert, addError } = useAlerts();
 
   usePromise(
-    (signal) => getPersonalInfo({ signal }),
-    (personalInfo) => {
+    (signal) =>
+      Promise.all([
+        getPersonalInfo({ signal }),
+        getSupportedLocales({ signal }),
+      ]),
+    ([personalInfo, supportedLocales]) => {
       setUserProfileMetadata(personalInfo.userProfileMetadata);
+      setSupportedLocales(supportedLocales);
       reset(personalInfo);
     },
   );
@@ -85,7 +94,11 @@ const PersonalInfo = () => {
     <Page title={t("personalInfo")} description={t("personalInfoDescription")}>
       <Form isHorizontal onSubmit={handleSubmit(onSubmit)}>
         <FormProvider {...form}>
-          <UserProfileFields metaData={userProfileMetadata} />
+          <UserProfileFields
+            metaData={userProfileMetadata}
+            supportedLocales={supportedLocales}
+            t={(key: TFuncKey) => t(key)}
+          />
         </FormProvider>
         <ActionGroup>
           <Button

js/libs/ui-shared/src/main.ts

@@ -14,3 +14,4 @@ export { useStoredState } from "./utils/useStoredState";
 export { isDefined } from "./utils/isDefined";
 export { createNamedContext } from "./utils/createNamedContext";
 export { useRequiredContext } from "./utils/useRequiredContext";
+export { UserProfileFields } from "./user-profile/UserProfileFields";

js/libs/ui-shared/src/user-profile/LocaleSelector.tsx

@@ -0,0 +1,34 @@
+import { SelectControl } from "../controls/SelectControl";
+import { UserProfileFieldsProps } from "./UserProfileGroup";
+
+const localeToDisplayName = (locale: string) => {
+  try {
+    return new Intl.DisplayNames([locale], { type: "language" }).of(locale);
+  } catch (error) {
+    return locale;
+  }
+};
+
+type LocaleSelectorProps = UserProfileFieldsProps & {
+  supportedLocales: string[];
+};
+
+export const LocaleSelector = ({
+  t,
+  supportedLocales,
+}: LocaleSelectorProps) => {
+  const locales = supportedLocales.map((locale) => ({
+    key: locale,
+    value: localeToDisplayName(locale) || "",
+  }));
+
+  return (
+    <SelectControl
+      data-testid="locale-select"
+      name="attributes.locale"
+      label={t("selectALocale")}
+      controller={{ defaultValue: "" }}
+      options={locales}
+    />
+  );
+};

js/apps/account-ui/src/personal-info/components/OptionsComponent.tsx → js/libs/ui-shared/src/user-profile/OptionsComponent.tsx

@@ -1,17 +1,16 @@
 import { Checkbox, Radio } from "@patternfly/react-core";
 import { Controller, useFormContext } from "react-hook-form";
-import { UserProfileAttributeMetadata } from "../../api/representations";
-import { Options } from "../UserProfileFields";
-import { fieldName } from "../utils";
-import { UserProfileGroup } from "./UserProfileGroup";
+import { Options } from "./UserProfileFields";
+import { UserProfileFieldsProps, UserProfileGroup } from "./UserProfileGroup";
+import { fieldName } from "./utils";
 
-export const OptionComponent = (attr: UserProfileAttributeMetadata) => {
+export const OptionComponent = (attr: UserProfileFieldsProps) => {
   const { control } = useFormContext();
   const type = attr.annotations?.["inputType"] as string;
   const isMultiSelect = type.includes("multiselect");
   const Component = isMultiSelect ? Checkbox : Radio;
 
-  const options = (attr.validators.options as Options).options || [];
+  const options = (attr.validators?.options as Options).options || [];
 
   return (
     <UserProfileGroup {...attr}>
@@ -42,6 +41,7 @@ export const OptionComponent = (attr: UserProfileAttributeMetadata) => {
                     field.onChange([option]);
                   }
                 }}
+                readOnly={attr.readOnly}
               />
             ))}
           </>