Field Populator: Dialog UI and validations [MAPS-104] (#10296)

* adding sidebar UI + tests

* adding first version of the Dialog location + tests

* adding validations

* removing unused imports

* fix after rebase

* fixing pr comments

Author: FBanfi

apps/field-populator/package.json

@@ -5,6 +5,7 @@
   "dependencies": {
     "@contentful/app-sdk": "4.25.0",
     "@contentful/f36-components": "5.6.0",
+    "@contentful/f36-multiselect": "^5.6.0",
     "@contentful/f36-tokens": "5.1.0",
     "@contentful/react-apps-toolkit": "1.2.16",
     "@testing-library/jest-dom": "^6.9.1",

apps/field-populator/src/components/LocaleMultiSelect.styles.ts

@@ -0,0 +1,10 @@
+import { css } from 'emotion';
+import tokens from '@contentful/f36-tokens';
+
+export const styles = {
+  invalid: css`
+    button {
+      border-color: ${tokens.red600};
+    }
+  `,
+};

apps/field-populator/src/components/LocaleMultiSelect.tsx

@@ -0,0 +1,87 @@
+import React, { useState } from 'react';
+import { Box, Stack, Pill } from '@contentful/f36-components';
+import { Multiselect } from '@contentful/f36-multiselect';
+import { normalizeLocaleCode, SimplifiedLocale } from '../utils/locales';
+import { styles } from './LocaleMultiSelect.styles';
+
+interface LocaleMultiSelectProps {
+  availableLocales: SimplifiedLocale[];
+  selectedLocales: SimplifiedLocale[];
+  onSelectionChange: (locales: SimplifiedLocale[]) => void;
+  isDisabled?: boolean;
+  isInvalid?: boolean;
+}
+
+const LocaleMultiSelect: React.FC<LocaleMultiSelectProps> = ({
+  availableLocales,
+  selectedLocales,
+  onSelectionChange,
+  isDisabled = false,
+  isInvalid = false,
+}) => {
+  const [filteredLocales, setFilteredLocales] = useState<SimplifiedLocale[]>(availableLocales);
+
+  const handleSearchValueChange = (event: { target: { value: string } }) => {
+    const value = event.target.value;
+    const newFilteredLocales = availableLocales.filter((locale) =>
+      locale.name.toLowerCase().includes(value.toLowerCase())
+    );
+    setFilteredLocales(newFilteredLocales);
+  };
+
+  const handleLocaleToggle = (locale: SimplifiedLocale, checked: boolean) => {
+    if (checked) {
+      onSelectionChange([...selectedLocales, locale]);
+    } else {
+      onSelectionChange(selectedLocales.filter((l) => l.code !== locale.code));
+    }
+  };
+
+  const handleLocaleRemove = (localeCode: string) => {
+    onSelectionChange(selectedLocales.filter((l) => l.code !== localeCode));
+  };
+
+  return (
+    <Stack marginTop="spacingXs" flexDirection="column" alignItems="start">
+      <Multiselect
+        className={isInvalid ? styles.invalid : undefined}
+        searchProps={{
+          searchPlaceholder: 'Search locales',
+          onSearchValueChange: handleSearchValueChange,
+        }}
+        placeholder="Select one or more"
+        popoverProps={{ isFullWidth: true, listMaxHeight: 110 }}
+        currentSelection={selectedLocales.map((l) => l.name)}
+        triggerButtonProps={{ isDisabled }}>
+        {filteredLocales.map((locale) => (
+          <Multiselect.Option
+            key={`multiselect-locale-${normalizeLocaleCode(locale.code)}`}
+            itemId={`multiselect-locale-${normalizeLocaleCode(locale.code)}`}
+            value={locale.code}
+            isChecked={selectedLocales.some((l) => l.code === locale.code)}
+            onSelectItem={(e) => handleLocaleToggle(locale, e.target.checked)}>
+            {locale.name}
+          </Multiselect.Option>
+        ))}
+      </Multiselect>
+
+      {selectedLocales.length > 0 && (
+        <Box width="full" overflow="auto">
+          <Stack flexDirection="row" spacing="spacing2Xs" flexWrap="wrap">
+            {selectedLocales.map((locale) => (
+              <Pill
+                key={locale.code}
+                testId={`pill-locale-${normalizeLocaleCode(locale.code)}`}
+                label={locale.name}
+                isDraggable={false}
+                onClose={() => handleLocaleRemove(locale.code)}
+              />
+            ))}
+          </Stack>
+        </Box>
+      )}
+    </Stack>
+  );
+};
+
+export default LocaleMultiSelect;

apps/field-populator/src/locations/Dialog.styles.ts

@@ -0,0 +1,7 @@
+import { css } from 'emotion';
+
+export const styles = {
+  container: css({
+    minHeight: '340px',
+  }),
+};

apps/field-populator/src/locations/Dialog.tsx

@@ -1,11 +1,101 @@
 import { DialogAppSDK } from '@contentful/app-sdk';
-import { Paragraph } from '@contentful/f36-components';
-import { /* useCMA, */ useSDK } from '@contentful/react-apps-toolkit';
+import { Button, Flex, Form, FormControl, Select } from '@contentful/f36-components';
+import { useAutoResizer, useSDK } from '@contentful/react-apps-toolkit';
+import { useState } from 'react';
+import LocaleMultiSelect from '../components/LocaleMultiSelect';
+import {
+  SimplifiedLocale,
+  mapLocaleNamesToSimplifiedLocales,
+  normalizeLocaleCode,
+} from '../utils/locales';
+import { styles } from './Dialog.styles';
 
 const Dialog = () => {
   const sdk = useSDK<DialogAppSDK>();
+  const [selectedSourceLocale, setSelectedSourceLocale] = useState<string | null>(null);
+  const [selectedTargetLocales, setSelectedTargetLocales] = useState<SimplifiedLocale[]>([]);
+  const [missingSourceLocale, setMissingSourceLocale] = useState(false);
+  const [missingTargetLocales, setMissingTargetLocales] = useState(false);
 
-  return <Paragraph>Hello Dialog Component (AppId: {sdk.ids.app})</Paragraph>;
+  const mappedLocales = mapLocaleNamesToSimplifiedLocales(sdk.locales.names);
+
+  useAutoResizer();
+
+  const handlePopulateFields = () => {
+    if (!selectedSourceLocale || selectedTargetLocales.length === 0) {
+      setMissingSourceLocale(!selectedSourceLocale);
+      setMissingTargetLocales(selectedTargetLocales.length === 0);
+      return;
+    }
+
+    // todo : copy and paste logic to populate fields
+
+    sdk.close();
+  };
+
+  return (
+    <Form>
+      <Flex
+        flexDirection="column"
+        justifyContent="space-between"
+        marginTop="spacingM"
+        marginRight="spacingL"
+        marginLeft="spacingL"
+        marginBottom="spacingM"
+        className={styles.container}>
+        <Flex flexDirection="column">
+          <FormControl isRequired isInvalid={missingSourceLocale}>
+            <FormControl.Label>Select source locale</FormControl.Label>
+            <Select
+              id="source-locale"
+              name="source-locale"
+              testId="source-locale-select"
+              onChange={(event) => setSelectedSourceLocale(event.target.value)}>
+              {!selectedSourceLocale && (
+                <Select.Option key={`select-locale-empty`} value={undefined}>
+                  Select one
+                </Select.Option>
+              )}
+              {mappedLocales.map((locale) => (
+                <Select.Option
+                  key={`select-locale-${normalizeLocaleCode(locale.code)}`}
+                  data-test-id={`select-locale-${normalizeLocaleCode(locale.code)}`}
+                  value={locale.code}>
+                  {locale.name}
+                </Select.Option>
+              ))}
+            </Select>
+            {missingSourceLocale && (
+              <FormControl.ValidationMessage>Select source locale</FormControl.ValidationMessage>
+            )}
+          </FormControl>
+          <FormControl isRequired isInvalid={missingTargetLocales}>
+            <FormControl.Label>Select target locales to populate</FormControl.Label>
+            <LocaleMultiSelect
+              availableLocales={mappedLocales}
+              selectedLocales={selectedTargetLocales}
+              onSelectionChange={setSelectedTargetLocales}
+              isInvalid={missingTargetLocales}
+            />
+            {missingTargetLocales && (
+              <FormControl.ValidationMessage>Select target locales</FormControl.ValidationMessage>
+            )}
+          </FormControl>
+        </Flex>
+        <Flex justifyContent="flex-end" gap="spacingM">
+          <Button
+            onClick={() => {
+              sdk.close();
+            }}>
+            Cancel
+          </Button>
+          <Button variant="primary" onClick={() => handlePopulateFields()}>
+            Populate fields
+          </Button>
+        </Flex>
+      </Flex>
+    </Form>
+  );
 };
 
 export default Dialog;

apps/field-populator/src/locations/Sidebar.tsx

@@ -11,6 +11,8 @@ const Sidebar = () => {
   const openDialog = async () => {
     return sdk.dialogs.openCurrentApp({
       title: APP_NAME,
+      width: 'large',
+      minHeight: '340px',
     });
   };
 

apps/field-populator/src/utils/locales.ts

@@ -0,0 +1,14 @@
+export type SimplifiedLocale = { code: string; name: string };
+
+export const mapLocaleNamesToSimplifiedLocales = (
+  localeNames: Record<string, string>
+): SimplifiedLocale[] => {
+  return Object.keys(localeNames).map((key) => ({
+    code: key,
+    name: localeNames[key],
+  }));
+};
+
+export const normalizeLocaleCode = (code: string) => {
+  return code.toLowerCase().replace(/\s/g, '-');
+};