Add filtering function to summary page (merge commit)

Merge branch 'feature/summary-filter' into 'main'
* Add i18 trnalsation variables

* Replace Container with React fragment

* Uncomment excessive comment

* Minor fix

* Filter by status

* Fix uneven container sides

* Add filtering

See merge request https://gitlab.ci.csc.fi/sds-dev/sd-submit/metadata-submitter-frontend/-/merge_requests/1027

Approved-by: Hang Le <lhang@csc.fi>
Co-authored-by: Mariia Rogina <roginama@csc.fi>
Merged by Hang Le <lhang@csc.fi>

src/components/SubmissionWizard/WizardSteps/WizardShowSummaryStep.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react"
+import React, { useEffect, useMemo, useState } from "react"
 
 import EditIcon from "@mui/icons-material/Edit"
 import { AppBar, Toolbar } from "@mui/material"
@@ -19,6 +19,7 @@ import { useNavigate } from "react-router-dom"
 
 import WizardObjectStatusBadge from "../WizardComponents/WizardObjectStatusBadge"
 import WizardPagination from "../WizardComponents/WizardPagination"
+import WizardSearchBox from "../WizardComponents/WizardSearchBox"
 import editObjectHook from "../WizardHooks/WizardEditObjectHook"
 import WizardMapObjectsToStepHook from "../WizardHooks/WizardMapObjectsToStepsHook"
 
@@ -77,6 +78,7 @@ const SummaryTable = styled(DataGrid)(({ theme }) => ({
 /**
  * Show summary of objects added to submission
  */
+
 const WizardShowSummaryStep: React.FC = () => {
   const submission = useAppSelector(state => state.submission)
   const workflowType = useAppSelector(state => state.workflowType)
@@ -155,7 +157,7 @@ const WizardShowSummaryStep: React.FC = () => {
             const draft = item.objectData?.schema.includes("draft-")
             return {
               id: item.id,
-              status: draft ? "Draft" : "Ready",
+              status: draft ? t("draft") : t("draft"),
               name: item.displayTitle,
               action: draft ? t("Please mark as ready") : "",
               step,
@@ -171,6 +173,17 @@ const WizardShowSummaryStep: React.FC = () => {
     )
   })
 
+  const [filteringText, setFilteringText] = useState<string>("")
+  const filteredRows = useMemo(() => {
+    return rows.filter(row => {
+      const statusText = row.draft ? t("draft") : t("ready")
+      return (
+        row.name.toLowerCase().includes(filteringText.toLowerCase()) ||
+        statusText.toLowerCase().includes(filteringText.toLowerCase())
+      )
+    })
+  }, [rows, filteringText])
+
   const columns: GridColDef[] = [
     {
       field: "status",
@@ -208,7 +221,7 @@ const WizardShowSummaryStep: React.FC = () => {
   const [paginationModel, setPaginationModel] = useState({ pageSize: 5, page: 0 })
 
   return (
-    <Container sx={theme => ({ pt: theme.spacing(1) })}>
+    <>
       <SummaryBar position="sticky" elevation={0}>
         <Toolbar sx={{ ml: "auto" }}>
           <Button
@@ -227,9 +240,17 @@ const WizardShowSummaryStep: React.FC = () => {
       <Typography component="h1" variant="h4" color="secondary" sx={{ p: 2 }}>
         {t("summary")}
       </Typography>
+      <Box sx={{ p: 2 }}>
+        <WizardSearchBox
+          placeholder={t("searchItems")}
+          filteringText={filteringText}
+          handleChangeFilteringText={e => setFilteringText(e.target.value)}
+          handleClearFilteringText={() => setFilteringText("")}
+        />
+      </Box>
       {summarySteps.map((summaryItem, index) => {
         const step = index + 1
-        const stepRows = rows.filter(row => row.step === step)
+        const stepRows = filteredRows.filter(row => row.step === step)
         const isDescribeStep = step === 4
 
         return (
@@ -278,7 +299,7 @@ const WizardShowSummaryStep: React.FC = () => {
           </Container>
         )
       })}
-    </Container>
+    </>
   )
 }