Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Immediate apply on destructive language change #4049

Merged
merged 2 commits into from
Mar 27, 2024
Merged

Immediate apply on destructive language change #4049

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f31881a
Immediate apply on destructive language change
IniZio Mar 25, 2024
0a1c2f8
Use styles prop for manage language widget dropdown text
IniZio Mar 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 15 additions & 41 deletions portal/src/graphql/portal/LocalizationConfigurationScreen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ import { useResourceForm } from "../../hook/useResourceForm";
import FormContainer from "../../FormContainer";
import { useSystemConfig } from "../../context/SystemConfigContext";
import styles from "./LocalizationConfigurationScreen.module.css";
import ReplaceLanguagesConfirmationDialog from "./ReplaceLanguagesConfirmationDialog";
import { useDelayedSave } from "../../hook/useDelayedSave";

interface ConfigFormState {
supportedLanguages: string[];
Expand Down Expand Up @@ -216,6 +216,18 @@ const ResourcesConfigurationContent: React.VFC<ResourcesConfigurationContentProp
[setState]
);

const enqueueSave = useDelayedSave(props.form);
const onChangeAndSaveLanguages = useCallback(
async (
supportedLanguages: LanguageTag[],
fallbackLanguage: LanguageTag
) => {
onChangeLanguages(supportedLanguages, fallbackLanguage);
enqueueSave();
},
[enqueueSave, onChangeLanguages]
);

const [selectedKey, setSelectedKey] = useState<string>(PIVOT_KEY_DEFAULT);
const onLinkClick = useCallback((item?: PivotItem) => {
const itemKey = item?.props.itemKey;
Expand Down Expand Up @@ -805,6 +817,7 @@ const ResourcesConfigurationContent: React.VFC<ResourcesConfigurationContentProp
fallbackLanguage={state.fallbackLanguage}
onChangeSelectedLanguage={setSelectedLanguage}
onChangeLanguages={onChangeLanguages}
onChangeAndSaveLanguages={onChangeAndSaveLanguages}
/>
</div>
<ScreenDescription className={styles.widget}>
Expand Down Expand Up @@ -971,21 +984,6 @@ const LocalizationConfigurationScreen: React.VFC =
]
);

const allExistingLanguageAreRemoved = useMemo(() => {
return initialSupportedLanguages.every(
(locale) => !state.supportedLanguages.includes(locale)
);
}, [initialSupportedLanguages, state.supportedLanguages]);

const [
isClearLocalizationConfirmationDialogVisible,
setIsClearLocalizationConfirmationDialogVisible,
] = useState(false);

const dismissClearLocalizationConfirmationDialog = useCallback(() => {
setIsClearLocalizationConfirmationDialogVisible(false);
}, []);

const form: FormModel = useMemo(
() => ({
isLoading: config.isLoading || resources.isLoading,
Expand Down Expand Up @@ -1020,25 +1018,6 @@ const LocalizationConfigurationScreen: React.VFC =
[config, resources, state]
);

const confirmFormSave = useCallback(async () => {
if (allExistingLanguageAreRemoved) {
setIsClearLocalizationConfirmationDialogVisible(true);
return;
}

await form.save();
}, [allExistingLanguageAreRemoved, form]);

const doFormSave = useCallback(async () => {
dismissClearLocalizationConfirmationDialog();
await form.save();
}, [dismissClearLocalizationConfirmationDialog, form]);

const formWithConfirmation = {
...form,
save: confirmFormSave,
};

if (form.isLoading) {
return <ShowLoading />;
}
Expand All @@ -1048,7 +1027,7 @@ const LocalizationConfigurationScreen: React.VFC =
}

return (
<FormContainer form={formWithConfirmation} canSave={true}>
<FormContainer form={form} canSave={true}>
<ResourcesConfigurationContent
form={form}
initialSupportedLanguages={initialSupportedLanguages}
Expand All @@ -1057,11 +1036,6 @@ const LocalizationConfigurationScreen: React.VFC =
passwordlessViaEmailOTPMode={passwordlessViaEmailOTPMode}
verificationEnabled={verificationEnabled}
/>
<ReplaceLanguagesConfirmationDialog
visible={isClearLocalizationConfirmationDialogVisible}
onDismiss={dismissClearLocalizationConfirmationDialog}
onConfirm={doFormSave}
/>
</FormContainer>
);
};
Expand Down
142 changes: 98 additions & 44 deletions portal/src/graphql/portal/ManageLanguageWidget.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@ import {
List,
Text,
IRenderFunction,
IDropdownStyles,
} from "@fluentui/react";
import { Context, FormattedMessage } from "@oursky/react-messageformat";

