@eeacms/volto-cca-policy 1.0.1 → 1.0.3

package/src/components/theme/CompareTools/utils.test.jsx

@@ -0,0 +1,217 @@
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { Provider as JotaiProvider } from 'jotai';
+import { applyConfigurationSchema, rebind } from '@eeacms/search';
+import runRequest from '@eeacms/search/lib/runRequest';
+import {
+  MAX_COMPARE_TOOLS,
+  fetchResultsByUid,
+  getCompareLocation,
+  getCompareToolTitle,
+  getCompareToolUid,
+  getPathname,
+  useCompareTools,
+} from './utils';
+
+jest.mock('@eeacms/search', () => ({
+  applyConfigurationSchema: jest.fn((config) => config),
+  rebind: jest.fn((config) => config),
+}));
+
+jest.mock('@eeacms/search/lib/runRequest', () => jest.fn());
+
+jest.mock('@plone/volto/helpers/Url/Url', () => ({
+  flattenToAppURL: (url) => url.replace('https://example.com', ''),
+}));
+
+const CompareHarness = ({ tool }) => {
+  const { isLimitReached, isSelected, setSelected, toggle } =
+    useCompareTools(tool);
+
+  return (
+    <>
+      <span data-testid="selected">{String(isSelected)}</span>
+      <span data-testid="limit">{String(isLimitReached)}</span>
+      <button type="button" onClick={toggle}>
+        Toggle
+      </button>
+      <button type="button" onClick={() => setSelected(true)}>
+        Select
+      </button>
+      <button type="button" onClick={() => setSelected(false)}>
+        Remove
+      </button>
+    </>
+  );
+};
+
+const renderCompareHarness = (tool, initialTools = []) => {
+  window.localStorage.setItem(
+    'cca-compare-tools',
+    JSON.stringify(initialTools),
+  );
+
+  return render(
+    <JotaiProvider>
+      <CompareHarness tool={tool} />
+    </JotaiProvider>,
+  );
+};
+
+describe('Compare Tools utilities', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    window.localStorage.clear();
+  });
+
+  it('resolves comparison identifiers and titles from supported shapes', () => {
+    expect(getCompareToolUid({ cca_uid: { raw: 'cca-id' } })).toBe('cca-id');
+    expect(getCompareToolUid({ UID: 'plone-id' })).toBe('plone-id');
+    expect(getCompareToolUid({ _result: { cca_uid: { raw: 'raw-id' } } })).toBe(
+      'raw-id',
+    );
+    expect(getCompareToolUid({})).toBe('');
+    expect(getCompareToolTitle({ title: 'Tool title' })).toBe('Tool title');
+    expect(getCompareToolTitle({})).toBe('');
+  });
+
+  it('normalizes paths and removes query strings and hashes', () => {
+    expect(getPathname()).toBe('');
+    expect(getPathname('https://example.com/en/tools/?a=1#result')).toBe(
+      '/en/tools',
+    );
+    expect(getPathname('/en/tools')).toBe('/en/tools');
+  });
+
+  it('builds a localized comparison location with at most four tools', () => {
+    const tools = [
+      { uid: 'one' },
+      { uid: '' },
+      { uid: 'two' },
+      { uid: 'three' },
+      { uid: 'four' },
+      { uid: 'five' },
+    ];
+
+    expect(
+      getCompareLocation(
+        tools,
+        { landingPageURL: '/en/navigator/tool-catalogue' },
+        '/en/navigator/tool-catalogue?q=test',
+        'ro',
+      ),
+    ).toEqual({
+      pathname: '/ro/navigator/compare',
+      search: '?uid=one&uid=two&uid=three',
+      state: { returnURL: '/en/navigator/tool-catalogue?q=test' },
+    });
+    expect(MAX_COMPARE_TOOLS).toBe(4);
+    expect(getCompareLocation([], {}, undefined)).toEqual({
+      pathname: '/en/navigator/compare',
+      search: '',
+      state: { returnURL: undefined },
+    });
+  });
+
+  it('fetches and converts matching search results', async () => {
+    class ResultModel {
+      constructor(hit, config) {
+        this.hit = hit;
+        this.config = config;
+      }
+    }
+    const appConfig = {
+      index_name: 'data_searchui',
+      resultItemModel: { factory: 'resultModel' },
+    };
+    const registry = {
+      searchui: { navigatorCatalogueSearch: appConfig },
+      resolve: { resultModel: ResultModel },
+    };
+    runRequest.mockResolvedValue({
+      body: { hits: { hits: [{ _id: 'one' }, { _id: 'two' }] } },
+    });
+
+    const results = await fetchResultsByUid(['one', 'two'], registry);
+
+    expect(rebind).toHaveBeenCalledWith(appConfig);
+    expect(applyConfigurationSchema).toHaveBeenCalledWith(appConfig);
+    expect(runRequest).toHaveBeenCalledWith(
+      {
+        index: 'data_searchui',
+        size: 2,
+        query: {
+          bool: {
+            minimum_should_match: 1,
+            should: [
+              { terms: { 'cca_uid.keyword': ['one', 'two'] } },
+              { terms: { cca_uid: ['one', 'two'] } },
+            ],
+          },
+        },
+      },
+      appConfig,
+    );
+    expect(results).toHaveLength(2);
+    expect(results[0]).toBeInstanceOf(ResultModel);
+  });
+
+  it('handles missing hits and configurations without an index', async () => {
+    const registry = {
+      searchui: {
+        navigatorCatalogueSearch: {
+          resultItemModel: { factory: 'resultModel' },
+        },
+      },
+      resolve: { resultModel: class ResultModel {} },
+    };
+    runRequest.mockResolvedValue({});
+
+    await expect(fetchResultsByUid(['one'], registry)).resolves.toEqual([]);
+    expect(runRequest.mock.calls[0][0]).not.toHaveProperty('index');
+  });
+
+  it('adds, toggles, and removes a comparison tool', () => {
+    renderCompareHarness({ uid: 'one', title: 'Tool one' });
+
+    expect(screen.getByTestId('selected')).toHaveTextContent('false');
+    expect(screen.getByTestId('limit')).toHaveTextContent('false');
+
+    fireEvent.click(screen.getByText('Toggle'));
+    expect(screen.getByTestId('selected')).toHaveTextContent('true');
+    expect(
+      JSON.parse(window.localStorage.getItem('cca-compare-tools')),
+    ).toEqual([{ uid: 'one', title: 'Tool one' }]);
+
+    fireEvent.click(screen.getByText('Select'));
+    expect(screen.getByTestId('selected')).toHaveTextContent('true');
+
+    fireEvent.click(screen.getByText('Remove'));
+    expect(screen.getByTestId('selected')).toHaveTextContent('false');
+    expect(
+      JSON.parse(window.localStorage.getItem('cca-compare-tools')),
+    ).toEqual([]);
+  });
+
+  it('does not add tools without an identifier', () => {
+    renderCompareHarness({ title: 'Missing UID' });
+
+    fireEvent.click(screen.getByText('Select'));
+    expect(screen.getByTestId('selected')).toHaveTextContent('false');
+  });
+
+  it('enforces the comparison limit', () => {
+    const initialTools = Array.from(
+      { length: MAX_COMPARE_TOOLS },
+      (_, index) => ({
+        uid: `tool-${index}`,
+      }),
+    );
+    renderCompareHarness({ uid: 'extra' }, initialTools);
+
+    expect(screen.getByTestId('limit')).toHaveTextContent('true');
+    fireEvent.click(screen.getByText('Select'));
+    expect(screen.getByTestId('selected')).toHaveTextContent('false');
+  });
+});

