split actions into tabs

client/src/pages/actions/actionsAffiliations.jsx

@@ -0,0 +1,79 @@
+import { Col, File, Row } from '@dataesr/react-dsfr';
+import PropTypes from 'prop-types';
+import { useState } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import { Tooltip } from 'react-tooltip';
+
+import Button from '../../components/button';
+import { export2json, importJson } from '../../utils/files';
+import { status } from '../../config';
+
+export default function ActionsAffiliations({
+  allAffiliations,
+  options,
+  setAllAffiliations,
+  tagAffiliations,
+}) {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const [displayFileUpload, setDisplayFileUpload] = useState(false);
+  const decidedAffiliations = allAffiliations?.filter((affiliation) => affiliation.status !== status.tobedecided.id) || [];
+
+  return (
+    <>
+      <Row className="fr-mb-1w">
+        <Col className="text-right">
+          <Button
+            data-tooltip-id="save-affiliations-button"
+            disabled={!decidedAffiliations.length}
+            icon="ri-save-line"
+            onClick={() => export2json({ decidedAffiliations, label: 'affiliations', searchParams })}
+            size="sm"
+          >
+            Save decided affiliations
+          </Button>
+          <Tooltip id="save-affiliations-button" hidden={!decidedAffiliations.length}>
+            Save the decided affiliations in order to restore it later
+          </Tooltip>
+          <Button
+            data-tooltip-id="restore-affiliations-button"
+            icon="ri-file-upload-line"
+            onClick={() => setDisplayFileUpload(true)}
+            secondary
+            size="sm"
+          >
+            Restore affiliations
+          </Button>
+          <Tooltip id="restore-affiliations-button">
+            Restore affiliations from saved file
+          </Tooltip>
+        </Col>
+      </Row>
+      {displayFileUpload && (
+        <Row className="fr-mb-1w">
+          <Col>
+            <File
+              accept=".json"
+              hint="Select JSON file to restore from previous state"
+              label="JSON file"
+              onChange={(e) => { importJson(e, options, setAllAffiliations, setSearchParams, tagAffiliations); setDisplayFileUpload(false); }}
+            />
+          </Col>
+        </Row>
+      )}
+    </>
+  );
+}
+
+ActionsAffiliations.propTypes = {
+  allAffiliations: PropTypes.arrayOf(PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    nameHtml: PropTypes.string.isRequired,
+    key: PropTypes.string.isRequired,
+    status: PropTypes.string.isRequired,
+    works: PropTypes.arrayOf(PropTypes.string).isRequired,
+    worksNumber: PropTypes.number.isRequired,
+  })).isRequired,
+  options: PropTypes.object.isRequired,
+  setAllAffiliations: PropTypes.func.isRequired,
+  tagAffiliations: PropTypes.func.isRequired,
+};

client/src/pages/actions/actionsDatasets.jsx

@@ -0,0 +1,34 @@
+import { Col, Row } from '@dataesr/react-dsfr';
+import PropTypes from 'prop-types';
+import { useSearchParams } from 'react-router-dom';
+
+import ButtonDropdown from '../../components/button-dropdown';
+
+export default function ActionsDatasets({
+  allDatasets,
+  options,
+  setAllDatasets,
+}) {
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  return (
+    <Row className="fr-mb-1w">
+      <Col className="text-right">
+        <ButtonDropdown data={allDatasets} label="datasets" searchParams={searchParams} />
+      </Col>
+    </Row>
+  );
+}
+
+ActionsDatasets.propTypes = {
+  allDatasets: PropTypes.arrayOf(PropTypes.shape({
+    affiliations: PropTypes.arrayOf(PropTypes.object),
+    allIds: PropTypes.arrayOf(PropTypes.object).isRequired,
+    datasource: PropTypes.arrayOf(PropTypes.string).isRequired,
+    id: PropTypes.string.isRequired,
+    status: PropTypes.string.isRequired,
+    type: PropTypes.string.isRequired,
+  })).isRequired,
+  options: PropTypes.object.isRequired,
+  setAllDatasets: PropTypes.func.isRequired,
+};