Expand All @@ -32,6 +31,7 @@ import styles from "./ManageLanguageWidget.module.css";
import PrimaryButton from "../../PrimaryButton";
import DefaultButton from "../../DefaultButton";
import LinkButton from "../../LinkButton";
import ReplaceLanguagesConfirmationDialog from "./ReplaceLanguagesConfirmationDialog";

interface ManageLanguageWidgetProps {
className?: string;
Expand All @@ -51,6 +51,10 @@ interface ManageLanguageWidgetProps {
supportedLanguages: LanguageTag[],
fallbackLanguage: LanguageTag
) => void;
onChangeAndSaveLanguages: (
supportedLanguages: LanguageTag[],
fallbackLanguage: LanguageTag
) => void;
}

interface ManageLanguageWidgetDialogProps {
Expand All @@ -63,6 +67,10 @@ interface ManageLanguageWidgetDialogProps {
supportedLanguages: LanguageTag[],
fallbackLanguage: LanguageTag
) => void;
onChangeAndSaveLanguages: (
supportedLanguages: LanguageTag[],
fallbackLanguage: LanguageTag
) => void;
}

interface CellProps {
Expand Down Expand Up @@ -129,20 +137,16 @@ const Cell: React.VFC<CellProps> = function Cell(props: CellProps) {
);
};

const dropdownStyles: Partial<IDropdownStyles> = {
dropdownItemDisabled: {
fontStyle: "italic",
},
};

const ManageLanguageWidgetDialog: React.VFC<ManageLanguageWidgetDialogProps> =
function ManageLanguageWidgetDialog(props: ManageLanguageWidgetDialogProps) {
const {
presented,
onDismiss,
fallbackLanguage,
existingLanguages,
supportedLanguages,
onChangeLanguages,
onChangeAndSaveLanguages,
} = props;

const { renderToString } = useContext(Context);
Expand Down Expand Up @@ -170,6 +174,21 @@ const ManageLanguageWidgetDialog: React.VFC<ManageLanguageWidgetDialogProps> =
return search(searchString);
}, [search, searchString]);

const [
isClearLocalizationConfirmationDialogVisible,
setIsClearLocalizationConfirmationDialogVisible,
] = useState(false);

const dismissClearLocalizationConfirmationDialog = useCallback(() => {
setIsClearLocalizationConfirmationDialogVisible(false);
}, []);

const allExistingLanguageAreRemoved = useMemo(() => {
return existingLanguages.every(
(locale) => !newSupportedLanguages.includes(locale)
);
}, [existingLanguages, newSupportedLanguages]);

