Import configuration/mapping preview

src/features/import/components/Configure/Preview/FieldsPreview.tsx

@@ -0,0 +1,47 @@
+import globalMessageIds from 'core/i18n/globalMessageIds';
+import messageIds from 'features/import/l10n/messageIds';
+import PreviewGrid from './PreviewGrid';
+import useColumnOptions from 'features/import/hooks/useColumnOptions';
+import { useMessages } from 'core/i18n';
+import { useNumericRouteParams } from 'core/hooks';
+import { CellData, ColumnKind } from 'features/import/utils/types';
+
+interface FieldsPreviewProps {
+  fieldKey: string | null;
+  fields: Record<string, CellData> | undefined;
+  kind: ColumnKind;
+}
+const FieldsPreview = ({ fieldKey, fields, kind }: FieldsPreviewProps) => {
+  const { orgId } = useNumericRouteParams();
+  const columnOptions = useColumnOptions(orgId);
+  const globalMessages = useMessages(globalMessageIds);
+  const messages = useMessages(messageIds);
+
+  let idColumnHeader = '';
+
+  if (kind === ColumnKind.ID_FIELD) {
+    idColumnHeader =
+      fieldKey === 'id'
+        ? globalMessages.personFields.id()
+        : fieldKey === 'ext_id'
+        ? globalMessages.personFields.ext_id()
+        : '';
+  }
+
+  let fieldColumnHeader = '';
+  columnOptions.forEach((columnOp) => {
+    if (columnOp.value === `field:${fieldKey}`) {
+      fieldColumnHeader = columnOp.label;
+    }
+  });
+  const fieldValue = fields?.[fieldKey!];
+  return (
+    <PreviewGrid
+      columnHeader={idColumnHeader || fieldColumnHeader}
+      emptyLabel={!fieldValue ? messages.configuration.preview.noValue() : ''}
+      rowValue={(fieldKey === null && fields?.['null']) || fieldValue || ''}
+    />
+  );
+};
+
+export default FieldsPreview;

src/features/import/components/Configure/Preview/OrgPreview.tsx

@@ -0,0 +1,32 @@
+import messageIds from 'features/import/l10n/messageIds';
+import PreviewGrid from './PreviewGrid';
+import { useMessages } from 'core/i18n';
+import { ZetkinOrganization } from 'utils/types/zetkin';
+import { ColumnKind, Sheet } from 'features/import/utils/types';
+
+interface OrgPreviewProps {
+  currentSheet: Sheet;
+  org: Pick<ZetkinOrganization, 'title' | 'id'> | undefined;
+}
+
+const OrgPreview = ({ currentSheet, org }: OrgPreviewProps) => {
+  const messages = useMessages(messageIds);
+
+  const hasMapped = currentSheet.columns.some(
+    (column) =>
+      column.kind === ColumnKind.ORGANIZATION && column.mapping.length > 0
+  );
+
+  return (
+    <PreviewGrid
+      columnHeader={messages.configuration.preview.columnHeader.org()}
+      emptyLabel={
+        hasMapped && !org ? messages.configuration.preview.noOrg() : ''
+      }
+      rowValue={hasMapped && org ? org.title : null}
+      unmappedRow={!hasMapped}
+    />
+  );
+};
+
+export default OrgPreview;

src/features/import/components/Configure/Preview/PreviewGrid.tsx

