[Archive]: Connect to backend

Dockerfile

@@ -18,10 +18,10 @@ ARG BUILD_ID=unknown
 ENV BUILD_ID=${BUILD_ID}
 
 RUN echo "Build with BUILD_ID: $BUILD_ID"
-RUN npm run lint
-RUN npm run test:ci
-RUN npm run build
-RUN npm prune --production
+RUN npm run lint && \
+    npm run test:ci && \
+    npm run build && \
+    npm prune --production
 
 FROM node:20.10.0-alpine
 

Jenkinsfile

@@ -4,11 +4,13 @@ final String BRANCH = params.BRANCH
 final boolean NOTIFY_SLACK_ON_FAILURE = params.NOTIFY_SLACK_ON_FAILURE
 final boolean NOTIFY_SLACK_ON_SUCCESS = params.NOTIFY_SLACK_ON_SUCCESS
 
-final String BRANCH_NAME = BRANCH ? BRANCH.tokenize('/').last() : ""
+final String CLEAN_BRANCH_NAME = BRANCH ? BRANCH.replaceAll("[\\.\\_\\#]", "-").tokenize('/').last() : ""
+
 final String DEPLOY_DIR = 'build/deploy'
 final String TEST_COVERAGE_FILE = 'output/coverage/junit.xml'
 
 final String IMAGE_NAME = "campudus/grud-frontend"
+final String IMAGE_TAG = CLEAN_BRANCH_NAME && CLEAN_BRANCH_NAME != "master" ? CLEAN_BRANCH_NAME : "latest"
 final String ARCHIVE_FILENAME_DIST = "grud-frontend-dist.tar.gz"
 final GString DOCKER_BASE_IMAGE_TAG = "build-${BUILD_NUMBER}"
 
