@pega/cosmos-react-demos 5.0.0-dev.4.9 → 5.0.0-dev.5.0

package/jsx/work/CaseView/CaseView.mocks.jsx

@@ -0,0 +1,596 @@
+import { useMemo, useState } from 'react';
+import createDOMPurify from 'dompurify';
+import styled, { css } from 'styled-components';
+import { Button, Link, createStringMatcher, Modal, SummaryList, useModalManager, useElement, ViewAll, Status, Flex, Grid, registerIcon, Banner, createUID, useBreakpoint, Avatar, Tabs, TabPanel, Card, CardHeader, Text } from '@pega/cosmos-react-core';
+import { Glimpse, CaseView, CasePreview, UtilitySummaryItemDialog } from '@pega/cosmos-react-work';
+import { RichTextViewer } from '@pega/cosmos-react-rte';
+import * as userSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/user-solid.icon';
+import { PredictionsDemo } from '../Predictions/Predictions.stories';
+import { useMockListData } from '../../core/SummaryList/SummaryList.mocks';
+import { StakeHoldersDemo } from '../Stakeholders/Stakeholders.stories';
+import { TagsDemo } from '../Tags/Tags.stories';
+import { StagesDemo } from '../Stages/Stages.stories';
+import { AssignmentsDemo } from '../Assignments/Assignments.stories';
+import { PulseMock } from './Pulse.mocks';
+import { Details } from './Details.mocks';
+import { AttachmentsMock } from './Attachments.mocks';
+registerIcon(userSolidIcon);
+const DOMPurify = createDOMPurify();
+const StyledRSWrapper = styled.div(({ theme }) => css `
+    display: grid;
+    place-items: center;
+    border: 0.1875rem dashed ${theme.base.palette['border-line']};
+    min-height: 6rem;
+    height: var(--content-height-in-view);
+    border-radius: calc(${theme.components.card['border-radius']});
+  `);
+const RSTable = () => {
+    return (<article style={{ display: 'block' }}>
+      <StyledRSWrapper className='rs-wrapper'>
+        <Text variant='secondary'>Table goes here</Text>
+      </StyledRSWrapper>
+    </article>);
+};
+const TableSizingTabs = ({ tabCount = 3 }) => {
+    const [currentTabId, setCurrentTabId] = useState('1');
+    const tabs = [
+        { name: 'Tab 1', id: '1' },
+        { name: 'Tab 2', id: '2' },
+        { name: 'Tab 3', id: '3' }
+    ].slice(0, tabCount);
+    return (<Flex container={{ direction: 'column', gap: 2 }}>
+      <Tabs tabs={tabs} type='horizontal' onTabClick={id => {
+            setCurrentTabId(id);
+        }} currentTabId={currentTabId}/>
+      {tabs.map(tab => (<TabPanel tabId={tab.id} currentTabId={currentTabId} key={tab.id}>
+          <Flex container={{ direction: 'column', gap: 1 }}>
+            {(() => {
+                switch (tab.id) {
+                    case '1':
+                        return <RSTable />;
+                    case '2':
+                        return (<>
+                      <RSTable />
+                      <p>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
+                        non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                      </p>
+                    </>);
+                    case '3':
+                        return <TableSizingTabs tabCount={2}/>;
+                    default:
+                        return null;
+                }
+            })()}
+          </Flex>
+        </TabPanel>))}
+    </Flex>);
+};
+export const caseId = 'C-123456';
+export const createDate = new Date(2016, 1, 8);
+const msInYear = 1000 * 60 * 60 * 24 * 365;
+const diffInYears = Math.floor((Date.now() - createDate.getTime()) / msInYear);
+export const tabLabels = ['Details', 'Pulse', 'Single table', 'Sub tab table', 'Multiple tables'];
+export const baseCaseTabs = tabLabels.map((name) => {
+    return {
+        name,
+        id: name
+    };
+});
+const singularize = (s = '') => s.replace(/s$/i, '').toLowerCase();
+export const MockSummaryListViewAllModal = ({ name, count }) => {
+    const [search, setSearch] = useState('');
+    const [loading, setLoading] = useState(true);
+    const [items] = useMockListData(() => {
+        setLoading(false);
+    }, {
+        count
+    });
+    const onSearchChange = (value) => {
+        setSearch(value.trim());
+    };
+    const itemsToRender = useMemo(() => {
+        if (search) {
+            const regEx = createStringMatcher(search, 'boundary');
+            return items.filter(({ primary, id }) => regEx.test(primary) || regEx.test(id));
+        }
+        return items;
+    }, [items, search]);
+    return (<Modal heading={name}>
+      <ViewAll loading={loading} items={itemsToRender} actions={[
+            {
+                id: 'addNew',
+                text: `Add ${singularize(name)}`
+            }
+        ]} searchInputProps={{ onSearchChange }}/>
+    </Modal>);
+};
+export const MockSummaryList = ({ icon, name, actions, limit }) => {
+    const { create: createModal } = useModalManager();
+    const [loading, setLoading] = useState(true);
+    const count = 50;
+    const [items] = useMockListData(() => {
+        setLoading(false);
+    }, { count: limit });
+    return (<SummaryList loading={loading} items={items} icon={icon} name={name} headingTag='h3' count={loading ? undefined : count} actions={actions !== null
+            ? [
+                {
+                    text: 'Add',
+                    id: `${name}:addNew`,
+                    icon: 'plus',
+                    onClick() {
+                        createModal(() => {
+                            const singularName = singularize(name);
+                            return (<Modal heading={`Add new ${singularName}`}>
+                        {`Content for adding a new ${singularName} goes here…`}
+                      </Modal>);
+                        });
+                    }
+                }
+            ]
+            : undefined} onViewAll={() => {
+            createModal(MockSummaryListViewAllModal, {
+                name,
+                count
+            });
+        }}/>);
+};
+export const MockOperatorFieldValue = () => {
+    const [target, setTarget] = useElement(null);
+    return (<>
+      <Button variant='link' onClick={(e) => {
+            setTarget(e.currentTarget);
+        }}>
+        constellation@pega.com
+      </Button>
+      {target && (<Glimpse id='constellation' target={target} onDismiss={() => setTarget(null)} heading={{
+                primary: 'Constellation Operator',
+                secondary: 'Director of the stars',
+                visual: <Avatar name='Constellation Operator'/>
+            }} fields={[
+                {
+                    id: '1',
+                    name: 'Department',
+                    value: 'Space Travel'
+                },
+                {
+                    id: '2',
+                    name: 'Manager',
+                    value: 'Captain Galaxy'
+                },
+                {
+                    id: '3',
+                    name: 'Location',
+                    value: 'A galaxy far away'
+                },
+                {
+                    id: '4',
+                    name: 'Email',
+                    value: <Link href='mailto:constellation@pega.com'>constellation@pega.com</Link>
+                },
+                {
+                    id: '5',
+                    name: 'Telephone',
+                    value: <Link href='tel:555-123-4567'>555-123-4567</Link>
+                }
+            ]} onViewProfile={() => { }}/>)}
+    </>);
+};
+export const PreviewLinkComponent = ({ token: linkToken, setPreviewCaseId, setPreviewCurrentTabId }) => {
+    return (<Link href={linkToken.href} previewable onPreview={() => {
+            setPreviewCaseId(linkToken.href);
+            setPreviewCurrentTabId(`summary-${linkToken.href}`);
+        }}>
+      {linkToken.text}
+    </Link>);
+};
+export const getPulseMarkdownMap = ({ setPreviewCaseId, setPreviewCurrentTabId }) => {
+    return {
+        link: (linkToken) => {
+            if (linkToken.href?.startsWith('C-')) {
+                return () => (<PreviewLinkComponent token={linkToken} setPreviewCaseId={setPreviewCaseId} setPreviewCurrentTabId={setPreviewCurrentTabId}/>);
+            }
+        }
+    };
+};
+export const onMentionPreview = ({ id, type, setPreviewCaseId, setPreviewCurrentTabId }) => {
+    if (type === 'case') {
+        setPreviewCaseId(id);
+        setPreviewCurrentTabId(`summary-${id}`);
+    }
+};
+export const getTabContent = ({ setPreviewCaseId, setPreviewCurrentTabId }) => {
+    return [
+        {
+            id: 'Details',
+            content: <Details />
+        },
+        {
+            id: 'Pulse',
+            content: (<PulseMock markdownMap={getPulseMarkdownMap({ setPreviewCaseId, setPreviewCurrentTabId })} onMentionPreview={({ id, type }) => {
+                    onMentionPreview({ id, type, setPreviewCaseId, setPreviewCurrentTabId });
+                }}/>)
+        },
+        {
+            id: 'Single table',
+            content: <RSTable />
+        },
+        {
+            id: 'Sub tab table',
+            content: <TableSizingTabs />
+        },
+        {
+            id: 'Multiple tables',
+            content: (<Card>
+          <CardHeader>
+            <Text variant='h2'>Multiple tables</Text>
+          </CardHeader>
+          <Flex container={{ direction: 'column', gap: 2 }}>
+            <RSTable />
+            <RSTable />
+          </Flex>
+        </Card>)
+        },
+        {
+            id: 'not found',
+            content: <h2>Not Found</h2>
+        }
+    ];
+};
+export const previewTabContent = [
+    {
+        id: 'Details',
+        content: <Details />
+    },
+    {
+        id: 'Pulse',
+        content: <PulseMock />
+    },
+    {
+        id: 'Single table',
+        content: <RSTable />
+    },
+    {
+        id: 'Sub tab table',
+        content: <TableSizingTabs />
+    },
+    {
+        id: 'Multiple tables',
+        content: (<Card>
+        <CardHeader>
+          <Text variant='h2'>Multiple tables</Text>
+        </CardHeader>
+        <Flex container={{ direction: 'column', gap: 2 }}>
+          <RSTable />
+          <RSTable />
+        </Flex>
+      </Card>)
+    },
+    {
+        id: 'not found',
+        content: <h2>Not Found</h2>
+    }
+];
+export const getPrimaryFields = () => {
+    return [
+        {
+            name: 'Create date',
+            value: createDate.toDateString()
+        },
+        {
+            name: 'Member ID',
+            value: 'M205435569FD1234567890'
+        },
+        {
+            name: 'Assigned to',
+            value: 'Dean Thomas'
+        },
+        {
+            name: 'Priority',
+            value: '95'
+        }
+    ].map((f, i) => ({ ...f, id: `p-${i}` }));
+};
+const baseSecondaryFields = [
+    {
+        name: 'Status',
+        value: <Status variant='info'>New</Status>
+    },
+    {
+        name: 'Update date',
+        value: `${diffInYears} years ago`
+    },
+    {
+        name: 'Description',
+        value: (<RichTextViewer content='<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse commodo nulla vitae mi bibendum, a fringilla nisl efficitur. Praesent vitae nulla lobortis, finibus felis ultricies, fermentum mi. Nunc lorem ligula, placerat nec elit id, auctor pellentesque est.</p> </br> <p>Pellentesque pharetra justo augue, non maximus nulla venenatis et. Sed laoreet ultricies ullamcorper. Mauris ac nulla quis ipsum semper fringilla in eget risus. Fusce cursus sollicitudin nibh molestie volutpat.</p>' type='html'/>),
+        simpleValue: DOMPurify.sanitize('<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse commodo nulla vitae mi bibendum, a fringilla nisl efficitur. Praesent vitae nulla lobortis, finibus felis ultricies, fermentum mi. Nunc lorem ligula, placerat nec elit id, auctor pellentesque est.</p> </br> <p>Pellentesque pharetra justo augue, non maximus nulla venenatis et. Sed laoreet ultricies ullamcorper. Mauris ac nulla quis ipsum semper fringilla in eget risus. Fusce cursus sollicitudin nibh molestie volutpat.</p>', {
+            ALLOWED_TAGS: [],
+            ALLOWED_ATTR: [],
+            KEEP_CONTENT: true
+        }),
+        variant: 'stacked'
+    }
+];
+export const getSecondaryFields = ({ setPreviewCaseId, setPreviewCurrentTabId }) => {
+    return [
+        ...baseSecondaryFields,
+        {
+            name: 'Created by',
+            value: <MockOperatorFieldValue />
+        },
+        {
+            name: 'Previewable case',
+            value: (<Link href='/cases/C-456' previewable onPreview={() => {
+                    setPreviewCaseId('C-456');
+                    setPreviewCurrentTabId('summary-C-456');
+                }}>
+          Previewable Case - C-456
+        </Link>)
+        }
+    ];
+};
+export const casePreviewPrimaryFields = [
+    {
+        name: 'Member ID',
+        value: 'M204859F438G'
+    },
+    {
+        name: 'Priority',
+        value: '95'
+    }
+];
+export const casePreviewSecondaryFields = baseSecondaryFields;
+export const getParentCases = ({ setPreviewCaseId, setPreviewCurrentTabId }) => {
+    let ids = [];
+    const randomId = (seed = 1) => {
+        const x = Math.sin(seed);
+        let rand = x - Math.floor(x);
+        if (rand < 0.1) {
+            rand += 0.1;
+        }
+        return Math.floor(rand * 1000000);
+    };
+    for (let i = 0; i < 5; i += 1) {
+        ids.push(randomId(i + 1));
+    }
+    ids = ids.sort((a, b) => a - b);
+    return ids.map(num => {
+        const id = `C-${num}`;
+        return {
+            id,
+            primary: id,
+            href: `/cases/${id}`,
+            previewable: true,
+            onPreview: () => {
+                setPreviewCaseId(id);
+                setPreviewCurrentTabId(`summary-${id}`);
+            }
+        };
+    });
+};
+export const Utilities = ({ predictions, attachments, stakeholders, followers, tags }) => {
+    return (<>
+      {predictions && <PredictionsDemo />}
+      {attachments && <AttachmentsMock />}
+      {stakeholders && <StakeHoldersDemo />}
+      {followers && <MockSummaryList icon='user-star' name='Followers'/>}
+      {tags && <TagsDemo />}
+    </>);
+};
+export const getUtilitiesSummaryItems = ({ predictions, attachments, stakeholders, followers, tags, setDialogTarget, setDialogContent, setShowDialog }) => {
+    const items = [];
+    if (predictions)
+        items.push({
+            iconName: 'polaris',
+            name: 'Predictions',
+            onClick: e => {
+                setDialogTarget(e.currentTarget);
+                setDialogContent(<PredictionsDemo />);
+                setShowDialog(true);
+            }
+        });
+    if (attachments)
+        items.push({
+            iconName: 'paper-clip',
+            count: 4,
+            name: 'Attachments',
+            onClick: e => {
+                setDialogTarget(e.currentTarget);
+                setDialogContent(<AttachmentsMock />);
+                setShowDialog(true);
+            }
+        });
+    if (stakeholders)
+        items.push({
+            iconName: 'user-search-solid',
+            count: 10,
+            name: 'Stakeholders',
+            onClick: e => {
+                setDialogTarget(e.currentTarget);
+                setDialogContent(<StakeHoldersDemo />);
+                setShowDialog(true);
+            }
+        });
+    if (followers)
+        items.push({
+            iconName: 'user-star-solid',
+            count: 5,
+            name: 'Followers',
+            onClick: e => {
+                setDialogTarget(e.currentTarget);
+                setDialogContent(<MockSummaryList icon='user-star' name='Followers'/>);
+                setShowDialog(true);
+            }
+        });
+    if (tags)
+        items.push({
+            iconName: 'tag',
+            count: 10,
+            name: 'Tags',
+            onClick: e => {
+                setDialogTarget(e.currentTarget);
+                setDialogContent(<TagsDemo />);
+                setShowDialog(true);
+            }
+        });
+    return items;
+};
+export const getCaseActions = () => {
+    return Array.from({ length: 12 }, (_, i) => {
+        return {
+            text: `Action ${i + 1}`,
+            id: `${i + 1}`,
+            onClick: () => { }
+        };
+    });
+};
+const getHeading = (size) => {
+    return {
+        short: 'Constellation',
+        medium: 'Complicated constellation demo case of some distinction',
+        long: 'The scenario in this case is almost too obscure to put into words and so the title is quite long'
+    }[size];
+};
+export const getPromotedActions = (count) => {
+    return [
+        {
+            id: createUID(),
+            text: 'Reassign',
+            onClick: () => { }
+        },
+        {
+            id: createUID(),
+            text: 'Add dependency',
+            onClick: () => { }
+        },
+        {
+            id: createUID(),
+            text: 'Clone',
+            onClick: () => { }
+        },
+        {
+            id: createUID(),
+            text: 'Move',
+            onClick: () => { }
+        },
+        {
+            id: createUID(),
+            text: 'Withdraw',
+            onClick: () => { }
+        }
+    ].slice(0, count);
+};
+const StyledPersistentUtilityContent = styled.div(({ theme }) => {
+    return css `
+    height: 100%;
+    border-inline: 0.0625rem dashed ${theme.base.palette['border-line']};
+  `;
+});
+export const PersistentUtilityContent = () => {
+    return (<Flex container={{ justify: 'center', alignItems: 'center' }} as={StyledPersistentUtilityContent}>
+      Persistent utility content
+    </Flex>);
+};
+export const CaseViewMock = ({ caseId: caseIdProp, heading, subheading, parentCases = false, promotedActions = 1, summaryFields = 'All', tabs, stages = true, tasks = true, taskCount = 4, utilitiesExpanded: utilitiesExpandedProp = true, predictions = true, attachments = true, stakeholders = true, followers = true, tags = true, persistentUtility = false, intelligentGuidance = false, banner = false, headingLength, defaultExpanded }) => {
+    const [previewCaseId, setPreviewCaseId] = useState(null);
+    const [previewCurrentTabId, setPreviewCurrentTabId] = useState(baseCaseTabs[0].id);
+    const isMediumOrAbove = useBreakpoint('md');
+    const [demoCurrentTabId, setDemoCurrentTabId] = useState(isMediumOrAbove ? tabs?.currentTabId ?? baseCaseTabs[0].id : `summary-${caseIdProp}`);
+    const [dialogContent, setDialogContent] = useState();
+    const [dialogTarget, setDialogTarget] = useElement();
+    const [showDialog, setShowDialog] = useState(false);
+    const demoTabs = tabs ?? {
+        items: baseCaseTabs,
+        currentTabId: demoCurrentTabId,
+        onClick: setDemoCurrentTabId
+    };
+    const previewTabs = {
+        items: baseCaseTabs,
+        currentTabId: previewCurrentTabId,
+        onClick: setPreviewCurrentTabId
+    };
+    const parentCasesContent = getParentCases({
+        caseId: caseIdProp,
+        setPreviewCaseId,
+        setPreviewCurrentTabId
+    });
+    const demoStages = <StagesDemo currentStage={3}/>;
+    const [followed, setFollowed] = useState(false);
+    const [summaryExpanded, setSummaryExpanded] = useState(!!defaultExpanded);
+    const [utilitiesExpanded, setUtilitiesExpanded] = useState(utilitiesExpandedProp);
+    const tabContent = getTabContent({
+        setPreviewCaseId,
+        setPreviewCurrentTabId
+    });
+    return (<>
+      {previewCaseId && (<CasePreview open onAfterClose={() => {
+                setPreviewCaseId(null);
+            }} caseId={previewCaseId} parentCases={Math.random() > 0.5
+                ? [...parentCasesContent]
+                    .filter(c => c.id !== previewCaseId)
+                    .map(c => ({ ...c, id: `preview-${c.id}` }))
+                : undefined} heading='Previewable demo case' subheading={previewCaseId} caseLink={{ href: `/cases/${previewCaseId}`, target: '_blank' }} icon='user-solid' followed={!followed} onEdit={() => { }} actions={getCaseActions()} promotedActions={getPromotedActions(2)} summaryFields={{
+                primary: casePreviewPrimaryFields,
+                secondary: casePreviewSecondaryFields
+            }} stages={demoStages} tasks={<AssignmentsDemo count={4}/>} tabs={previewTabs} tabContent={tabContent} utilities={<Grid container={{ rowGap: 2 }}>
+              <Utilities predictions={predictions} attachments={attachments} stakeholders={stakeholders} followers={followers} tags={tags}/>
+            </Grid>}/>)}
+      {dialogTarget && showDialog && (<UtilitySummaryItemDialog target={dialogTarget} onDismiss={() => {
+                setShowDialog(false);
+            }}>
+          {dialogContent}
+        </UtilitySummaryItemDialog>)}
+      <CaseView caseId={caseIdProp} parentCases={parentCases
+            ? getParentCases({
+                caseId: caseIdProp,
+                setPreviewCaseId,
+                setPreviewCurrentTabId
+            })
+            : undefined} heading={headingLength ? getHeading(headingLength) : heading} subheading={subheading} icon='user-solid' followed={followed} onFollowedChange={setFollowed} actions={getCaseActions()} promotedActions={promotedActions ? getPromotedActions(promotedActions) : undefined} onEdit={() => { }} summaryFields={(() => {
+            const obj = {
+                primary: getPrimaryFields(),
+                secondary: getSecondaryFields({ setPreviewCaseId, setPreviewCurrentTabId })
+            };
+            if (summaryFields === 'Primary only') {
+                obj.secondary = undefined;
+            }
+            if (summaryFields === 'Secondary only') {
+                obj.primary = undefined;
+            }
+            return obj;
+        })()} summaryExpanded={summaryExpanded} onToggleSummary={() => {
+            setSummaryExpanded(cur => !cur);
+        }} tabs={demoTabs} persistentUtility={(() => {
+            if (typeof persistentUtility === 'boolean') {
+                return persistentUtility
+                    ? { title: 'Persistent utility', content: <PersistentUtilityContent /> }
+                    : undefined;
+            }
+            return persistentUtility;
+        })()} stages={stages ? demoStages : undefined} tasks={tasks ? <AssignmentsDemo count={taskCount}/> : undefined} tabContent={tabContent} utilities={<Utilities predictions={predictions} attachments={attachments} stakeholders={stakeholders} followers={followers} tags={tags}/>} utilitiesSummaryItems={getUtilitiesSummaryItems({
+            predictions,
+            attachments,
+            stakeholders,
+            followers,
+            tags,
+            setDialogTarget,
+            setDialogContent,
+            setShowDialog
+        })} utilitiesExpanded={utilitiesExpanded} onToggleUtilities={() => {
+            setUtilitiesExpanded(cur => !cur);
+        }} intelligentGuidance={intelligentGuidance} banners={banner ? (<Banner variant='urgent' messages={[
+                {
+                    label: 'An error occurred',
+                    description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+                    action: {
+                        text: 'Take acton'
+                    }
+                }
+            ]}/>) : undefined}/>
+    </>);
+};
+//# sourceMappingURL=CaseView.mocks.jsx.map