@@ -0,0 +1,82 @@
+import { ReactElement } from 'react';
+import { Box, Typography, useTheme } from '@mui/material';
+
+import { CellData } from 'features/import/utils/types';
+
+interface PreviewGridProps {
+  columnHeader?: string;
+  unmappedRow?: boolean;
+  rowValue: ReactElement | CellData;
+  emptyLabel?: string;
+}
+const PreviewGrid = ({
+  columnHeader,
+  unmappedRow,
+  rowValue,
+  emptyLabel,
+}: PreviewGridProps) => {
+  const theme = useTheme();
+
+  return (
+    <Box
+      flexGrow={1}
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        minWidth: 'fit-content',
+        overflowX: 'auto',
+        padding: 2,
+      }}
+    >
+      <Box
+        sx={{
+          backgroundColor: columnHeader
+            ? 'transparent'
+            : theme.palette.transparentGrey.light,
+          height: '14px',
+          mb: 0.5,
+          minWidth: '150px',
+        }}
+      >
+        <Typography
+          fontSize="12px"
+          sx={{
+            color: theme.palette.grey['600'],
+            letterSpacing: '1px',
+            textTransform: 'uppercase',
+          }}
+          variant="body1"
+        >
+          {columnHeader}
+        </Typography>
+      </Box>
+      <Box
+        sx={{
+          alignItems: 'center',
+          backgroundColor: unmappedRow
+            ? theme.palette.transparentGrey.light
+            : 'transparent',
+          display: 'flex',
+          height: '14px',
+          minWidth: '150px',
+          mt: 0.5,
+        }}
+      >
+        {emptyLabel ? (
+          <Typography
+            sx={{
+              color: theme.palette.grey[400],
+              fontStyle: 'italic',
+            }}
+          >
+            ({emptyLabel})
+          </Typography>
+        ) : (
+          <Typography variant="body1">{rowValue}</Typography>
+        )}
+      </Box>
+    </Box>
+  );
+};
+
+export default PreviewGrid;

src/features/import/components/Configure/Preview/TagsPreview.tsx

@@ -0,0 +1,80 @@
+import { makeStyles } from '@mui/styles';
+import { Tooltip } from '@mui/material';
+import { Box, Stack } from '@mui/system';
+
+import messageIds from 'features/import/l10n/messageIds';
+import PreviewGrid from './PreviewGrid';
+import TagChip from 'features/tags/components/TagManager/components/TagChip';
+import { useMessages } from 'core/i18n';
+import { ZetkinTag } from 'utils/types/zetkin';
+import { ColumnKind, Sheet } from 'features/import/utils/types';
+
+interface TagPreviewProps {
+  currentSheet: Sheet;
+  tags: ZetkinTag[];
+}
+
+const useStyles = makeStyles((theme) => ({
+  chip: {
+    borderColor: theme.palette.grey[500],
+    borderRadius: '1em',
+    borderWidth: '1px',
+    color: theme.palette.text.secondary,
+    cursor: 'default',
+    display: 'flex',
+    lineHeight: 'normal',
+    marginRight: '0.1em',
+    overflow: 'hidden',
+    padding: '0.1em 0.7em',
+    textOverflow: 'ellipsis',
+  },
+}));
+
+const TagsPreview = ({ tags, currentSheet }: TagPreviewProps) => {
+  const messages = useMessages(messageIds);
+  const classes = useStyles();
+
+  const hasMapped = currentSheet.columns.some(
+    (column) => column.kind === ColumnKind.TAG && column.mapping.length > 0
+  );
+
+  const displayedTags = tags?.slice(0, 3);
+  const hiddenTags = tags?.slice(3);
+  const tooltipTitle = hiddenTags?.map((tag) => tag.title).join(', ');
+  return (
+    <PreviewGrid
+      columnHeader={messages.configuration.preview.columnHeader.tags()}
+      emptyLabel={
+        hasMapped && tags.length === 0
+          ? messages.configuration.preview.noTags()
+          : ''
+      }
+      rowValue={
+        tags.length > 0 ? (
+          <Stack direction="row" maxWidth={'300px'} mt="5px" spacing={1}>
+            {displayedTags?.map((tag) => (
+              <TagChip
+                key={tag.id}
+                noWrappedLabel={true}
+                size="small"
+                tag={tag}
+              />
+            ))}
+            {hiddenTags!.length > 0 && (
+              <Tooltip title={tooltipTitle}>
+                <Box border={2} className={classes.chip}>
+                  {`${displayedTags!.length > 0 ? '+' : ''}${
+                    hiddenTags?.length
+                  }`}
+                </Box>
+              </Tooltip>
+            )}
+          </Stack>
+        ) : null
+      }
+      unmappedRow={!hasMapped}
+    />
+  );
+};
+
+export default TagsPreview;