@@ -85,8 +87,7 @@ pipeline {
           --label "GIT_COMMIT_DATE=${GIT_COMMIT_DATE}" \
           --label "BUILD_DATE=${BUILD_DATE}" \
           -t ${IMAGE_NAME}:${DOCKER_BASE_IMAGE_TAG}-${GIT_HASH} \
-          ${BRANCH_NAME ? "-t ${IMAGE_NAME}:${BRANCH_NAME}" : ""} \
-          -t ${IMAGE_NAME}:latest \
+          -t ${IMAGE_NAME}:${IMAGE_TAG} \
           -f Dockerfile --rm .
         """
       }
@@ -102,16 +103,7 @@ pipeline {
       steps {
         withDockerRegistry([credentialsId: "dockerhub", url: ""]) {
           sh "docker push ${IMAGE_NAME}:${DOCKER_BASE_IMAGE_TAG}-${GIT_HASH}"
-
-          script {
-            if (BRANCH_NAME) {
-              sh "docker push ${IMAGE_NAME}:${BRANCH_NAME}"
-            }
-
-            if (!BRANCH_NAME || BRANCH_NAME == 'master') {
-              sh "docker push ${IMAGE_NAME}:latest"
-            }
-          }
+          sh "docker push ${IMAGE_NAME}:${IMAGE_TAG}"
         }
       }
     }
@@ -122,7 +114,12 @@ pipeline {
       wrap([$class: 'BuildUser']) {
         script {
           if (NOTIFY_SLACK_ON_SUCCESS) {
-            slackOk(channel: SLACK_CHANNEL, message: BRANCH ? "BRANCH=${BRANCH}" : "")
+            final String logParams = [
+                BRANCH ? "BRANCH=${BRANCH}" : null,
+                "image: ${IMAGE_NAME}:${IMAGE_TAG}",
+            ].minus(null).join(' ')
+
+            slackOk(channel: SLACK_CHANNEL, message: "${logParams}")
           }
         }
       }
@@ -132,7 +129,11 @@ pipeline {
       wrap([$class: 'BuildUser']) {
         script {
           if (NOTIFY_SLACK_ON_FAILURE) {
-            slackError(channel: SLACK_CHANNEL, message: BRANCH ? "BRANCH=${BRANCH}" : "")
+            final String logParams = [
+                BRANCH ? "BRANCH=${BRANCH}" : null,
+            ].minus(null).join(' ')
+
+            slackError(channel: SLACK_CHANNEL, message: "${logParams}")
           }
         }
       }

setupTests.js

@@ -1,3 +1,8 @@
 // babel polyfill: https://babeljs.io/docs/en/babel-polyfill
 import "core-js/stable";
 import "regenerator-runtime/runtime";
+
+// https://github.com/kutlugsahin/react-smooth-dnd/issues/48
+Object.defineProperty(global, "Node", {
+  value: { firstElementChild: "firstElementChild" }
+});

src/app/archivedRows/ToggleArchivedRowsButton.jsx

@@ -1,19 +1,29 @@
-import React, { useCallback } from "react";
+import React, { useCallback, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import Action from "../redux/actionCreators";
 import { selectShowArchivedState } from "../redux/reducers/tableView";
 
 const ToggleArchivedRowsButton = ({ table }) => {
+  // prevent potential massive reload of archived rows
+  const [mustFetchArchivedRows, setMustFetchArchivedRows] = useState(true);
+
   const showArchived = useSelector(selectShowArchivedState);
   const dispatch = useDispatch();
-  const className = `filter-wrapper ${showArchived ? "active" : ""}`;
+  const className = `filter-wrapper ${showArchived ? "has-filter" : ""}`;
   const toggleArchivedRows = useCallback(() => {
+    if (mustFetchArchivedRows) {
+      dispatch(Action.loadAllRows(table.id, true));
+      setMustFetchArchivedRows(false);
+    }
     dispatch(Action.setShowArchivedRows(table, !showArchived));
-  }, [showArchived]);
+  }, [showArchived, mustFetchArchivedRows]);
 
   return (
     <div className={className}>
-      <button className="filter-popup-button" onClick={toggleArchivedRows}>
+      <button
+        className="filter-popup-button button__toggle-archived-rows"
+        onClick={toggleArchivedRows}
+      >
         <i className="fa fa-archive" />
       </button>
     </div>

src/app/archivedRows/helpers.js

@@ -1,12 +1,3 @@
-// eslint-dsable-next-line
-import { flip, memoize } from "lodash";
+export const isRowArchived = row => Boolean(row.archived);
 
-// eslint-disable-next-line
-const memoizeWith = flip(memoize);
-
-export const isRowArchived = memoizeWith(
-  row => row.id,
-  () => Math.random() < 0.5
-); // TODO: implement once we decided on the data type
-
-export const isLinkArchived = _ => Math.random() < 0.5; // TODO: implement once we decided on the data type
+export const isLinkArchived = link => Boolean(link.archived);

src/app/components/cells/Cell.jsx

@@ -129,7 +129,8 @@ class Cell extends React.Component {
       !f.isEqual(
         getRelevantCellProps(this.props.cell),
         getRelevantCellProps(nextProps.cell)
-      )
+      ) ||
+      cell.row.archived !== nextCell.row.archived
     );
   };
 

src/app/components/cells/link/LinkOverlay.jsx

@@ -30,6 +30,7 @@ import withCachedLinks from "./LinkOverlayCache.jsx";
 import { isTaxonomyTable } from "../../taxonomy/taxonomy";
 import store from "../../../redux/store";
 import { buildClassName } from "../../../helpers/buildClassName";
+import { isRowArchived } from "../../../archivedRows/helpers";
 const MAIN_BUTTON = 0;
 const LINK_BUTTON = 1;
 const LINKED_ITEMS = 0;
@@ -247,13 +248,14 @@ class LinkOverlay extends PureComponent {
       }
     };
 
-    return (
+    return row && cell ? (
       <LinkItem
         key={`${key}-${row.id}`}
         refIfLinked={refIfLinked}
         clickHandler={this.addLinkValue}
         isLinked={isLinked}
         isSelected={isSelected}
+        archived={isRowArchived(row)}
         row={row}
         toTable={f.get(["column", "toTable"], cell)}
         cell={cell}
@@ -263,6 +265,8 @@ class LinkOverlay extends PureComponent {
         selectedMode={selectedMode}
         isPermissionDenied={row.hiddenByRowPermissions}
       />
+    ) : (
+      undefined
     );
   };
 

src/app/components/cells/link/LinkOverlayCache.jsx

@@ -49,16 +49,21 @@ const withCachedLinks = Component => props => {
       .then(
         // row response -> link label format
         f.compose(
-          f.map(({ id, values }) => ({ id, value: f.first(values) })),
+          f.map(({ values, ...foreignRow }) => ({
+            ...foreignRow,
+            value: f.first(values)
+          })),
           f.prop("rows")
         )
       )
       .then(foreignRows => {
         // update display values in state
-        const loadedDisplayValues = foreignRows.map(({ id, value }) => ({
-          id,
-          values: [getDisplayValue(column.toColumn, value)]
-        }));
+        const loadedDisplayValues = foreignRows.map(
+          ({ value, ...foreignRow }) => ({
+            ...foreignRow,
+            values: [getDisplayValue(column.toColumn, value)]
+          })
+        );
         actions.addDisplayValues({
           displayValues: [
             { tableId: column.toTable, values: loadedDisplayValues }

src/app/components/cells/text/TextEditOverlay.jsx

@@ -1,22 +1,34 @@
-import React from "react";
-import { compose, lifecycle, withStateHandlers } from "recompose";
 import i18n from "i18next";
+import React, { useState } from "react";
 import {
   columnHasMaxLength,
   columnHasMinLength,
-  isTextTooShort,
+  getTextLength,
   isTextTooLong,
-  getTextLength
+  isTextTooShort
 } from "../../../helpers/limitTextLength";
 
 const TextEditOverlay = props => {
   const {
-    editedValue,
-    setValue,
-    saveEdits,
-    readOnly,
-    cell: { column }
+    actions,
+    cell,
+    cell: { column, value },
+    langtag,
+    readOnly
   } = props;
+
+  const [editedValue, setEditedValue] = useState(
+    (column.multilanguage ? value[langtag] : value) ?? ""
+  );
+  const saveEdits = () => {
+    const newValue = column.multilanguage
+      ? { ...value, [langtag]: editedValue }
+      : editedValue;
+
+    console.log("saveEdits", cell, value, newValue);
+    actions.changeCellValue({ cell, oldValue: value, newValue });
+  };
+
   const { minLength, maxLength } = column;
   const [clickedOutside, setClickedOutside] = React.useState(false);
   const minLengthText = columnHasMinLength(column)
@@ -40,7 +52,7 @@ const TextEditOverlay = props => {
     if (isTextTooLong(column, value)) {
       return;
     }
-    setValue(evt);
+    setEditedValue(value);
   };
   const onBlur = () => {
     if (shouldCatchOutsideClick) {
@@ -75,38 +87,4 @@ const TextEditOverlay = props => {
   );
 };
 
-const enhance = compose(
-  withStateHandlers(
-    ({ cell, value, langtag }) => ({
-      editedValue: cell.column.multilanguage ? value[langtag] : value
-    }),
-    {
-      setValue: () => event => ({ editedValue: event.target.value }),
-      saveEdits: (state, props) => () => {
-        const { editedValue } = state;
-        const { langtag, cell, value, actions } = props;
-        const { column, row, table } = cell;
-
-        const newValue = column.multilanguage
-          ? { [langtag]: editedValue }
-          : editedValue;
-
-        actions.changeCellValue({
-          oldValue: value,
-          newValue,
-          tableId: table.id,
-          columnId: column.id,
-          rowId: row.id,
-          cell
-        });
-      }
-    }
-  ),
-  lifecycle({
-    componentWillUnmount() {
-      this.props.saveEdits();
-    }
-  })
-);
-
-export default enhance(TextEditOverlay);
+export default TextEditOverlay;

src/app/components/contextMenu/RowContextMenu.jsx

@@ -23,6 +23,7 @@ import {
   getAnnotation,
   removeTranslationNeeded,
   setCellAnnotation,
+  setRowArchived,
   setRowFinal
 } from "../../helpers/annotationHelper";
 import { canConvert } from "../../helpers/cellValueConverter";
@@ -284,6 +285,21 @@ class RowContextMenu extends React.Component {
     setRowFinal({ table, row, value: valueToSet });
   };
 
+  setArchived = archived => () => {
+    const {
+      langtag,
+      cell: { row, table }
+    } = this.props;
+    setRowArchived({ table, row, archived });
+    if (archived) {
+      this.props.actions.toggleCellSelection({
+        select: false,
+        langtag,
+        tableId: table.id
+      });
+    }
+  };
+
   setFinalItem = () => {
     if (!canUserEditRowAnnotations(this.props.cell)) {
       return null;
@@ -298,6 +314,23 @@ class RowContextMenu extends React.Component {
     return this.mkItem(this.setFinal(!final), label, "lock");
   };
 
+  setArchivedItem = () => {
+    if (!canUserEditRowAnnotations(this.props.cell)) {
+      return null;
+    } else {
+      const {
+        t,
+        cell: {
+          row: { archived }
+        }
+      } = this.props;
+      const label = t(
+        archived ? "archived.unset-archived" : "archived.set-archived"
+      );
+      return this.mkItem(this.setArchived(!archived), label, "archive");
+    }
+  };
+
   openLinksFilteredItem = () => {
     const { cell, langtag } = this.props;
     if (cell.kind !== ColumnKinds.link || f.isEmpty(cell.value)) {
@@ -414,6 +447,7 @@ class RowContextMenu extends React.Component {
           {this.mkItem(showDependency, "show_dependency", "code-fork")}
           {this.mkItem(showTranslations, "show_translation", "flag")}
           {this.setFinalItem()}
+          {this.setArchivedItem()}
           {isDeletingRowAllowed || isDuplicatingRowAllowed ? (
             <div className="separator--internal" />
           ) : null}

src/app/components/history/diffItems/FlagDiff.jsx

@@ -1,7 +1,6 @@
-import React from "react";
-import f from "lodash/fp";
 import i18n from "i18next";
-
+import f from "lodash/fp";
+import React from "react";
 import { ifElse, when } from "../../../helpers/functools";
 
 const FlagDiff = props => {
@@ -21,6 +20,9 @@ const FlagDiff = props => {
     revision.value || revision.valueType
   );
 
+  const translationKey =
+    value === "archived" ? "table:archived:is-archived" : `table:${value}`;
+
   return (
     <div
       className={
@@ -34,7 +36,7 @@ const FlagDiff = props => {
         event
       }
     >
-      {i18n.t(`table:${value}`)}
+      {i18n.t(translationKey)}
     </div>
   );
 };