1855 icon invalid put also to statement list (#1871)

* add warning icon with number to statement list * change warning to button, unify plus icon size * showWarnings to redux and use in statement list and editor * stronger types for tables
DISSINET · Oct 31, 2023 · 4b17c56 · 4b17c56
1 parent 2911bc0
commit 4b17c56
Show file tree

Hide file tree

Showing 11 changed files with 84 additions and 29 deletions.
diff --git a/packages/client/src/components/basic/Button/ButtonStyles.tsx b/packages/client/src/components/basic/Button/ButtonStyles.tsx
@@ -59,5 +59,5 @@ export const StyledButtonLabel = styled.span<{
   noIconMargin?: boolean;
 }>`
   margin-left: ${({ theme, hasIcon = false, noIconMargin = false }) =>
-    hasIcon ? (noIconMargin ? 0 : theme.space[2]) : 0};
+    hasIcon ? (noIconMargin ? 0 : "0.3rem") : 0};
 `;
diff --git a/...ient/src/pages/MainPage/containers/StatementEditorBox/StatementEditor/StatementEditor.tsx b/...ient/src/pages/MainPage/containers/StatementEditorBox/StatementEditor/StatementEditor.tsx
@@ -18,7 +18,6 @@ import {
   Button,
   Dropdown,
   Input,
-  Loader,
   Message,
   MultiInput,
   Submit,
@@ -42,8 +41,10 @@ import { useSearchParams } from "hooks";
 import React, { useEffect, useMemo, useState } from "react";
 import { AiOutlineWarning } from "react-icons/ai";
 import { FaRegCopy } from "react-icons/fa";
+import { TiWarningOutline } from "react-icons/ti";
 import { toast } from "react-toastify";
-import { useAppSelector } from "redux/hooks";
+import { setShowWarnings } from "redux/features/statementEditor/showWarningsSlice";
+import { useAppDispatch, useAppSelector } from "redux/hooks";
 import { DropdownItem, classesEditorActants, classesEditorTags } from "types";
 import { getEntityLabel, getShortLabelByLetterCount } from "utils";
 import { EntityReferenceTable } from "../../EntityReferenceTable/EntityReferenceTable";
@@ -70,7 +71,6 @@ import { StatementEditorActantTable } from "./StatementEditorActantTable/Stateme
 import { StatementEditorActionTable } from "./StatementEditorActionTable/StatementEditorActionTable";
 import { StatementEditorOrdering } from "./StatementEditorOrdering/StatementEditorOrdering";
 import { StatementEditorSectionButtons } from "./StatementEditorSectionButtons/StatementEditorSectionButtons";
-import { TiWarningOutline } from "react-icons/ti";
 
 interface StatementEditor {
   statement: IResponseStatement;
@@ -540,7 +540,11 @@ export const StatementEditor: React.FC<StatementEditor> = ({
   const [showSubmitSection, setShowSubmitSection] = useState<
     "actants" | "actions" | "references" | false
   >(false);
-  const [showWarnings, setShowWarnings] = useState(false);
+
+  const showWarnings = useAppSelector(
+    (state) => state.statementEditor.showWarnings
+  );
+  const dispatch = useAppDispatch();
 
   return (
     <>
@@ -682,7 +686,7 @@ export const StatementEditor: React.FC<StatementEditor> = ({
             <Button
               icon={<TiWarningOutline size={16} />}
               label={`${statement.warnings.length}`}
-              onClick={() => setShowWarnings(!showWarnings)}
+              onClick={() => dispatch(setShowWarnings(!showWarnings))}
               color="warning"
               tooltipLabel={showWarnings ? "hide warnings" : "show warnings"}
               inverted={!showWarnings}

diff --git a/packages/client/src/pages/MainPage/containers/StatementsListBox/StatementListBox.tsx b/packages/client/src/pages/MainPage/containers/StatementsListBox/StatementListBox.tsx
@@ -19,6 +19,7 @@ import { useAppDispatch, useAppSelector } from "redux/hooks";
 import { StatementListHeader } from "./StatementListHeader/StatementListHeader";
 import { StatementListTable } from "./StatementListTable/StatementListTable";
 import { StyledEmptyState, StyledTableWrapper } from "./StatementLitBoxStyles";
+import { setShowWarnings } from "redux/features/statementEditor/showWarningsSlice";
 
 const initialData: {
   statements: IResponseStatement[];
@@ -391,6 +392,7 @@ export const StatementListBox: React.FC = () => {
           <StatementListTable
             statements={statements}
             handleRowClick={(rowId: string) => {
+              dispatch(setShowWarnings(false));
               setStatementId(rowId);
             }}
             actantsUpdateMutation={statementUpdateMutation}

diff --git a/...c/pages/MainPage/containers/StatementsListBox/StatementListHeader/StatementListHeader.tsx b/...c/pages/MainPage/containers/StatementsListBox/StatementListHeader/StatementListHeader.tsx
@@ -395,7 +395,7 @@ export const StatementListHeader: React.FC<StatementListHeader> = ({
             {data.right !== UserEnums.RoleMode.Read && (
               <Button
                 key="add"
-                icon={<FaPlus size={14} />}
+                icon={<FaPlus />}
                 tooltipLabel="add new statement at the end of the list"
                 color="primary"
                 label="new statement"

diff --git a/...t/src/pages/MainPage/containers/StatementsListBox/StatementListTable/StatementListRow.tsx b/...t/src/pages/MainPage/containers/StatementsListBox/StatementListTable/StatementListRow.tsx
@@ -44,7 +44,7 @@ export const StatementListRow: React.FC<StatementListRow> = ({
 }) => {
   const dispatch = useAppDispatch();
 
-  const rowsExpanded: boolean[] = useAppSelector(
+  const rowsExpanded: { [key: string]: boolean } = useAppSelector(
     (state) => state.statementList.rowsExpanded
   );
   const draggedRowId: string = useAppSelector(
@@ -77,7 +77,7 @@ export const StatementListRow: React.FC<StatementListRow> = ({
 
   useEffect(() => {
     isDragging
-      ? dispatch(setDraggedRowId(row.values.id))
+      ? dispatch(setDraggedRowId(row.original.id))
       : dispatch(setDraggedRowId(""));
   }, [isDragging]);
 
@@ -91,7 +91,7 @@ export const StatementListRow: React.FC<StatementListRow> = ({
         opacity={opacity}
         isOpened={row.original.id === statementId}
         isSelected={isSelected}
-        onClick={(e: any) => {
+        onClick={(e) => {
           handleClick(row.original.id);
           e.stopPropagation();
         }}
@@ -117,7 +117,7 @@ export const StatementListRow: React.FC<StatementListRow> = ({
           }
         })}
       </StyledTr>
-      {rowsExpanded[row.values.id] && !draggedRowId ? (
+      {rowsExpanded[row.original.id] && !draggedRowId ? (
         <StatementListRowExpanded
           row={row}
           visibleColumns={visibleColumns}

diff --git a/...tatementsListBox/StatementListTable/StatementListRowExpanded/StatementListRowExpanded.tsx b/...tatementsListBox/StatementListTable/StatementListRowExpanded/StatementListRowExpanded.tsx
@@ -157,7 +157,7 @@ export const StatementListRowExpanded: React.FC<StatementListRowExpanded> = ({
   };
 
   const renderRowSubComponent = React.useCallback(
-    ({ row }) => {
+    ({ row }: { row: Row<IResponseStatement> }) => {
       const {
         actions,
         actants,
@@ -210,7 +210,7 @@ export const StatementListRowExpanded: React.FC<StatementListRowExpanded> = ({
 
       return (
         <>
-          <StyledSubRow id={`statement${row.values.id}`}>
+          <StyledSubRow id={`statement${row.original.id}`}>
             <br />
             <StyledGrid>
               {actionObjects.map((action, key) => (

diff --git a/...src/pages/MainPage/containers/StatementsListBox/StatementListTable/StatementListTable.tsx b/...src/pages/MainPage/containers/StatementsListBox/StatementListTable/StatementListTable.tsx
@@ -26,6 +26,7 @@ import {
   MdOutlineCheckBox,
   MdOutlineCheckBoxOutlineBlank,
 } from "react-icons/md";
+import { TiWarningOutline } from "react-icons/ti";
 import {
   CellProps,
   Column,
@@ -47,6 +48,7 @@ import {
   StyledTdLastEdit,
   StyledTh,
 } from "./StatementListTableStyles";
+import { setShowWarnings } from "redux/features/statementEditor/showWarningsSlice";
 
 type CellType = CellProps<IResponseStatement>;
 
@@ -96,7 +98,7 @@ export const StatementListTable: React.FC<StatementListTable> = ({
   setSelectedRows,
 }) => {
   const dispatch = useAppDispatch();
-  const { territoryId } = useSearchParams();
+  const { territoryId, setStatementId } = useSearchParams();
   const rowsExpanded: { [key: string]: boolean } = useAppSelector(
     (state) => state.statementList.rowsExpanded
   );
@@ -241,8 +243,8 @@ export const StatementListTable: React.FC<StatementListTable> = ({
       {
         Header: "Subj.",
         Cell: ({ row }: CellType) => {
-          const subjectIds: string[] = row.values.data?.actants
-            ? row.values.data.actants
+          const subjectIds: string[] = row.original.data?.actants
+            ? row.original.data.actants
                 .filter((a: any) => a.position === "s")
                 .map((a: any) => a.entityId)
             : [];
@@ -265,10 +267,10 @@ export const StatementListTable: React.FC<StatementListTable> = ({
       {
         Header: "Actions",
         Cell: ({ row }: CellType) => {
-          const actionIds = row.values.data?.actions
-            ? row.values.data.actions.map((a: any) => a.actionId)
+          const actionIds = row.original.data?.actions
+            ? row.original.data.actions.map((a) => a.actionId)
             : [];
-          const actionObjects: IAction[] = actionIds.map(
+          const actionObjects = actionIds.map(
             (actionId: string) => entities[actionId]
           );
           const definedActions = actionObjects.filter((a) => a !== undefined);
@@ -287,10 +289,10 @@ export const StatementListTable: React.FC<StatementListTable> = ({
       {
         Header: "Objects",
         Cell: ({ row }: CellType) => {
-          const actantIds = row.values.data?.actants
-            ? row.values.data.actants
-                .filter((a: any) => a.position !== "s")
-                .map((a: any) => a.entityId)
+          const actantIds = row.original.data?.actants
+            ? row.original.data.actants
+                .filter((a) => a.position !== "s")
+                .map((a) => a.entityId)
             : [];
           const actantObjects: IEntity[] = actantIds.map(
             (actantId: string) => entities[actantId]
@@ -312,15 +314,42 @@ export const StatementListTable: React.FC<StatementListTable> = ({
         Header: "Text",
         accessor: "data",
         Cell: ({ row }: CellType) => {
-          const { text } = row.values.data;
+          const { text } = row.original.data;
           const maxWordsCount = 20;
           const trimmedText = text.split(" ").slice(0, maxWordsCount).join(" ");
-          if (text?.match(/(\w+)/g)?.length > maxWordsCount) {
+          if ((text.match(/(\w+)/g) ?? []).length > maxWordsCount) {
             return <StyledText>{trimmedText}...</StyledText>;
           }
           return <StyledText>{trimmedText}</StyledText>;
         },
       },
+      {
+        Header: "Warn.",
+        id: "warnings",
+        Cell: ({ row }: CellType) => {
+          const { warnings } = row.original;
+
+          return (
+            <>
+              {warnings.length > 0 && (
+                <Button
+                  icon={<TiWarningOutline size={20} />}
+                  label={warnings.length.toString()}
+                  color="warning"
+                  inverted
+                  noBorder
+                  noBackground
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    setStatementId(row.id);
+                    dispatch(setShowWarnings(true));
+                  }}
+                />
+              )}
+            </>
+          );
+        },
+      },
       {
         id: "lastEdit",
         Header: "Edited",
@@ -423,12 +452,12 @@ export const StatementListTable: React.FC<StatementListTable> = ({
                   e.stopPropagation();
                   const newObject = {
                     ...rowsExpanded,
-                    [row.values.id]: !rowsExpanded[row.values.id],
+                    [row.original.id]: !rowsExpanded[row.original.id],
                   };
                   dispatch(setRowsExpanded(newObject));
                 }}
               >
-                {rowsExpanded[row.values.id] ? (
+                {rowsExpanded[row.original.id] ? (
                   <FaChevronCircleUp />
                 ) : (
                   <FaChevronCircleDown />

diff --git a/packages/client/src/pages/MainPage/containers/TemplateListBox/TemplateListBox.tsx b/packages/client/src/pages/MainPage/containers/TemplateListBox/TemplateListBox.tsx
@@ -101,7 +101,7 @@ export const TemplateListBox: React.FC<TemplateListBox> = ({}) => {
         <StyledTemplateSectionHeader>
           <Button
             key="add-statement"
-            icon={<FaPlus size={14} />}
+            icon={<FaPlus />}
             color="primary"
             label="new Template"
             onClick={() => {

diff --git a/packages/client/src/pages/Users/containers/UserList/UsersUtils.tsx b/packages/client/src/pages/Users/containers/UserList/UsersUtils.tsx
@@ -69,7 +69,7 @@ export const UsersUtils: React.FC<UsersUtils> = React.memo(({}) => {
           label="new user"
           tooltipLabel="create user"
           disabled={!(validNewUserEmail() && validNewUserName)}
-          icon={<FaPlus size={14} />}
+          icon={<FaPlus />}
           color="primary"
           onClick={() => {
             createNewUserMutataion.mutate();

diff --git a/packages/client/src/redux/features/statementEditor/showWarningsSlice.tsx b/packages/client/src/redux/features/statementEditor/showWarningsSlice.tsx
@@ -0,0 +1,16 @@
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+
+const initialState: boolean = false;
+
+const showWarningsSlice = createSlice({
+  name: "showWarnings",
+  initialState: initialState,
+  reducers: {
+    setShowWarnings: (state: boolean, action: PayloadAction<boolean>) =>
+      (state = action.payload),
+  },
+});
+
+export const { setShowWarnings } = showWarningsSlice.actions;
+
+export default showWarningsSlice.reducer;
diff --git a/packages/client/src/redux/store.tsx b/packages/client/src/redux/store.tsx
@@ -22,6 +22,7 @@ import disableStatementListScrollSlice from "./features/statementList/disableSta
 import disableTreeScrollSlice from "./features/territoryTree/disableTreeScrollSlice";
 import filterOpenSlice from "./features/territoryTree/filterOpenSlice";
 import pingSlice from "./features/pingSlice";
+import showWarningsSlice from "./features/statementEditor/showWarningsSlice";
 
 const store: Store = configureStore({
   reducer: {
@@ -40,6 +41,9 @@ const store: Store = configureStore({
       lastClickedIndex: lastClickedIndexSlice,
       disableStatementListScroll: disableStatementListScrollSlice,
     }),
+    statementEditor: combineReducers({
+      showWarnings: showWarningsSlice,
+    }),
     rowDnd: combineReducers({
       draggedPropRow: draggedPropRowSlice,
       draggedActantRow: draggedActantRowSlice,