UHF-8815: Lang attribute for job search results

src/js/react/apps/job-search/components/results/ResultCard.tsx

@@ -9,27 +9,22 @@ import { urlAtom } from '../../store';
 
 const getResultCard = ({
   title,
-  field_copied,
-  field_original_language,
   field_employment,
   field_employment_type,
   field_job_duration,
   field_jobs,
   field_organization_name,
   field_recruitment_id,
   unpublish_on,
-  url
+  url,
+  _language
 }: Job) => {
-  const customAtts: HTMLAttributes<HTMLHeadingElement | HTMLDivElement> = {};
-  if (field_copied?.length && field_original_language?.length) {
-    const [ lang ] = field_original_language;
-    customAtts.lang = lang;
-  }
+  const langAttribute = { lang: _language === currentLanguage ? undefined : _language };
 
   const heading = title[0];
   const cardTitle = (
     <>
-      <span {...customAtts}>{heading}</span>
+      <span {...langAttribute}>{heading}</span>
       {field_jobs?.[0] > 1 && <span>{` (${field_jobs} ${Drupal.t('jobs')})`}</span>}
     </>
   );
@@ -76,6 +71,7 @@ const getResultCard = ({
       dateLabel={Drupal.t('Application period ends')}
       daterange={field_job_duration?.[0].toString()}
       dateRangeLabel={Drupal.t('Employment contract')}
+      langAttribute={langAttribute}
     />
   );
 };

src/js/react/apps/job-search/enum/IndexFields.ts

@@ -1,6 +1,5 @@
 const IndexFields = {
   LANGUAGE: '_language',
-  COPIED: 'field_copied',
   EMPLOYMENT: 'field_employment',
   EMPLOYMENT_ID: 'employment_id',
   EMPLOYMENT_TYPE: 'field_employment_type',

src/js/react/apps/job-search/hooks/useQueryString.tsx

@@ -14,13 +14,6 @@ const useQueryString = (urlParams: URLParams): string => {
   const must: any[] = [{
     // Legacy sanity check, make sure forced translations aren't included
     bool: {
-      must: [
-        {
-          term: {
-            [IndexFields.COPIED]: false,
-          },
-        },
-      ],
       must_not: {
         term: {
           [IndexFields.PROMOTED]: true

src/js/react/apps/job-search/query/queries.ts

@@ -45,11 +45,6 @@ export const PROMOTED_IDS = {
           term: {
             [IndexFields.PROMOTED]: true,
           }
-        },
-        {
-          term: {
-            [IndexFields.COPIED]: false
-          }
         }
       ]
     }
@@ -91,14 +86,6 @@ export const AGGREGATIONS = {
   query: {
     bool: {
       filter: [nodeFilter],
-      // Legacy: filter out "forced" translations
-      must: [
-        {
-          term: {
-            [IndexFields.COPIED]: false,
-          },
-        },
-      ],
     },
   },
 };
@@ -135,11 +122,6 @@ export const LANGUAGE_OPTIONS = {
   query: {
     bool: {
       filter: [
-        {
-          term: {
-            field_copied: false,
-          },
-        },
         nodeFilter,
       ],
     },

src/js/react/apps/job-search/types/Job.ts

@@ -2,7 +2,6 @@ type Job = {
   _language: string;
   field_employment: string[];
   field_employment_type: string[];
-  field_copied: boolean[];
   field_job_duration: string[];
   field_jobs: number[];
   field_organization: string[];

src/js/react/common/Card.tsx

@@ -5,11 +5,11 @@ import type TagType from '@/types/TagType';
 import Tags from './Tags';
 import Icon from './Icon';
 
-const Metarow = ({ icon, label, content} : MetadataType) => (
+const Metarow = ({ icon, label, content, langAttribute } : MetadataType) => (
   <div className="card__meta">
     <span className="card__meta__icon"><Icon icon={icon} /></span>
     <span className="card__meta__label">{label}: </span>
-    <span className="card__meta__content">{content}</span>
+    <span className="card__meta__content" {...langAttribute}>{content}</span>
   </div>
 );
 
@@ -34,6 +34,7 @@ export type CardItemProps = {
   dateRangeLabel?: string;
   theme?: string;
   themeLabel?: string;
+  langAttribute?: any;
   language?: string;
   languageLabel?: string;
   time?: string;
@@ -61,6 +62,7 @@ function CardItem({
   themeLabel,
   daterange,
   dateRangeLabel,
+  langAttribute,
   language,
   languageLabel,
   time,
@@ -101,7 +103,7 @@ function CardItem({
             { cardDescriptionHtml ?
               parse(cardDescription)
               :
-              <p>{ cardDescription }</p>
+              <p {...langAttribute}>{ cardDescription }</p>
             }
           </div>
         }
@@ -124,7 +126,7 @@ function CardItem({
             <Metarow icon="clock" label={dateLabel || Drupal.t('Date')} content={date} />
           }
           {daterange &&
-            <Metarow icon="calendar" label={dateRangeLabel|| Drupal.t('Estimated schedule')} content={daterange} />
+            <Metarow icon="calendar" label={dateRangeLabel|| Drupal.t('Estimated schedule')} content={daterange} langAttribute={langAttribute} />
           }
           {theme &&
             <Metarow icon="locate" label={themeLabel || Drupal.t('Theme')} content={theme} />
@@ -139,7 +141,7 @@ function CardItem({
 
         {cardTags &&
           <div className="card__tags">
-            <Tags tags={cardTags} />
+            <Tags tags={cardTags} langAttribute={langAttribute} />
           </div>
         }
       </div>

src/js/react/common/Tags.tsx

@@ -3,9 +3,10 @@ import type TagType from '@/types/TagType';
 interface TagsProps {
   tags: Array<TagType>;
   isInteractive?: boolean;
+  langAttribute?: any;
 }
 
-export function Tags({ tags, isInteractive, }: TagsProps): JSX.Element {
+export function Tags({ tags, isInteractive, langAttribute }: TagsProps): JSX.Element {
   const typeClass = isInteractive ? 'content-tags__tags--interactive' : 'content-tags__tags--static';
 
   return (
@@ -16,7 +17,7 @@ export function Tags({ tags, isInteractive, }: TagsProps): JSX.Element {
       }>
       <ul className={`content-tags__tags ${typeClass}`}>
         {tags.map((item: TagType, key: number) => (
-          <li key={`{item.tag}-${key}`} className={`content-tags__tags__tag ${item.color ? `content-tags__tags__tag--${item.color}` : ''}`}>
+          <li key={`{item.tag}-${key}`} className={`content-tags__tags__tag ${item.color ? `content-tags__tags__tag--${item.color}` : ''}`} {...langAttribute}>
             <span>{item.tag}</span>
           </li>
         ),

src/js/types/MetadataType.ts

@@ -2,6 +2,7 @@ type MetadataType = {
   icon: string;
   label: string;
   content: JSX.Element | string | Array<string>;
+  langAttribute?: any;
 };
 
 export default MetadataType;