#9644

Committed 16 Dec 2024 11:55AM UTC coverage: 5.9%. First build

Build # #9644

Build Type

Pull #7295

travis-ci

Pull Request Pull Request #7295: VC Store / Invite VC flow - feature branch

Run Details

194 of 10821 branches covered (1.79%)

Branch coverage included in aggregate %.

12 of 193 new or added lines in 15 files covered. (6.22%)

1549 of 18723 relevant lines covered (8.27%)

0.19 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

0.0

/src/domain/community/virtualContributor/vcProfilePage/VCProfileContentView.tsx

import { PropsWithChildren } from 'react';

import { Link, Button } from '@mui/material';
import { Caption } from '@/core/ui/typography';
import CheckIcon from '@mui/icons-material/Check';
import PublicIcon from '@mui/icons-material/Public';
import RemoveIcon from '@mui/icons-material/Remove';
import LaunchIcon from '@mui/icons-material/Launch';
import StorageIcon from '@mui/icons-material/Storage';
import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
import SchoolOutlinedIcon from '@mui/icons-material/SchoolOutlined';
import PinDropOutlinedIcon from '@mui/icons-material/PinDropOutlined';
import TaskAltOutlinedIcon from '@mui/icons-material/TaskAltOutlined';
import CloudUploadOutlinedIcon from '@mui/icons-material/CloudUploadOutlined';
import AdminPanelSettingsOutlinedIcon from '@mui/icons-material/AdminPanelSettingsOutlined';
import SettingsAccessibilityOutlinedIcon from '@mui/icons-material/SettingsAccessibilityOutlined';
import useNavigate from '@/core/routing/useNavigate';
import { useTranslation } from 'react-i18next';
import PageContentBlock from '@/core/ui/content/PageContentBlock';
import { BlockTitle } from '@/core/ui/typography';
import { gutters } from '@/core/ui/grid/utils';
import KnowledgeBaseDialog from '@/domain/community/virtualContributor/knowledgeBase/KnowledgeBaseDialog';
import Gutters from '@/core/ui/grid/Gutters';
import { useTemporaryHardCodedVCProfilePageData } from './useTemporaryHardCodedVCProfilePageData';
import { SettingsMotionModeIcon } from './SettingsMotionModeIcon';
import { VirtualContributorModelFull } from '../model/VirtualContributorModelFull';
import { EMPTY_MODEL_CARD } from '../model/VirtualContributorModelCardModel';

export type VCProfileContentViewProps = {
  virtualContributor?: VirtualContributorModelFull;
  openKnowledgeBaseDialog?: boolean;
};