const onSearch = useCallback((_e, value?: string) => {
if (value == null) {
return;
Expand Down Expand Up @@ -238,15 +257,33 @@ const ManageLanguageWidgetDialog: React.VFC<ManageLanguageWidgetDialogProps> =
}, [onDismiss]);

const onApplyClick = useCallback(() => {
if (allExistingLanguageAreRemoved) {
setIsClearLocalizationConfirmationDialogVisible(true);
return;
}

onChangeLanguages(newSupportedLanguages, newFallbackLanguage);
onDismiss();
}, [
allExistingLanguageAreRemoved,
onChangeLanguages,
newSupportedLanguages,
newFallbackLanguage,
onDismiss,
]);

const onConfirmReplaceLanguages = useCallback(() => {
onChangeAndSaveLanguages(newSupportedLanguages, newFallbackLanguage);
dismissClearLocalizationConfirmationDialog();
onDismiss();
}, [
onChangeAndSaveLanguages,
newSupportedLanguages,
newFallbackLanguage,
dismissClearLocalizationConfirmationDialog,
onDismiss,
]);

const modalProps = useMemo<IDialogProps["modalProps"]>(() => {
return {
isBlocking: true,
Expand All @@ -259,42 +296,49 @@ const ManageLanguageWidgetDialog: React.VFC<ManageLanguageWidgetDialogProps> =
}, [supportedLanguages, fallbackLanguage]);

return (
<Dialog
hidden={!presented}
onDismiss={onCancel}
title={
<FormattedMessage id="ManageLanguageWidget.add-or-remove-languages" />
}
modalProps={modalProps}
styles={DIALOG_STYLES}
>
<Text className={styles.dialogDesc}>
<FormattedMessage id="ManageLanguageWidget.default-language-description" />
</Text>
<SearchBox
className={styles.searchBox}
placeholder={renderToString("search")}
value={searchString}
onChange={onSearch}
onClear={onClear}
/>
<Text variant="small" className={styles.dialogColumnHeader}>
<FormattedMessage id="ManageLanguageWidget.languages" />
</Text>
<div className={styles.dialogListWrapper}>
<List items={listItems} onRenderCell={renderLocaleListItemCell} />
</div>
<DialogFooter>
<PrimaryButton
onClick={onApplyClick}
text={<FormattedMessage id="apply" />}
/>
<DefaultButton
onClick={onCancel}
text={<FormattedMessage id="cancel" />}
<>
<Dialog
hidden={!presented}
onDismiss={onCancel}
title={
<FormattedMessage id="ManageLanguageWidget.add-or-remove-languages" />
}
modalProps={modalProps}
styles={DIALOG_STYLES}
>
<Text className={styles.dialogDesc}>
<FormattedMessage id="ManageLanguageWidget.default-language-description" />
</Text>
<SearchBox
className={styles.searchBox}
placeholder={renderToString("search")}
value={searchString}
onChange={onSearch}
onClear={onClear}
/>
</DialogFooter>
</Dialog>
<Text variant="small" className={styles.dialogColumnHeader}>
<FormattedMessage id="ManageLanguageWidget.languages" />
</Text>
<div className={styles.dialogListWrapper}>
<List items={listItems} onRenderCell={renderLocaleListItemCell} />
</div>
<DialogFooter>
<PrimaryButton
onClick={onApplyClick}
text={<FormattedMessage id="apply" />}
/>
<DefaultButton
onClick={onCancel}
text={<FormattedMessage id="cancel" />}
/>
</DialogFooter>
</Dialog>
<ReplaceLanguagesConfirmationDialog
visible={isClearLocalizationConfirmationDialogVisible}
onDismiss={dismissClearLocalizationConfirmationDialog}
onConfirm={onConfirmReplaceLanguages}
/>
</>
);
};

Expand All @@ -308,6 +352,7 @@ const ManageLanguageWidget: React.VFC<ManageLanguageWidgetProps> =
onChangeSelectedLanguage,
fallbackLanguage,
onChangeLanguages,
onChangeAndSaveLanguages,
} = props;

const { renderToString } = useContext(Context);
Expand Down Expand Up @@ -388,7 +433,16 @@ const ManageLanguageWidget: React.VFC<ManageLanguageWidgetProps> =
const onRenderOption: IRenderFunction<IDropdownOption> = useCallback(
(option?: IDropdownOption) => {
return (
<Text>
<Text
styles={(_, theme) => ({
root: option?.disabled
? {
fontStyle: "italic",
color: theme.semanticColors.disabledText,
}
: undefined,
})}
>
<FormattedMessage
id="ManageLanguageWidget.language-label"
values={{
Expand Down Expand Up @@ -429,6 +483,7 @@ const ManageLanguageWidget: React.VFC<ManageLanguageWidgetProps> =
supportedLanguages={supportedLanguages}
fallbackLanguage={fallbackLanguage}
onChangeLanguages={onChangeLanguages}
onChangeAndSaveLanguages={onChangeAndSaveLanguages}
/>
<div className={cn(className, styles.root)}>
<div className={styles.container}>
Expand All @@ -439,7 +494,6 @@ const ManageLanguageWidget: React.VFC<ManageLanguageWidgetProps> =
<Dropdown
id="language-widget"
className={styles.dropdown}
styles={dropdownStyles}
options={templateLocaleOptions}
onChange={onChangeTemplateLocale}
selectedKey={selectedLanguage}
Expand Down
Loading
Loading