package/src/components/theme/Views/ExtendedToolView.jsx

@@ -0,0 +1,409 @@
+import { Button, Container, Grid, Icon } from 'semantic-ui-react';
+import {
+  CompareToolsPanel,
+  PortalMessage,
+} from '@eeacms/volto-cca-policy/components';
+import {
+  HTMLField,
+  TextField,
+  BooleanField,
+  VocabularyField,
+  ContentMetadata,
+  ItemLogo,
+  DocumentsList,
+} from '@eeacms/volto-cca-policy/helpers';
+import { defineMessages, useIntl } from 'react-intl';
+import config from '@plone/volto/registry';
+import { useCompareTools } from '../CompareTools/utils';
+import { formatFunctionalityScore } from '../../Search/NavigatorCatalogue/utils';
+
+const ExtendedToolView = (props) => {
+  const { content = {} } = props;
+  const {
+    title = '',
+    acronym = '',
+    long_description,
+    tool_provider,
+    public_private_mode,
+    hyperlink,
+    description,
+    coder_1,
+    coder_2,
+    only_interactive_support_tool,
+    adaptation_cycle_step,
+    updating_cycle_of_the_tool,
+    language_accessibility,
+    free_access,
+    intended_user_groups,
+    place_of_implementation,
+    type_of_data,
+    data_sources,
+    license_status,
+    user_support_provisions,
+    tool_validation_use,
+    number_of_users_tool,
+    tool_provider_mode,
+    adaptation_support_cycle_step,
+    tool_available_english,
+    tool_available_language,
+    type_of_outputs,
+    temporality_of_data,
+    spatial_resolution,
+    underlying_data_maintenance,
+    // nature_based_solution,
+    // just_resilience,
+    // cost_benefit_ratio,
+    accessibility_and_usability,
+    functionality,
+    strengths_and_possible_limitations,
+  } = content;
+
+  const availableLanguageValues = [];
+  if (tool_available_english) {
+    availableLanguageValues.push('English');
+  }
+  if (tool_available_language) {
+    availableLanguageValues.push(tool_available_language);
+  }
+  const availableLanguageText = availableLanguageValues.join(', ');
+  const hasHyperlink = Boolean(hyperlink && hyperlink.length > 0);
+  const hasCompareTool = Boolean(content.UID);
+
+  const item_title = acronym ? title + ' (' + acronym + ')' : title;
+  const compareTool = {
+    uid: content.UID,
+    title,
+    href: content['@id'],
+  };
+  const { isSelected, isLimitReached, toggle } = useCompareTools(compareTool);
+
+  const messages = defineMessages({
+    yes: { id: 'YES', defaultMessage: 'YES' },
+    no: { id: 'NO', defaultMessage: 'NO' },
+    intended_user_groups: {
+      id: 'Intended User Groups',
+      defaultMessage: 'Intended User Groups',
+    },
+    tool_provider: { id: 'Tool provider', defaultMessage: 'Tool provider' },
+    only_interactive_support_tool: {
+      id: 'Only online interactive support tool',
+      defaultMessage: 'Only online interactive support tool',
+    },
+    adaptation_cycle_step: {
+      id: 'Supports ≥1 adaptation cycle step',
+      defaultMessage: 'Supports ≥1 adaptation cycle step',
+    },
+    updating_cycle_of_the_tool: {
+      id: 'Updating cycle of the tool',
+      defaultMessage: 'Updating cycle of the tool',
+    },
+    language_accessibility: {
+      id: 'Language Accessibility',
+      defaultMessage: 'Language Accessibility',
+    },
+    free_access: {
+      id: 'Free [full or core functionality] access',
+      defaultMessage: 'Free [full or core functionality] access',
+    },
+    place_of_implementation: {
+      id: 'Place of implementation',
+      defaultMessage: 'Place of implementation',
+    },
+    type_of_data: { id: 'Type of data', defaultMessage: 'Type of data' },
+    data_sources: { id: 'Data sources', defaultMessage: 'Data sources' },
+    license_status: { id: 'License status', defaultMessage: 'License status' },
+    user_support_provisions: {
+      id: 'User support provisions',
+      defaultMessage: 'User support provisions',
+    },
+    tool_validation_use: {
+      id: 'Tool validation use',
+      defaultMessage: 'Tool validation use',
+    },
+    number_of_users_tool: {
+      id: 'Number of users / uptake',
+      defaultMessage: 'Number of users / uptake',
+    },
+    tool_provider_mode: {
+      id: 'Tool provider',
+      defaultMessage: 'Tool provider',
+    },
+    adaptation_support_cycle_step: {
+      id: 'Adaptation Support Cycle Step',
+      defaultMessage: 'Adaptation Support Cycle Step',
+    },
+    tool_available_language: {
+      id: 'Available language',
+      defaultMessage: 'Available language',
+    },
+    type_of_outputs: {
+      id: 'Type of outputs',
+      defaultMessage: 'Type of outputs',
+    },
+    temporality_of_data: {
+      id: 'Temporality of data',
+      defaultMessage: 'Temporality of data',
+    },
+    nature_based_solution: {
+      id: 'Nature-based solution',
+      defaultMessage: 'Nature-based solution',
+    },
+    just_resilience: {
+      id: 'Just resilience',
+      defaultMessage: 'Just resilience',
+    },
+    cost_benefit_ratio: {
+      id: 'Cost-benefit ratio',
+      defaultMessage: 'Cost-benefit ratio',
+    },
+    accessibility_and_usability: {
+      id: 'Accessibility and usability',
+      defaultMessage: 'Accessibility and usability',
+    },
+    functionality: { id: 'Functionality', defaultMessage: 'Functionality' },
+    strengths_and_possible_limitations: {
+      id: 'Strengths and possible limitations of the tool',
+      defaultMessage: 'Strengths and possible limitations of the tool',
+    },
+    public_private_mode: {
+      id: 'Public/private',
+      defaultMessage: 'Public/private',
+    },
+    spatial_resolution: {
+      id: 'Spatial resolution',
+      defaultMessage: 'Spatial resolution',
+    },
+    underlying_data_maintenance: {
+      id: 'Underlying data maintenance',
+      defaultMessage: 'Underlying data maintenance',
+    },
+    addToComparison: {
+      id: 'Add to comparison',
+      defaultMessage: 'Add to comparison',
+    },
+    openTool: {
+      id: 'Open tool',
+      defaultMessage: 'Open tool',
+    },
+    share: {
+      id: 'Share',
+      defaultMessage: 'Share',
+    },
+    linkCopied: {
+      id: 'Link copied',
+      defaultMessage: 'Link copied',
+    },
+  });
+  const intl = useIntl();
+
+  const {
+    blocks: { blocksConfig },
+  } = config;
+  const TitleBlockView = blocksConfig?.title?.view || (() => null);
+  const titleBlockData = { ...content, title: item_title, image: '' };
+
+  return (
+    <div className="db-item-view">
+      <TitleBlockView
+        {...props}
+        data={{
+          '@type': 'title',
+          info: [{ description: '' }],
+          hideContentType: true,
+          hideCreationDate: true,
+          hideModificationDate: true,
+          hidePublishingDate: true,
+          hideDownloadButton: false,
+          hideShareButton: false,
+          subtitle: 'Tool',
+        }}
+        metadata={titleBlockData}
+        properties={titleBlockData}
+      />
+      <Container>
+        {(hasHyperlink || hasCompareTool) && (
+          <div className="extended-tool-compare-action">
+            {hasHyperlink && (
+              <Button
+                as="a"
+                primary
+                href={hyperlink}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <Icon className="ri-external-link-line" />
+                <span>{intl.formatMessage(messages.openTool)}</span>
+              </Button>
+            )}
+            {hasCompareTool && (
+              <Button
+                primary
+                inverted
+                disabled={isSelected || isLimitReached}
+                aria-pressed={isSelected}
+                onClick={toggle}
+              >
+                <Icon className="ri-layout-column-line" />
+                <span>{intl.formatMessage(messages.addToComparison)}</span>
+              </Button>
+            )}
+          </div>
+        )}
+        <CompareToolsPanel />
+        <PortalMessage content={content} />
+        <Grid columns="12">
+          <Grid.Row>
+            <Grid.Column
+              mobile={12}
+              tablet={12}
+              computer={8}
+              className="col-left"
+            >
+              <ItemLogo {...props} />
+
+              <HTMLField value={long_description} />
+              <TextField
+                label={intl.formatMessage(messages.tool_provider)}
+                value={tool_provider}
+              />
+              <TextField
+                label={intl.formatMessage(messages.public_private_mode)}
+                value={public_private_mode}
+              />
+              <HTMLField value={description} />
+              <TextField label="Coder1" value={coder_1} />
+              <TextField label="Coder2" value={coder_2} />
+              <BooleanField
+                label={intl.formatMessage(
+                  messages.only_interactive_support_tool,
+                )}
+                value={only_interactive_support_tool}
+                yesLabel={intl.formatMessage(messages.yes)}
+                noLabel={intl.formatMessage(messages.no)}
+              />
+              <BooleanField
+                label={intl.formatMessage(messages.adaptation_cycle_step)}
+                value={adaptation_cycle_step}
+                yesLabel={intl.formatMessage(messages.yes)}
+                noLabel={intl.formatMessage(messages.no)}
+              />
+              <BooleanField
+                label={intl.formatMessage(messages.updating_cycle_of_the_tool)}
+                value={updating_cycle_of_the_tool}
+                yesLabel={intl.formatMessage(messages.yes)}
+                noLabel={intl.formatMessage(messages.no)}
+              />
+              <BooleanField
+                label={intl.formatMessage(messages.language_accessibility)}
+                value={language_accessibility}
+                yesLabel={intl.formatMessage(messages.yes)}
+                noLabel={intl.formatMessage(messages.no)}
+              />
+              <BooleanField
+                label={intl.formatMessage(messages.free_access)}
+                value={free_access}
+                yesLabel={intl.formatMessage(messages.yes)}
+                noLabel={intl.formatMessage(messages.no)}
+              />
+              <VocabularyField
+                label={intl.formatMessage(messages.intended_user_groups)}
+                values={intended_user_groups}
+              />
+              <VocabularyField
+                label={intl.formatMessage(messages.place_of_implementation)}
+                values={place_of_implementation}
+              />
+              <VocabularyField
+                label={intl.formatMessage(messages.type_of_data)}
+                values={type_of_data}
+              />
+              <VocabularyField
+                label={intl.formatMessage(messages.data_sources)}
+                values={data_sources}
+              />
+              <VocabularyField
+                label={intl.formatMessage(messages.license_status)}
+                values={license_status}
+              />
+              <VocabularyField
+                label={intl.formatMessage(messages.user_support_provisions)}
+                values={user_support_provisions}
+              />
+              <VocabularyField
+                label={intl.formatMessage(messages.tool_validation_use)}
+                values={tool_validation_use}
+              />
+              <VocabularyField
+                label={intl.formatMessage(messages.number_of_users_tool)}
+                values={number_of_users_tool}
+              />
+              <VocabularyField
+                label={intl.formatMessage(messages.tool_provider_mode)}
+                values={tool_provider_mode}
+              />
+              <VocabularyField
+                label={intl.formatMessage(
+                  messages.adaptation_support_cycle_step,
+                )}
+                values={adaptation_support_cycle_step}
+              />
+              <TextField
+                label={intl.formatMessage(messages.tool_available_language)}
+                value={availableLanguageText}
+              />
+              <VocabularyField
+                label={intl.formatMessage(messages.type_of_outputs)}
+                values={type_of_outputs}
+              />
+              <VocabularyField
+                label={intl.formatMessage(messages.temporality_of_data)}
+                values={temporality_of_data}
+              />
+              <TextField
+                label={intl.formatMessage(messages.spatial_resolution)}
+                value={spatial_resolution}
+              />
+              <TextField
+                label={intl.formatMessage(messages.functionality)}
+                value={
+                  functionality === null || functionality === undefined
+                    ? null
+                    : formatFunctionalityScore(functionality)
+                }
+              />
+              <TextField
+                label={intl.formatMessage(messages.underlying_data_maintenance)}
+                value={underlying_data_maintenance}
+              />
+              <VocabularyField
+                label={intl.formatMessage(messages.accessibility_and_usability)}
+                values={
+                  accessibility_and_usability
+                    ? [accessibility_and_usability]
+                    : []
+                }
+              />
+              <TextField
+                label={intl.formatMessage(
+                  messages.strengths_and_possible_limitations,
+                )}
+                value={strengths_and_possible_limitations}
+              />
+            </Grid.Column>
+            <Grid.Column
+              mobile={12}
+              tablet={12}
+              computer={4}
+              className="col-right"
+            >
+              <ContentMetadata {...props} />
+              <DocumentsList {...props} />
+            </Grid.Column>
+          </Grid.Row>
+        </Grid>
+      </Container>
+    </div>
+  );
+};
+
+export default ExtendedToolView;