const VCProfileContentView = ({ virtualContributor, openKnowledgeBaseDialog }: VCProfileContentViewProps) => {
  const { t } = useTranslation();
  const navigate = useNavigate();

  const vcProfile = virtualContributor?.profile;
  const name = vcProfile?.displayName || t('pages.virtualContributorProfile.defaultName');

  const onCloseKnowledgeBase = () => {
    if (virtualContributor) {
      navigate(virtualContributor?.profile.url);
    }
  };

  const modelCard = virtualContributor?.modelCard ?? EMPTY_MODEL_CARD;
  const { sections } = useTemporaryHardCodedVCProfilePageData(modelCard);

  const renderCellIcon = (iconName: string) => {
    switch (iconName) {
      case 'functionalCapabilities':
        return <SettingsAccessibilityOutlinedIcon fontSize="large" />;

      case 'cloudUpload':
        return <CloudUploadOutlinedIcon fontSize="large" />;

      case 'shieldPerson':
        return <AdminPanelSettingsOutlinedIcon fontSize="large" />;

      case 'settingsMotion':
        return <SettingsMotionModeIcon />;

      case 'database':
        return <StorageIcon fontSize="large" />;

      case 'knowledge':
        return <SchoolOutlinedIcon fontSize="large" />;

      case 'globe':
        return <PublicIcon fontSize="large" />;

      case 'location':
        return <PinDropOutlinedIcon fontSize="large" />;

      case 'techReferences':
        return <AdminPanelSettingsOutlinedIcon fontSize="large" />;

      case 'check':
        return <TaskAltOutlinedIcon />;

      case 'exclamation':
        return <ErrorOutlineIcon />;

      default: {
        return null;
      }
    }
  };

  return (
    <>
      <PageContentBlock>
        <Gutters disablePadding>
          <SectionTitle>{sections.functionality.title}</SectionTitle>

          <SectionWrapper>
            {sections.functionality.cells.map((cell, idx) =>
              cell ? (
                <SectionItem key={idx}>
                  <Gutters disablePadding alignItems="center" paddingBottom={gutters(1)}>
                    {renderCellIcon(cell.icon)}
                  </Gutters>

                  <Caption fontWeight={700} textAlign="center" sx={{ marginBottom: gutters(1) }}>
                    {cell.title}
                  </Caption>

                  {cell?.bullets?.map((bullet, idx) => (
                    <Gutters key={idx} disablePadding paddingLeft={gutters(1.2)}>
                      <Gutters
                        disablePadding
                        position="relative"
                        flexDirection="row"
                        alignItems="start"
                        marginTop={gutters(0.5)}
                      >
                        {bullet.icon ? (
                          <CheckIcon fontSize="small" sx={{ position: 'absolute', left: -24 }} />
                        ) : (
                          <RemoveIcon fontSize="small" sx={{ position: 'absolute', left: -24 }} />
                        )}

                        <Caption>{bullet.text}</Caption>
                      </Gutters>
                    </Gutters>
                  ))}

                  {cell.description && (
                    <Gutters disableGap disablePadding>
                      <Caption sx={{ textAlign: 'center' }}>
                        {/* dangerouslySetInnerHTML is used temporarily because we're using hard-coded values. REMOVE when data is fetched from server and use Trans! */}
                        <span dangerouslySetInnerHTML={{ __html: cell.description }} />
                      </Caption>
                    </Gutters>
                  )}
                </SectionItem>
              ) : null
            )}
          </SectionWrapper>
        </Gutters>
      </PageContentBlock>

      <PageContentBlock>
        <Gutters disablePadding>
          <SectionTitle>{sections.aiEngine.title}</SectionTitle>

          <SectionWrapper>
            {sections.aiEngine.cells.map((cell, idx) => (
              <SectionItem key={idx}>
                <Gutters disablePadding alignItems="center" paddingBottom={gutters(1)}>
                  {renderCellIcon(cell.icon)}
                </Gutters>

                <Caption fontWeight={700} textAlign="center" sx={{ marginBottom: gutters(1) }}>
                  {cell.title}
                </Caption>

                {cell.description && (
                  <Gutters disableGap disablePadding>
                    <Caption sx={{ textAlign: 'center' }}>{cell.description}</Caption>
                  </Gutters>
                )}

                <Gutters
                  disablePadding
                  flexDirection="row"
                  alignItems="center"
                  justifyContent="center"
                  paddingTop={gutters(2)}
                >
                  {cell.answerIcon && renderCellIcon(cell.answerIcon)}

                  {cell.answer && <Caption>{cell.answer}</Caption>}

                  {cell.buttonText && (
                    <Link href={cell.to || '#'} underline="none" target="_blank">
                      <Button startIcon={<LaunchIcon />} variant="outlined" sx={{ paddingBlock: gutters(0.3) }}>
                        {cell.buttonText}
                      </Button>
                    </Link>
                  )}
                </Gutters>
              </SectionItem>
            ))}
          </SectionWrapper>
        </Gutters>
      </PageContentBlock>

      <PageContentBlock>
        <SectionTitle>{sections.monitoring.title}</SectionTitle>

        <Gutters disableGap disablePadding>
          <Caption>
            {/* dangerouslySetInnerHTML is used temporarily because we're using hard-coded values. REMOVE when data is fetched from server and use Trans! */}
            <span dangerouslySetInnerHTML={{ __html: sections.monitoring.description }} />
          </Caption>
        </Gutters>
      </PageContentBlock>

      {openKnowledgeBaseDialog && (
        <KnowledgeBaseDialog
          id={virtualContributor?.id ?? ''}
          title={`${name}: ${t('virtualContributorSpaceSettings.bodyOfKnowledge')}`}
          placeholder={t('virtualContributorSpaceSettings.placeholder')}
          onClose={onCloseKnowledgeBase}
        />
      )}
    </>
  );
};

export default VCProfileContentView;

function SectionTitle({ children }) {
  return (
    <BlockTitle display={'flex'} alignItems={'center'} gap={gutters(0.5)}>
      {children}
    </BlockTitle>
  );
}

function SectionWrapper({ children }: PropsWithChildren<{}>) {
  return (
    <Gutters disablePadding sx={{ flexDirection: 'row', flexWrap: 'wrap' }}>
      {children}
    </Gutters>
  );
}

function SectionItem({ children }: PropsWithChildren<{}>) {
  return (
    <Gutters
      disableGap
      sx={theme => ({
        flex: '1 1 270px',
        borderRadius: 1,
        border: `1px solid ${theme.palette.divider}`,
      })}
    >
      {children}
    </Gutters>
  );
}

