refactor(concept): move page components to sub-folder

.github/workflows/pa11y-ci.yaml

@@ -8,7 +8,7 @@ jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - name: Setup Node
         uses: actions/setup-node@v3
         with:

package.json

@@ -76,7 +76,7 @@
     "core-js-pure": "^3.27.1",
     "deserialize-json-api": "^1.4.0",
     "eslint-import-resolver-typescript": "^3.5.3",
-    "graphql": "^16.8.0",
+    "graphql": "^16.8.1",
     "highlight.js": "^11.7.0",
     "html-react-parser": "^3.0.9",
     "immutable": "^4.2.4",
@@ -106,7 +106,7 @@
     "react-router-breadcrumbs-hoc": "^4.1.0",
     "react-router-dom": "^5.3.4",
     "react-scroll": "^1.8.9",
-    "react-select": "^5.7.0",
+    "react-select": "^5.7.4",
     "reactstrap": "^9.1.5",
     "redux": "^4.2.1",
     "redux-api-middleware": "^3.2.1",
@@ -156,7 +156,7 @@
     "@types/sanitize-html": "^2.8.0",
     "@types/styled-components": "^5.1.24",
     "@types/turndown": "^5.0.1",
-    "@types/webpack": "^5.28.0",
+    "@types/webpack": "^5.28.1",
     "@typescript-eslint/eslint-plugin": "^5.48.0",
     "@typescript-eslint/parser": "^5.59.7",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
@@ -202,10 +202,10 @@
     "ts-node": "^10.9.1",
     "typescript": "^4.9.4",
     "url-loader": "^4.1.1",
-    "webpack": "^5.75.0",
+    "webpack": "^5.87.0",
     "webpack-bundle-analyzer": "^4.8.0",
     "webpack-cli": "^5.0.1",
-    "webpack-dev-server": "^4.11.1",
+    "webpack-dev-server": "^4.15.1",
     "webpack-merge": "^5.8.0"
   },
   "optionalDependencies": {

src/components/details-page/components/details-page/index.tsx

@@ -60,7 +60,6 @@ import withCommunity, {
   Props as CommunityProps
 } from '../../../with-community';
 import Aside from '../aside';
-import RelationsContainer from '../../../../pages/concept-details-page/RelatedConcepts';
 
 interface ExternalProps {
   entity: Entity;
@@ -213,13 +212,7 @@ const DetailsPage: FC<PropsWithChildren<Props>> = ({
 
   const renderContentSections = () =>
     contentSections
-      .map(
-        child =>
-          isValidElement(child) &&
-          (child.type === ContentSection || child.type === RelationsContainer
-            ? child
-            : null)
-      )
+      .map(child => (isValidElement(child) ? child : null))
       ?.filter(Boolean);
 
   const renderAside = () =>

src/pages/concept-details-page/ContactPoint/index.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import {
+  ContentSection,
+  KeyValueList,
+  KeyValueListItem
+} from '../../../components/details-page';
+import translations from '../../../lib/localization';
+import { ConceptContactPoint } from '../../../types';
+
+interface Props {
+  contactPoint: Partial<ConceptContactPoint>;
+}
+
+const ContactPoint = ({ contactPoint }: Props) => (
+  <ContentSection
+    id='contact-information'
+    title={translations.detailsPage.sectionTitles.concept.contactInformation}
+  >
+    <KeyValueList>
+      {contactPoint.email && (
+        <KeyValueListItem
+          property={translations.email}
+          value={
+            <a
+              title={contactPoint.email}
+              href={`mailto:${contactPoint.email}`}
+              rel='noopener noreferrer'
+            >
+              {contactPoint.email}
+            </a>
+          }
+        />
+      )}
+      {contactPoint.telephone && (
+        <KeyValueListItem
+          property={translations.phone}
+          value={contactPoint.telephone}
+        />
+      )}
+    </KeyValueList>
+  </ContentSection>
+);
+
+export default ContactPoint;

src/pages/concept-details-page/Created/index.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import {
+  ContentSection,
+  KeyValueList,
+  KeyValueListItem
+} from '../../../components/details-page';
+import translations from '../../../lib/localization';
+import { formatISO } from '../../../utils/date';
+
+interface Props {
+  created: string;
+}
+
+const Created = ({ created }: Props) => (
+  <ContentSection
+    id='concept-info'
+    title={translations.detailsPage.sectionTitles.concept.conceptInfo}
+    truncate
+  >
+    {created && (
+      <KeyValueList>
+        <KeyValueListItem
+          property={`${translations.dateCreated}:`}
+          value={formatISO(created)}
+        />
+      </KeyValueList>
+    )}
+  </ContentSection>
+);
+
+export default Created;

src/pages/concept-details-page/Description/index.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import Link from '@fellesdatakatalog/link';
+import { ContentSection } from '../../../components/details-page';
+import translations from '../../../lib/localization';
+import MultiLingualField from '../../../components/multilingual-field';
+import SC from './styled';
+import { getTranslateText as translate } from '../../../lib/translateText';
+import { Language } from '../../../types/domain';
+
+interface Props {
+  description: Record<string, string>;
+  selectedLanguages: Language[] | [];
+  sources: Array<{ text?: string; uri?: string }>;
+  sourceRelationship: string | undefined;
+}
+
+const Description = ({
+  description,
+  sources,
+  sourceRelationship,
+  selectedLanguages
+}: Props) => {
+  const renderSources = () => {
+    if (sourceRelationship === 'egendefinert') {
+      return `${translations.compare.source}: ${translations.sourceRelationship[sourceRelationship]}`;
+    }
+
+    return sources?.length ? (
+      <>
+        <span>
+          {`${translations.compare.source}: ${
+            sourceRelationship
+              ? translations.sourceRelationship[sourceRelationship]
+              : ''
+          }`}
+        </span>
+        {sources.map(({ text, uri }, index) => (
+          <span key={`${text}-${uri}-${index}`}>
+            {index > 0 && ','}
+            &nbsp;
+            {uri ? (
+              <Link href={uri} external>
+                {translate(text) || uri}
+              </Link>
+            ) : (
+              translate(text)
+            )}
+          </span>
+        ))}
+      </>
+    ) : null;
+  };
+
+  return (
+    <ContentSection
+      id='description'
+      title={translations.detailsPage.sectionTitles.concept.definition}
+      truncate
+    >
+      <MultiLingualField
+        languages={selectedLanguages}
+        text={description}
+        convertToMarkUp
+      />
+      <SC.Sources>{renderSources()}</SC.Sources>
+    </ContentSection>
+  );
+};
+
+export default Description;

src/pages/concept-details-page/Example/index.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { ContentSection } from '../../../components/details-page';
+import translations from '../../../lib/localization';
+import MultiLingualField from '../../../components/multilingual-field';
+import { Language, TextLanguage } from '../../../types';
+
+interface Props {
+  example: Partial<TextLanguage>;
+  selectedLanguages: Language[];
+}
+
+const Example = ({ example, selectedLanguages }: Props) => (
+  <ContentSection
+    id='example'
+    title={translations.detailsPage.sectionTitles.concept.example}
+  >
+    <MultiLingualField languages={selectedLanguages} text={example} />
+  </ContentSection>
+);
+
+export default Example;

src/pages/concept-details-page/Identifier/index.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { ContentSection } from '../../../components/details-page';
+import translations from '../../../lib/localization';
+
+interface Props {
+  identifier: string;
+}
+
+const Identifier = ({ identifier }: Props) => (
+  <ContentSection
+    id='identifier'
+    title={translations.detailsPage.sectionTitles.concept.identifier}
+  >
+    {identifier}
+  </ContentSection>
+);
+
+export default Identifier;

src/pages/concept-details-page/Range/index.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import Link from '@fellesdatakatalog/link';
+import { ContentSection } from '../../../components/details-page';
+import translations from '../../../lib/localization';
+
+interface Props {
+  range: string;
+  rangeUri: string;
+}
+
+const Range = ({ range, rangeUri }: Props) => (
+  <ContentSection
+    id='range'
+    title={translations.detailsPage.sectionTitles.concept.range}
+  >
+    <Link href={rangeUri} external>
+      {range}
+    </Link>
+  </ContentSection>
+);
+
+export default Range;

src/pages/concept-details-page/RelationsList/index.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { ContentSection } from '../../../components/details-page';
+import translations from '../../../lib/localization';
+import RelationList, {
+  ItemWithRelationType
+} from '../../../components/relation-list';
+import {
+  Concept,
+  Dataset,
+  InformationModel,
+  PublicService
+} from '../../../types';
+
+interface Props {
+  identifier: string | undefined;
+  conceptsRelations: Concept[];
+  datasetsRelations: Dataset[];
+  publicServicesRelations: PublicService[];
+  informationModelsRelations: InformationModel[];
+}
+
+const RelationsList = ({
+  identifier,
+  conceptsRelations,
+  datasetsRelations,
+  publicServicesRelations,
+  informationModelsRelations
+}: Props) => {
+  const publicServicesRelationsWithRelationType: ItemWithRelationType[] =
+    publicServicesRelations.map(relation => ({
+      relation,
+      relationType: translations.sampleData
+    }));
+
+  return (
+    <ContentSection
+      id='relationList'
+      title={translations.detailsPage.relationList.title.concept}
+    >
+      <RelationList
+        parentIdentifier={identifier}
+        concepts={conceptsRelations}
+        datasets={datasetsRelations}
+        publicServices={publicServicesRelationsWithRelationType}
+        informationModels={informationModelsRelations}
+      />
+    </ContentSection>
+  );
+};
+
+export default RelationsList;

src/pages/concept-details-page/Remark/index.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { ContentSection } from '../../../components/details-page';
+import translations from '../../../lib/localization';
+import MultiLingualField from '../../../components/multilingual-field';
+import { Language, TextLanguage } from '../../../types';
+
+interface Props {
+  remark: Partial<TextLanguage>;
+  selectedLanguages: Language[];
+}
+
+const Remark = ({ remark, selectedLanguages }: Props) => (
+  <ContentSection
+    id='remark'
+    title={translations.detailsPage.sectionTitles.concept.remark}
+  >
+    <MultiLingualField
+      languages={selectedLanguages}
+      text={remark}
+      convertToMarkUp
+    />
+  </ContentSection>
+);
+
+export default Remark;