Merge branch 'development' into dependabot/npm_and_yarn/webpack-5.94.0

.github/workflows/merge-to-protected.yml

@@ -24,7 +24,7 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: "16.x"
+          node-version: "20.x"
       - name: Install
         run: npm install
       - name: Prettier Check

Dockerfile

@@ -1,6 +1,6 @@
 # BASE STAGE
 # Prepare node, copy package.json
-FROM node:16-alpine AS base
+FROM node:20-alpine AS base
 WORKDIR /usr/src/app
 COPY package.json package-lock.json ./
 

README.md

@@ -17,7 +17,7 @@ Documentation for developers and system administrators is in the [doc folder](do
 
 ## Running TermIt UI
 
-NodeJS and npm are required to build and run TermIt UI. To run the TermIt UI, it is necessary to provide a value for
+NodeJS 20 and npm 10 are required to build and run TermIt UI. To run the TermIt UI, it is necessary to provide a value for
 `REACT_APP_SERVER_URL` representing the URL of the backend to connect to. Typically, this is done at build time.
 See the documentation for more details and other configuration options.
 

doc/setup.md

@@ -6,8 +6,8 @@ This guide provides information on how to build and deploy TermIt UI.
 
 ### System Requirements
 
-- NodeJS 12.x or later
-- npm 6.x or later
+- NodeJS 20.x or later
+- npm 10.x or later
 
 ### Setup
 
@@ -27,7 +27,7 @@ The following parameters can be configured for the build:
 
 ### Example
 
-1. `npm install`
+1. `npm install --legacy-peer-deps`
 2. `REACT_APP_SERVER_URL=https://kbss.felk.cvut.cz/termit-server-dev REACT_APP_DEPLOYMENT_NAME=dev REACT_APP_ADMIN_REGISTRATION_ONLY=true npm run build-prod`
 
 ## Deployment

package.json

@@ -17,7 +17,6 @@
     "dom-serializer": "^1.3.2",
     "domhandler": "^4.3.1",
     "easymde": "2.18.0",
-    "marked": "^9.1.6",
     "html-to-react": "1.5.0",
     "htmlparser2": "^4.1.0",
     "intelligent-tree-select": "0.11.4",
@@ -29,6 +28,7 @@
     "ld-query": "^2.6.1",
     "lodash": "^4.17.21",
     "luxon": "^3.3.0",
+    "marked": "^9.1.6",
     "object-assign": "4.1.1",
     "oidc-client": "^1.11.5",
     "promise": "8.3.0",
@@ -57,10 +57,10 @@
     "redux-logger": "^3.0.6",
     "redux-thunk": "^2.4.2",
     "resolve": "1.22.2",
+    "simple-xpath-position": "^2.0.2",
     "uuid": "^9.0.0",
     "whatwg-fetch": "3.6.2",
-    "whatwg-mimetype": "3.0.0",
-    "xpath-range": "^1.1.1"
+    "whatwg-mimetype": "3.0.0"
   },
   "scripts": {
     "start": "react-scripts start",

src/@types/simple-xpath-position/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Type declarations for simple-xpath-position library.
+ */
+declare module "simple-xpath-position" {
+  export function fromNode(node: Node, root: Node = null): string;
+  export function toNode(
+    path: string,
+    root: Node,
+    resolver: any = null
+  ): Node | null;
+}

src/__tests__/environment/TestUtil.ts

@@ -59,7 +59,7 @@ export function routingProps(): RouteComponentProps<any> {
 }
 
 /**
- * Changes value attribute of inputElement and simulates change event on it
+ * Changes value attribute of inputElement and simulates change event on it, should be executed in "act"!
  * @param inputElement
  * @param value
  */

src/action/ActionType.ts

@@ -76,6 +76,7 @@ export interface BreadcrumbAction extends Action {
 export interface AnnotatorLegendFilterAction extends Action {
   annotationClass: AnnotationClass;
   annotationOrigin: AnnotationOrigin;
+  enabled?: boolean;
 }
 
 const ActionType = {
@@ -111,6 +112,8 @@ const ActionType = {
   LOAD_RELATED_VOCABULARIES: "LOAD_RELATED_VOCABULARIES",
   REMOVE_VOCABULARY: "REMOVE_VOCABULARY",
   CREATE_VOCABULARY_SNAPSHOT: "CREATE_VOCABULARY_SNAPSHOT",
+  GET_VOCABULARY_TERMS_RELATIONS: "GET_VOCABULARY_TERMS_RELATIONS",
+  GET_VOCABULARY_RELATIONS: "GET_VOCABULARY_RELATIONS",
 
   LOAD_VOCABULARY_HISTORY: "LOAD_VOCABULARY_HISTORY",
   LOAD_VOCABULARY_CONTENT_HISTORY: "LOAD_VOCABULARY_CONTENT_HISTORY",
@@ -141,6 +144,7 @@ const ActionType = {
   REMOVE_TERM_DEFINITION_SOURCE: "REMOVE_TERM_DEFINITION_SOURCE",
 
   TOGGLE_ANNOTATOR_LEGEND_FILTER: "TOGGLE_ANNOTATOR_LEGEND_FILTER",
+  SET_ANNOTATOR_LEGEND_FILTER: "SET_ANNOTATOR_LEGEND_FILTER",
 
   LOAD_TERM_HISTORY: "LOAD_TERM_HISTORY",
 
@@ -237,7 +241,8 @@ const ActionType = {
   REACT_TO_COMMENT: "REACT_TO_COMMENT",
   REMOVE_COMMENT_REACTION: "REMOVE_COMMENT_REACTION",
 
-  IMPORT_SKOS: "IMPORT_SKOS",
+  IMPORT_VOCABULARY: "IMPORT_VOCABULARY",
+  LOAD_EXCEL_TEMPLATE: "LOAD_EXCEL_TEMPLATE",
 
   OPEN_CONTEXTS_FOR_EDITING: "OPEN_CONTEXTS_FOR_EDITING",
 

src/action/AsyncActions.ts

@@ -474,7 +474,7 @@ export function loadVocabularies() {
     if (isActionRequestPending(getState(), action)) {
       return Promise.resolve({});
     }
-    dispatch(asyncActionRequest(action));
+    dispatch(asyncActionRequest(action, true));
     return Ajax.get(`${getApiPrefix(getState())}/vocabularies`)
       .then((data: object[]) =>
         data.length !== 0
@@ -579,15 +579,18 @@ export function genericLoadTerms(
   };
 }
 
-export function loadTermByIri(termIri: IRI) {
+export function loadTermByIri(
+  termIri: IRI,
+  abortController: AbortController = new AbortController()
+) {
   const action = {
     type: ActionType.LOAD_TERM_BY_IRI,
   };
   return (dispatch: ThunkDispatch, getState: GetStoreState) => {
-    dispatch(asyncActionRequest(action, true));
+    dispatch(asyncActionRequest(action, true, abortController));
     return Ajax.get(
       `${getApiPrefix(getState())}/terms/${termIri.fragment}`,
-      param("namespace", termIri.namespace)
+      param("namespace", termIri.namespace).signal(abortController)
     )
       .then((data: object) =>
         JsonLdUtils.compactAndResolveReferences<TermData>(data, TERM_CONTEXT)

src/action/AsyncAnnotatorActions.ts

@@ -58,30 +58,46 @@ export function loadAllTerms(
 }
 
 // Cache of pending term fetches, used to prevent repeated concurrent attempts at fetching the same term
-const pendingTermFetches: { [key: string]: Promise<Term | null> } = {};
+const pendingTermFetches: {
+  [key: string]: {
+    promise: Promise<Term | null>;
+    abortController: AbortController;
+  };
+} = {};
 
-export function loadTermByIri(termIri: string) {
+export function loadTermByIri(
+  termIri: string,
+  abortController: AbortController = new AbortController()
+) {
   const action = { type: ActionType.ANNOTATOR_LOAD_TERM };
   return (dispatch: ThunkDispatch, getState: GetStoreState) => {
+    abortController.signal.throwIfAborted();
     if (getState().annotatorTerms[termIri]) {
       return Promise.resolve(getState().annotatorTerms[termIri]);
     }
-    if (pendingTermFetches[termIri] !== undefined) {
-      return pendingTermFetches[termIri];
+    if (
+      pendingTermFetches[termIri] !== undefined &&
+      !pendingTermFetches[termIri].abortController.signal.aborted
+    ) {
+      return pendingTermFetches[termIri].promise;
     }
     const promise = dispatch(
-      loadTermByIriBase(VocabularyUtils.create(termIri))
+      loadTermByIriBase(VocabularyUtils.create(termIri), abortController)
     );
-    pendingTermFetches[termIri] = promise;
-    return promise.then((t) => {
-      delete pendingTermFetches[termIri];
-      if (t) {
-        // No hierarchy for on-demand loaded terms in annotator. We cannot load children anyway
-        t.subTerms = [];
-        dispatch(asyncActionSuccessWithPayload(action, t));
-      }
-      return t;
-    });
+    pendingTermFetches[termIri] = { promise, abortController };
+    return promise
+      .then((t) => {
+        abortController.signal.throwIfAborted();
+        if (t) {
+          // No hierarchy for on-demand loaded terms in annotator. We cannot load children anyway
+          t.subTerms = [];
+          dispatch(asyncActionSuccessWithPayload(action, t));
+        }
+        return t;
+      })
+      .finally(() => {
+        delete pendingTermFetches[termIri];
+      });
   };
 }
 

src/action/AsyncImportActions.ts

@@ -4,7 +4,7 @@ import {
   asyncActionRequest,
   asyncActionSuccess,
 } from "./SyncActions";
-import Ajax, { contentType } from "../util/Ajax";
+import Ajax, { contentType, responseType } from "../util/Ajax";
 import { ThunkDispatch } from "../util/Types";
 import Constants from "../util/Constants";
 import { ErrorData } from "../model/ErrorInfo";
@@ -14,12 +14,10 @@ import { IRI } from "../util/VocabularyUtils";
 import ActionType from "./ActionType";
 import { Action } from "redux";
 import { loadVocabulary } from "./AsyncActions";
+import Utils from "../util/Utils";
 
-export function importSkosIntoExistingVocabulary(
-  vocabularyIri: IRI,
-  data: File
-) {
-  const action = { type: ActionType.IMPORT_SKOS };
+export function importIntoExistingVocabulary(vocabularyIri: IRI, data: File) {
+  const action = { type: ActionType.IMPORT_VOCABULARY };
   const formData = new FormData();
   formData.append("file", data, "thesaurus");
   formData.append("namespace", vocabularyIri.namespace!);
@@ -36,7 +34,7 @@ export function importSkosIntoExistingVocabulary(
 }
 
 export function importSkosAsNewVocabulary(data: File, rename: Boolean) {
-  const action = { type: ActionType.IMPORT_SKOS };
+  const action = { type: ActionType.IMPORT_VOCABULARY };
   const formData = new FormData();
   formData.append("file", data, "thesaurus");
   formData.append("rename", rename.toString());
@@ -83,3 +81,23 @@ const processError =
       SyncActions.publishMessage(new Message(error, MessageType.ERROR))
     );
   };
+
+export function downloadExcelTemplate() {
+  return (dispatch: ThunkDispatch) => {
+    const action = { type: ActionType.LOAD_EXCEL_TEMPLATE };
+    dispatch(asyncActionRequest(action, true));
+    return Ajax.getRaw(
+      `${Constants.API_PREFIX}/vocabularies/import/template`,
+      responseType("arraybuffer")
+    )
+      .then((response) => {
+        Utils.fileDownload(
+          response.data,
+          "termit-import.xlsx",
+          Constants.EXCEL_MIME_TYPE
+        );
+        dispatch(asyncActionSuccess(action));
+      })
+      .catch((error) => dispatch(asyncActionFailure(action, error)));
+  };
+}

src/action/AsyncVocabularyActions.ts

@@ -26,6 +26,7 @@ import { getApiPrefix } from "./ActionUtils";
 import SnapshotData, { CONTEXT as SNAPSHOT_CONTEXT } from "../model/Snapshot";
 import NotificationType from "../model/NotificationType";
 import ExportConfig from "../model/local/ExportConfig";
+import RDFStatement, { RDFSTATEMENT_CONTEXT } from "../model/RDFStatement";
 
 export function loadTermCount(vocabularyIri: IRI) {
   const action = { type: ActionType.LOAD_TERM_COUNT, vocabularyIri };
@@ -218,3 +219,59 @@ export function loadVocabularySnapshots(vocabularyIri: IRI) {
       });
   };
 }
+
+export function getVocabularyRelations(
+  vocabularyIri: IRI,
+  abortController: AbortController = new AbortController()
+) {
+  const action = { type: ActionType.GET_VOCABULARY_RELATIONS };
+  return (dispatch: ThunkDispatch) => {
+    dispatch(asyncActionRequest(action, false));
+    return Ajax.get(
+      `${Constants.API_PREFIX}/vocabularies/${vocabularyIri.fragment}/relations`,
+      param("namespace", vocabularyIri.namespace).signal(abortController)
+    )
+      .then((data) =>
+        JsonLdUtils.compactAndResolveReferencesAsArray<RDFStatement>(
+          data,
+          RDFSTATEMENT_CONTEXT
+        )
+      )
+      .then((statements: RDFStatement[]) => {
+        dispatch(asyncActionSuccess(action));
+        return statements;
+      })
+      .catch((error: ErrorData) => {
+        dispatch(asyncActionFailure(action, error));
+        return [];
+      });
+  };
+}
+
+export function getVocabularyTermsRelations(
+  vocabularyIri: IRI,
+  abortController: AbortController = new AbortController()
+) {
+  const action = { type: ActionType.GET_VOCABULARY_TERMS_RELATIONS };
+  return (dispatch: ThunkDispatch) => {
+    dispatch(asyncActionRequest(action, false));
+    return Ajax.get(
+      `${Constants.API_PREFIX}/vocabularies/${vocabularyIri.fragment}/terms/relations`,
+      param("namespace", vocabularyIri.namespace).signal(abortController)
+    )
+      .then((data) =>
+        JsonLdUtils.compactAndResolveReferencesAsArray<RDFStatement>(
+          data,
+          RDFSTATEMENT_CONTEXT
+        )
+      )
+      .then((statements: RDFStatement[]) => {
+        dispatch(asyncActionSuccess(action));
+        return statements;
+      })
+      .catch((error: ErrorData) => {
+        dispatch(asyncActionFailure(action, error));
+        return [];
+      });
+  };
+}

src/action/SyncActions.ts

@@ -200,3 +200,16 @@ export function toggleAnnotatorLegendFilter(
     annotationOrigin,
   };
 }
+
+export function setAnnotatorLegendFilter(
+  annotationClass: AnnotationClass,
+  annotationOrigin: AnnotationOrigin = AnnotationOrigin.SELECTED,
+  enabled: boolean
+): AnnotatorLegendFilterAction {
+  return {
+    type: ActionType.SET_ANNOTATOR_LEGEND_FILTER,
+    annotationClass,
+    annotationOrigin,
+    enabled,
+  };
+}