client/src/pages/actions/actionsPublications.jsx

@@ -0,0 +1,37 @@
+import { Col, File, Row } from '@dataesr/react-dsfr';
+import PropTypes from 'prop-types';
+import { useState } from 'react';
+import { useSearchParams } from 'react-router-dom';
+
+import ButtonDropdown from '../../components/button-dropdown';
+import { export2json, importJson } from '../../utils/files';
+import { status } from '../../config';
+
+export default function ActionsPublications({
+  allPublications,
+  options,
+  setAllPublications,
+}) {
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  return (
+    <Row className="fr-mb-1w">
+      <Col className="text-right">
+        <ButtonDropdown data={allPublications} label="publications" searchParams={searchParams} />
+      </Col>
+    </Row>
+  );
+}
+
+ActionsPublications.propTypes = {
+  allPublications: PropTypes.arrayOf(PropTypes.shape({
+    affiliations: PropTypes.arrayOf(PropTypes.object).isRequired,
+    allIds: PropTypes.arrayOf(PropTypes.object).isRequired,
+    datasource: PropTypes.arrayOf(PropTypes.string).isRequired,
+    id: PropTypes.string.isRequired,
+    status: PropTypes.string.isRequired,
+    type: PropTypes.string.isRequired,
+  })).isRequired,
+  options: PropTypes.object.isRequired,
+  setAllPublications: PropTypes.func.isRequired,
+};

client/src/pages/index.jsx

@@ -9,7 +9,9 @@ import { useQuery } from '@tanstack/react-query';
 import { useEffect, useState } from 'react';
 import useWebSocket from 'react-use-websocket';
 
-import Actions from './actions';
+import ActionsAffiliations from './actions/actionsAffiliations';
+import ActionsDatasets from './actions/actionsDatasets';
+import ActionsPublications from './actions/actionsPublications';
 import AffiliationsTab from './affiliationsTab';
 import { PageSpinner } from '../components/spinner';
 import Stepper from '../components/stepper';
@@ -151,23 +153,14 @@ export default function Home() {
         </Row>
       </Container>
       <Container className="fr-mx-5w" as="section" fluid>
-        <Actions
-          allAffiliations={allAffiliations}
-          allDatasets={allDatasets}
-          allPublications={allPublications}
-          options={options}
-          setAllAffiliations={setAllAffiliations}
-          setAllPublications={setAllPublications}
-          tagAffiliations={tagAffiliations}
-        />
         {isFetching && (
           <>
             <Stepper current={current} />
             <PageSpinner />
           </>
         )}
         {!isFetching && (allAffiliations?.length > 0 || allDatasets?.length > 0 || allPublications?.length > 0) && (
-          <Tabs defaultActiveTab={1}>
+          <Tabs defaultActiveTab={0}>
             <Tab label="Affiliation RoR matching in OpenAlex">
               <OpenalexTab
                 affiliations={allAffiliations.filter((aff) => aff.source === 'OpenAlex')}
@@ -177,6 +170,12 @@ export default function Home() {
               />
             </Tab>
             <Tab label="List of raw affiliations">
+              <ActionsAffiliations
+                allAffiliations={allAffiliations}
+                options={options}
+                setAllAffiliations={setAllAffiliations}
+                tagAffiliations={tagAffiliations}
+              />
               <AffiliationsTab
                 affiliations={allAffiliations}
                 selectedAffiliations={selectedAffiliations}
@@ -185,6 +184,11 @@ export default function Home() {
               />
             </Tab>
             <Tab label="List of publications">
+              <ActionsPublications
+                allPublications={allPublications}
+                options={options}
+                setAllPublications={setAllPublications}
+              />
               <PublicationsTab
                 publishers={data.publications?.publishers || []}
                 publications={allPublications}
@@ -196,6 +200,10 @@ export default function Home() {
               />
             </Tab>
             <Tab label="List of datasets">
+              <ActionsDatasets
+                allDatasets={allDatasets}
+                options={options}
+              />
               <DatasetsTab
                 datasets={allDatasets}
                 publishers={data.datasets.publishers}