1	import { PropsWithChildren } from 'react';
2
3	import { Link, Button } from '@mui/material';
4	import { Caption } from '@/core/ui/typography';
5	import CheckIcon from '@mui/icons-material/Check';
6	import PublicIcon from '@mui/icons-material/Public';
7	import RemoveIcon from '@mui/icons-material/Remove';
8	import LaunchIcon from '@mui/icons-material/Launch';
9	import StorageIcon from '@mui/icons-material/Storage';
10	import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
11	import SchoolOutlinedIcon from '@mui/icons-material/SchoolOutlined';
12	import PinDropOutlinedIcon from '@mui/icons-material/PinDropOutlined';
13	import TaskAltOutlinedIcon from '@mui/icons-material/TaskAltOutlined';
14	import CloudUploadOutlinedIcon from '@mui/icons-material/CloudUploadOutlined';
NEW 15	import AdminPanelSettingsOutlinedIcon from '@mui/icons-material/AdminPanelSettingsOutlined';	×
NEW 16	import SettingsAccessibilityOutlinedIcon from '@mui/icons-material/SettingsAccessibilityOutlined';	×
17	import useNavigate from '@/core/routing/useNavigate';
18	import { useTranslation } from 'react-i18next';
19	import PageContentBlock from '@/core/ui/content/PageContentBlock';
20	import { BlockTitle } from '@/core/ui/typography';
21	import { gutters } from '@/core/ui/grid/utils';
22	import KnowledgeBaseDialog from '@/domain/community/virtualContributor/knowledgeBase/KnowledgeBaseDialog';
NEW 23	import Gutters from '@/core/ui/grid/Gutters';	×
NEW 24	import { useTemporaryHardCodedVCProfilePageData } from './useTemporaryHardCodedVCProfilePageData';	×
25	import { SettingsMotionModeIcon } from './SettingsMotionModeIcon';
26	import { VirtualContributorModelFull } from '../model/VirtualContributorModelFull';
NEW 27	import { EMPTY_MODEL_CARD } from '../model/VirtualContributorModelCardModel';	×
NEW 28		×
29	export type VCProfileContentViewProps = {
NEW 30	virtualContributor?: VirtualContributorModelFull;	×
NEW 31	openKnowledgeBaseDialog?: boolean;	×
NEW 32	};	×
NEW 33		×
NEW 34	const VCProfileContentView = ({ virtualContributor, openKnowledgeBaseDialog }: VCProfileContentViewProps) => {	×
35	const { t } = useTranslation();
NEW 36	const navigate = useNavigate();	×
NEW 37		×
NEW 38	const vcProfile = virtualContributor?.profile;	×
NEW 39	const name = vcProfile?.displayName \|\| t('pages.virtualContributorProfile.defaultName');	×
40
NEW 41	const onCloseKnowledgeBase = () => {	×
NEW 42	if (virtualContributor) {	×
43	navigate(virtualContributor?.profile.url);
NEW 44	}	×
45	};
46
47	const modelCard = virtualContributor?.modelCard ?? EMPTY_MODEL_CARD;	×
48	const { sections } = useTemporaryHardCodedVCProfilePageData(modelCard);
49
50	const renderCellIcon = (iconName: string) => {
51	switch (iconName) {
52	case 'functionalCapabilities':
53	return <SettingsAccessibilityOutlinedIcon fontSize="large" />;
54
55	case 'cloudUpload':
56	return <CloudUploadOutlinedIcon fontSize="large" />;
57		×
58	case 'shieldPerson':
59	return <AdminPanelSettingsOutlinedIcon fontSize="large" />;
60		×
61	case 'settingsMotion':
62	return <SettingsMotionModeIcon />;
63
64	case 'database':
65	return <StorageIcon fontSize="large" />;
66
67	case 'knowledge':
68	return <SchoolOutlinedIcon fontSize="large" />;
69
70	case 'globe':
71	return <PublicIcon fontSize="large" />;
72
73	case 'location':
74	return <PinDropOutlinedIcon fontSize="large" />;
75		×
76	case 'techReferences':
77	return <AdminPanelSettingsOutlinedIcon fontSize="large" />;
78
79	case 'check':
80	return <TaskAltOutlinedIcon />;
81
82	case 'exclamation':
83	return <ErrorOutlineIcon />;
84		×
85	default: {
86	return null;
87	}
88	}
89	};
90
91	return (
92	<>
93	<PageContentBlock>
94	<Gutters disablePadding>
95	<SectionTitle>{sections.functionality.title}</SectionTitle>
96
97	<SectionWrapper>
98	{sections.functionality.cells.map((cell, idx) =>
99	cell ? (
100	<SectionItem key={idx}>
101	<Gutters disablePadding alignItems="center" paddingBottom={gutters(1)}>
102	{renderCellIcon(cell.icon)}
103	</Gutters>
104
105	<Caption fontWeight={700} textAlign="center" sx={{ marginBottom: gutters(1) }}>
106	{cell.title}
107	</Caption>
108		×
109	{cell?.bullets?.map((bullet, idx) => (
110	<Gutters key={idx} disablePadding paddingLeft={gutters(1.2)}>
111	<Gutters	×
112	disablePadding
113	position="relative"
114	flexDirection="row"
115	alignItems="start"
116	marginTop={gutters(0.5)}
117	>
118	{bullet.icon ? (
119	<CheckIcon fontSize="small" sx={{ position: 'absolute', left: -24 }} />
120	) : (
121	<RemoveIcon fontSize="small" sx={{ position: 'absolute', left: -24 }} />
122	)}
123
124	<Caption>{bullet.text}</Caption>
125	</Gutters>
126	</Gutters>
127	))}
128
129	{cell.description && (
130	<Gutters disableGap disablePadding>
131	<Caption sx={{ textAlign: 'center' }}>
132	{/* dangerouslySetInnerHTML is used temporarily because we're using hard-coded values. REMOVE when data is fetched from server and use Trans! */}
133	<span dangerouslySetInnerHTML={{ __html: cell.description }} />
134	</Caption>
135	</Gutters>
136	)}
137	</SectionItem>
138	) : null
139	)}
140	</SectionWrapper>
141	</Gutters>
142	</PageContentBlock>
143
144	<PageContentBlock>
145	<Gutters disablePadding>
146	<SectionTitle>{sections.aiEngine.title}</SectionTitle>
147
148	<SectionWrapper>
149	{sections.aiEngine.cells.map((cell, idx) => (
150	<SectionItem key={idx}>
151	<Gutters disablePadding alignItems="center" paddingBottom={gutters(1)}>
152	{renderCellIcon(cell.icon)}
153	</Gutters>
154
155	<Caption fontWeight={700} textAlign="center" sx={{ marginBottom: gutters(1) }}>
156	{cell.title}
157	</Caption>
158
159	{cell.description && (
160	<Gutters disableGap disablePadding>
161	<Caption sx={{ textAlign: 'center' }}>{cell.description}</Caption>
162	</Gutters>
163	)}
164
165	<Gutters
166	disablePadding
167	flexDirection="row"
168	alignItems="center"
169	justifyContent="center"
170	paddingTop={gutters(2)}
171	>
172	{cell.answerIcon && renderCellIcon(cell.answerIcon)}
173
174	{cell.answer && <Caption>{cell.answer}</Caption>}
175
176	{cell.buttonText && (
177	<Link href={cell.to \|\| '#'} underline="none" target="_blank">
178	<Button startIcon={<LaunchIcon />} variant="outlined" sx={{ paddingBlock: gutters(0.3) }}>
179	{cell.buttonText}
180	</Button>
181	</Link>
182	)}
183	</Gutters>
184	</SectionItem>
185	))}
186	</SectionWrapper>
187	</Gutters>
188	</PageContentBlock>
189
190	<PageContentBlock>
191	<SectionTitle>{sections.monitoring.title}</SectionTitle>
192
193	<Gutters disableGap disablePadding>
194	<Caption>
195	{/* dangerouslySetInnerHTML is used temporarily because we're using hard-coded values. REMOVE when data is fetched from server and use Trans! */}
196	<span dangerouslySetInnerHTML={{ __html: sections.monitoring.description }} />
197	</Caption>
198	</Gutters>
199	</PageContentBlock>
200
201	{openKnowledgeBaseDialog && (
202	<KnowledgeBaseDialog
203	id={virtualContributor?.id ?? ''}
204	title={`${name}: ${t('virtualContributorSpaceSettings.bodyOfKnowledge')}`}
205	placeholder={t('virtualContributorSpaceSettings.placeholder')}
206	onClose={onCloseKnowledgeBase}
207	/>
208	)}
209	</>
210	);
211	};
212
213	export default VCProfileContentView;
214
215	function SectionTitle({ children }) {
216	return (
217	<BlockTitle display={'flex'} alignItems={'center'} gap={gutters(0.5)}>
218	{children}
219	</BlockTitle>
220	);
221	}
222
223	function SectionWrapper({ children }: PropsWithChildren<{}>) {
224	return (
225	<Gutters disablePadding sx={{ flexDirection: 'row', flexWrap: 'wrap' }}>
226	{children}
227	</Gutters>
228	);
229	}
230
231	function SectionItem({ children }: PropsWithChildren<{}>) {
232	return (
233	<Gutters
234	disableGap
235	sx={theme => ({
236	flex: '1 1 270px',
237	borderRadius: 1,
238	border: `1px solid ${theme.palette.divider}`,
239	})}
240	>
241	{children}
242	</Gutters>
243	);
244	}

alkem-io / client-web / #9644

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous