Merge pull request #102 from GAIA-X4PLC-AAD/feature/82-filter-based-o…

…n-values-from-shape-3

Rework search Page Resources: Filter based on values from shape 3

.eslintrc.json

@@ -19,6 +19,10 @@
         "import"
     ],
     "rules": {
+        "quote-props": [
+            "warn",
+            "as-needed"
+        ],
         "no-const-assign": "warn",
         "no-this-before-super": "warn",
         "no-undef": "warn",
@@ -44,7 +48,10 @@
         "no-trailing-spaces": ["error"],
         "quotes": ["error", "single"],
         "object-curly-spacing": ["error", "always"],
-        "eol-last": ["error", "always"]
+        "eol-last": [
+            "error",
+            "always"
+        ]
     },
     "extends": [
         "eslint:recommended",

.github/workflows/branch-push.yaml

@@ -0,0 +1,45 @@
+name: CI pipeline
+
+on:
+  pull_request:
+    branches:
+      - "**"  # Runs on all pull requests
+
+jobs:
+  check-test-coverage:
+    # The coverage is configured inside 'jest.config.js' by setting the 'coverageThreshold'
+    name: Checking test coverage (must be over 90%)
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [ 20.17 ]  # Define Node.js latest LTS version (update as needed)
+
+    steps:
+      # Step 1: Checkout the code
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      # Step 2: Set up Node.js with the required version
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      # Step 3: Install dependencies
+      - name: Install dependencies
+        run: npm install
+
+      # Step 4: Run Jest tests
+      - name: Run Jest tests
+        run: npm test -- --coverage
+        env:
+          CI: true  # Ensures Jest runs in CI mode
+
+      # Step 5: Upload test coverage results (optional, if you want to store it in the workflow run artifacts)
+      - name: Upload coverage report
+        uses: actions/upload-artifact@v4
+        with:
+          name: coverage-report
+          path: coverage/lcov-report/  # Path to the HTML coverage report
+          retention-days: 7

jest.config.js

@@ -24,6 +24,21 @@ module.exports = {
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
 
   moduleNameMapper: {
-    '^axios$': '<rootDir>/node_modules/axios/dist/node/axios.cjs'
-  }
+    '^axios$': '<rootDir>/node_modules/axios/dist/node/axios.cjs',
+    '^react-i18next$': '<rootDir>/tests/__fixtures__/mocks/react-i18next.js',               // Map react-i18next to the mock file
+    '\\.(jpg|jpeg|png|gif|webp|svg)$': '<rootDir>/tests/__fixtures__/mocks/iconsMock.js',   // Map image files to iconsMock.js
+    '\\.module\\.css$': 'identity-obj-proxy',                                               // CSS module files
+    '\\.css$': '<rootDir>/tests/__fixtures__/mocks/stylesMock.js',                          // Optional: Mock regular CSS files
+  },
+
+  // Jest configurations
+  collectCoverage: true,                                                                    // Enable coverage collection
+  coverageDirectory: 'coverage',                                                            // Output folder for coverage
+  collectCoverageFrom: ['./src/**'],                                                        // Specify the path from which Jest should collect coverage
+  coverageReporters: ['json', 'lcov', 'text', 'clover', 'json-summary'],                    // Add 'json-summary' to generate coverage-summary.json
+  coverageThreshold: {
+    global: {
+      lines: 90                                                                             // Line coverage must be over 90%
+    }
+  },
 };

jest.setup.js

@@ -1,4 +1,5 @@
 const { TextEncoder, TextDecoder } = require('util');
+require('dotenv').config();
 
 global.TextEncoder = TextEncoder;
 global.TextDecoder = TextDecoder;

package.json

@@ -97,6 +97,7 @@
     "@types/jest": "^29.5.13",
     "@types/n3": "^1.16.4",
     "customize-cra": "^1.0.0",
+    "dotenv": "^16.4.5",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-react": "^7.29.4",
     "jest": "^29.6.2",

src/Search.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import { Component } from 'react';
+import React, { Component } from 'react';
 import { useTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
 import { useNavigate } from 'react-router-dom';

src/actions/types.js → src/actions/types.ts

@@ -1,17 +1,13 @@
-export const SIGN_IN_MENU = 'SIGN_IN_MENU';
-export const NOT_SIGN_IN_MENU = 'NOT_SIGN_IN_MENU';
 export const SIGN_IN = 'SIGN_IN';
 export const SIGN_OUT = 'SIGN_OUT';
 export const UPDATE_SEARCH_FILTER_CRITERIA = 'UPDATE_SEARCH_FILTER_CRITERIA';
 export const UPDATE_SEARCH_PAGE_NUMBER = 'UPDATE_SEARCH_PAGE_NUMBER';
 export const UPDATE_SEARCH_TYPE = 'UPDATE_SEARCH_TYPE';
 export const UPDATE_SEARCH_TYPE_AND_TERM = 'UPDATE_SEARCH_TYPE_AND_TYPE';
 export const UPDATE_SEARCH_FROM_HOME = 'UPDATE_SEARCH_FROM_HOME';
-export const UPDATE_SELECTED_PAGE = 'UPDATE_SELECTED_PAGE';
 export const SET_DESCRIPTOR_FILE = 'SET_DESCRIPTOR_FILE';
 export const RESET_DESCRIPTOR_FILE = 'RESET_DESCRIPTOR_FILE';
 export const LCM_SERVICES_LOADED = 'LCM_SERVICES_LOADED';
 export const RESET_LCM_SERVICES = 'RESET_LCM_SERVICES';
 export const LCM_SELECT_SERVICE = 'LCM_SELECT_SERVICE';
 export const CHANGE_USER_ROLE = 'CHANGE_USER_ROLE'
-

src/common/auth.js

@@ -13,25 +13,25 @@ export function userData() {
 
     return {
       user: {
-        'first_name': dToken.given_name,
-        'family_name': dToken.family_name,
-        'email': dToken.email,
-        'user_role': retrieveRole(dToken),
-        'organization_url': dToken.prWeb,
-        'organization_name': dToken.prName,
-        'organization_realm': dToken.prRealm
+        first_name: dToken.given_name,
+        family_name: dToken.family_name,
+        email: dToken.email,
+        user_role: retrieveRole(dToken),
+        organization_url: dToken.prWeb,
+        organization_name: dToken.prName,
+        organization_realm: dToken.prRealm
       }
     }
   } else {
     return {
       user: {
-        'first_name': null,
-        'family_name': null,
-        'email': null,
-        'user_role': VR_ROLE,
-        'organization_url': null,
-        'organization_name': null,
-        'organization_realm': null
+        first_name: null,
+        family_name: null,
+        email: null,
+        user_role: VR_ROLE,
+        organization_url: null,
+        organization_name: null,
+        organization_realm: null
       }
     }
   }

src/components/ItemCard/ItemCard.tsx

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import React, { FC } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { Ontology } from '../../types/ontologies.model';
@@ -33,7 +33,7 @@ const ItemCard: FC<IItemCard> = ({
   const { t } = useTranslation();
 
   return (
-    <div className={styles.card}>
+    <div data-testid={getTestId({ ontology, shape, service, resource })} className={styles.card}>
       <div className={styles.label}>
         <Title>{label}</Title>
         {isGaiaXCompliant === undefined ? null : (
@@ -62,3 +62,21 @@ const ItemCard: FC<IItemCard> = ({
 }
 
 export default ItemCard;
+
+const getTestId = ({ ontology, shape, service, resource }:
+  {
+    ontology?: Ontology,
+    shape?: Shape,
+    service?: ServiceOffering,
+    resource?: Resource
+  }) => (
+  ontology
+    ? 'Card:' + ontology.subject
+    : shape
+      ? 'Card:' + shape.shaclShapeName
+      : service
+        ? 'Card:' + service.uri + ':' + service.name
+        : resource
+          ? 'Card:' + resource.uri + ':' + resource.name
+          : ''
+)

src/components/ItemCard/ResourceCardContent.tsx

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import React, { FC } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 

src/components/Routes.tsx

@@ -25,7 +25,7 @@ import ProtectedRoute from './protectedRoute/ProtectedRoute';
 import ProvideAttributes from './provide/ProvideAttributes';
 import ProvideOverview from './provide/ProvideOverview';
 import ProvideSelection from './provide/ProvideSelection';
-import Resources from './resources/Resources';
+import ResourceSearchPage from './resources/ResourceSearchPage';
 import ServiceOfferings from './serviceOfferings/ServiceOfferings';
 import Shapes from './shapes/Shapes';
 import SolutionPackagingView from './solutionPackaging/SolutionPackagingView';
@@ -42,7 +42,7 @@ const Routes: FC = () => (
       <Route path="/home" element={ViewContainer(<Home />)} />
       <Route path="/service-offerings" element={ViewContainer(<ProtectedRoute><ServiceOfferings/></ProtectedRoute>)}/>
       <Route path="/participants" element={ViewContainer(<Participants />)} />
-      <Route path="/resources" element={ViewContainer(<ProtectedRoute><Resources /></ProtectedRoute>)} />
+      <Route path="/resources" element={ViewContainer(<ProtectedRoute><ResourceSearchPage/></ProtectedRoute>)}/>
       <Route path="/details/:resourceId" element={ViewContainer(<ProtectedRoute><DetailsPage/></ProtectedRoute>)}/>
       <Route path="/services" element={ViewContainer(<SearchView type="services" />)} />
       <Route path="/help" element={ViewContainer(<WorkInProgress component="Help" />)} />

src/components/Title/Title.tsx

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import React, { FC } from 'react';
 
 import styles from './Title.module.css';
 

src/components/buttons/GaiaXButton.tsx

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import React, { FC } from 'react';
 
 import styles from './GaiaXButton.module.css';
 

src/components/cards/CardContainer.tsx

@@ -1,4 +1,4 @@
-import { FC, ReactNode } from 'react';
+import React, { FC, ReactNode } from 'react';
 
 import Vertical from '../layout/Vertical';
 

src/components/dashboard/dashboard_view.js

@@ -110,7 +110,7 @@ const ServicesLoadingListView = ({ url, title, type }) => {
       <LoadingView
         url={url}
         successView={ServicesListView}
-        params={{ 'title': title, 'type': type }}
+        params={{ title: title, type: type }}
       />
     </>
   )

src/components/dashboard/lcm/LcmFinal.js

@@ -163,7 +163,7 @@ class LcmFinal extends Component {
 
   _getServicesRequest() {
     const request = {
-      'services': [
+      services: [
       ]
     }
 

src/components/dashboard/plot_view.js

@@ -82,7 +82,7 @@ const PlotLoadingView = ({ url, title, }) => {
   return <LoadingView
     url={url}
     successView={PlotSuccessView}
-    params={{ 'title': title }}
+    params={{ title: title }}
   />
 }
 

src/components/dashboard/side_sections_view.js

@@ -113,12 +113,12 @@ const SideSectionsView = () => {
       <LoadingView
         url={_transactionsUrl}
         successView={sectionView}
-        params={{ 'title': t('dashboard.my_transactions') }}
+        params={{ title: t('dashboard.my_transactions') }}
       />
       <LoadingView
         url={_newsUrl}
         successView={sectionView}
-        params={{ 'title': t('dashboard.news') }}
+        params={{ title: t('dashboard.news') }}
       />
     </>
   )

src/components/discovery/DiscoveryItem.js

@@ -5,9 +5,9 @@ import TileFactory from './TileFactory';
 
 const DiscoveryItem = ({ type }) => {
   const id =  useParams();
-  const dataItem = { 'type': 'data','logo': '/images/logos/placeholder.png', 'ppr_url': 'URL to PPR', 'name': 'data name','ppr_name': 'PPR name', 'id': 'data id', 'short_description': 'String', 'location': 'String' };
-  const pprItem = {  'type': 'ppr','logo': '/images/logos/placeholder.png', 'ppr_url': 'URL to PPR', 'name': 'PPR name','id': 'PPR id','sustainability': 'String','availability': 'String', 'location': 'String' };
-  const serviceItem = { 'type': 'service','logo': '/images/logos/placeholder.png','name': 'Service name','id': 'service id','ppr_name': 'Provider name','ppr_url': 'URL to PPR','stack': 'String','security': 'String','location': 'String' };
+  const dataItem = { type: 'data',logo: '/images/logos/placeholder.png', ppr_url: 'URL to PPR', name: 'data name',ppr_name: 'PPR name', id: 'data id', short_description: 'String', location: 'String' };
+  const pprItem = {  type: 'ppr',logo: '/images/logos/placeholder.png', ppr_url: 'URL to PPR', name: 'PPR name',id: 'PPR id',sustainability: 'String',availability: 'String', location: 'String' };
+  const serviceItem = { type: 'service',logo: '/images/logos/placeholder.png',name: 'Service name',id: 'service id',ppr_name: 'Provider name',ppr_url: 'URL to PPR',stack: 'String',security: 'String',location: 'String' };
 
   switch (type) {
   case 'data': return TileFactory ({ data: dataItem, id });

src/components/discovery/tabs/description/DescriptionTab.js

@@ -26,7 +26,7 @@ const DescriptionTab = ({ id, type }) => {
   return (
     <LoadingView
       url={URL}
-      params={{ 'type': type }}
+      params={{ type: type }}
       successView={getSuccessView(type)}
     />
   )

src/components/discovery/tabs/screenshots/ScreenshotsTabView.js

@@ -18,12 +18,12 @@ const ScreenshotsTabView = (props,) => {
 
   var _images = (slideImages && slideImages.map((p, index) => {
     return {
-      'original': p['url'],
-      'originalHeight': '500px',
-      'originalWidth': '100%',
-      'thumbnail': p['url'],
+      original: p['url'],
+      originalHeight: '500px',
+      originalWidth: '100%',
+      thumbnail: p['url'],
       // 'thumbnailHeight': '128px',
-      'thumbnailWidth': '128px'
+      thumbnailWidth: '128px'
     }
   })) || []
 

src/components/expandable/down.js

@@ -8,12 +8,12 @@ const Down = ({ isOpen, paddingRight, arrowColor }) => {
   return (
     <Arrow paddingRight={paddingRight}>
       <svg
-        className={cx('rotate', { 'down': isOpen })}
+        className={cx('rotate', { down: isOpen })}
         width="16"
         height="16"
         viewBox="0 0 16 16"
         fill={arrowColor}
-        style={{ 'alignSelf': 'center' }}
+        style={{ alignSelf: 'center' }}
       >
         <path d="M14.8 4L8 9.6 1.2 4 0 5.333 8 12l8-6.667z" />
       </svg>

src/components/filter/Filter.tsx

@@ -1,7 +1,7 @@
-import { FC } from 'react';
+import React, { FC } from 'react';
 
 import Title from '../Title/Title';
-import { Asset } from '../resources/helpers/resourceFilterAssetHelper';
+import { Asset } from '../resources/helpers/resourceFilterHelper';
 
 import styles from './Filter.module.css';
 import { FilterSection } from './FilterSection';

src/components/filter/FilterSection.tsx

@@ -1,6 +1,6 @@
-import { FC } from 'react';
+import React, { FC } from 'react';
 
-import { Asset } from '../resources/helpers/resourceFilterAssetHelper';
+import { Asset } from '../resources/helpers/resourceFilterHelper';
 import Subtitle from '../subtitle/Subtitle';
 
 import styles from './Filter.module.css';

src/components/header/Header.tsx

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import React, { FC } from 'react';
 
 import Title from '../Title/Title';
 

src/components/layout/Horizontal.tsx

@@ -1,4 +1,4 @@
-import { FC, ReactNode } from 'react';
+import React, { FC, ReactNode } from 'react';
 
 import style from './Layout.module.css'
 

src/components/layout/Main.tsx

@@ -1,4 +1,4 @@
-import { FC, ReactNode } from 'react';
+import React, { FC, ReactNode } from 'react';
 
 import style from './Layout.module.css'
 

src/components/layout/Vertical.tsx

@@ -1,4 +1,4 @@
-import { FC, ReactNode } from 'react';
+import React, { FC, ReactNode } from 'react';
 
 import style from './Layout.module.css'
 

src/components/navbar/Navbar.tsx

@@ -3,7 +3,7 @@ import LanguageModal from 'components/modals/LanguageModal';
 import { AuthContext } from 'context/AuthContextProvider';
 import { useNavbar } from 'hooks/useNavbar';
 import i18n from 'i18n';
-import { useContext, useState } from 'react';
+import React, { useContext, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link, NavLink } from 'react-router-dom';