table buttons acessibility and label correction

.eslintrc.json

@@ -14,13 +14,6 @@
     "eqeqeq": [
       "error",
       "always"
-    ],
-    "quotes": [
-      2,
-      "single",
-      {
-	    "avoidEscape": true
-	  }
     ]
   }
 }

src/components/generic/Table/Table.js

@@ -11,6 +11,7 @@ const Table = ({
   orderedKeys,
   popUpMessageHandler,
   sortByUpdate,
+  profileInfo,
   rowFooter = true,
 }) => {
   const [, updateState] = React.useState();
@@ -47,6 +48,7 @@ const Table = ({
           popUpMessageHandler={popUpMessageHandler}
           itemToHandle={itemToHandle}
           sortByUpdate={sortByUpdate}
+          profileInfo={profileInfo}
           tableUpdate={tableUpdate}
           setItemToHandle={setItemToHandle}
           setEditPopUp={setEditPopUp}
@@ -64,6 +66,7 @@ const Table = ({
           popUpMessageHandler={popUpMessageHandler}
           itemToHandle={itemToHandle}
           sortByUpdate={sortByUpdate}
+          profileInfo={profileInfo}
           tableUpdate={tableUpdate}
           setItemToHandle={setItemToHandle}
           setEditPopUp={setEditPopUp}

src/components/generic/Table/components/DesktopTable/DesktopTable.js

@@ -32,6 +32,7 @@ const DesktopTable = (props) => {
                   props.setEditPopUp(true);
                 }}
                 rowFooter={props.rowFooter}
+                profileInfo={props.profileInfo}
                 item={item}
                 i={i}
               />

src/components/generic/Table/components/TableRowButtons/TableRowButtons.js

@@ -2,12 +2,19 @@ import React from 'react';
 import { FlexRow, Svg } from '../../../../../utils/containers';
 import theme from '../../../../../utils/theme';
 
-const TableRowButtons = ({ buttons, i, active }) => {
+const TableRowButtons = ({ buttons, i, active, buttonAccessMessage }) => {
+  const getButtonTitle = (defaultTitle) => {
+    if (buttonAccessMessage === 'default') {
+      return defaultTitle;
+    } else return buttonAccessMessage;
+  };
+
   return (
-    <FlexRow gap="12px">
+    <FlexRow gap="12px" position='relative'>
       {buttons.map((button, j) => {
         return (
           <Svg
+            title={getButtonTitle(button.title)}
             key={`table-item-button-${i}-${j}`}
             onClick={active ? button.handler : null}
             src={button.icon}
@@ -17,7 +24,7 @@ const TableRowButtons = ({ buttons, i, active }) => {
             width="16px"
             height="16px"
           />
-        );
+      );
       })}
     </FlexRow>
   );

src/components/generic/Table/components/TableRowFooter/TableRowFooter.js

@@ -6,35 +6,36 @@ import pensilIco from '../../../../../assets/pencil_ico.svg';
 import deleteIco from '../../../../../assets/delete_ico.svg';
 import KeyCloakService from '../../../../../services/KeyCloakService';
 
-const TableRowFooter = ({ rowFooter, item, i, deleteItem, editItem }) => {
-  const [profileInfo, setProfileInfo] = React.useState(null);
-
-  React.useEffect(() => {
-    KeyCloakService.getProfileInfo(setProfileInfo);
-  }, []);
-
-  const isActive = () => {
+const TableRowFooter = ({ rowFooter, item, i, deleteItem, editItem, profileInfo }) => {
+  const buttonsActive = () => {
     if (!KeyCloakService.isLoggedIn()) return false;
-    if (profileInfo) {
-      if (
+    else if (
         profileInfo?.preferred_username !== item.submitter &&
         profileInfo?.name !== item.submitter
-      )
-        return false;
-    }
+      ) return false;
     return true;
   };
 
+  const getButtonAccessMessage = () => {
+    if (!KeyCloakService.isLoggedIn()) {
+      return "You must be logged in to use this option.";
+    } else if (profileInfo?.preferred_username !== item.submitter &&
+      profileInfo?.name !== item.submitter) {
+      return "You don't have permission to use this option.";
+    } return "default";
+  };
+
   if (rowFooter) {
     return (
       <FlexRow className="TableStyle__row-footer">
         <TableRowTags item={item} i={i} />
         <TableRowButtons
           buttons={[
-            { icon: pensilIco, handler: () => editItem() },
-            { icon: deleteIco, handler: () => deleteItem() },
+            { title: "edit", icon: pensilIco, handler: () => editItem() },
+            { title: "delete", icon: deleteIco, handler: () => deleteItem() },
           ]}
-          active={isActive()}
+          active={buttonsActive()}
+          buttonAccessMessage={getButtonAccessMessage()}
           i={i}
         />
       </FlexRow>

src/pages/AllEntries/AllEntries.js

@@ -9,6 +9,7 @@ import Loading from '../../components/generic/Loading';
 import { CALC_PAGES, ELEMENTS_PER_PAGE } from '../../utils/globals';
 import searchQueryHandler from './searchHandler';
 import orderKeys from './orderKeys';
+import KeyCloakService from '../../services/KeyCloakService';
 
 const AllEntries = (props) => {
   const [entriesAll, setEntriesAll] = React.useState([]);
@@ -19,6 +20,15 @@ const AllEntries = (props) => {
   const [scoresSorted, setScoresSorted] = React.useState([]);
   const [submitterSorted, setSubmitterSorted] = React.useState(false);
   const [whenSorted, setWhenSorted] = React.useState(false);
+  const [profileInfo, setProfileInfo] = React.useState(null);
+
+  const getProfileInfo = () => {
+    if (KeyCloakService.isLoggedIn()) {
+      KeyCloakService.getProfileInfo(setProfileInfo);
+    } else {
+      setProfileInfo(false);
+    }
+  };
 
   React.useMemo(() => {
     if (props.challengeName) {
@@ -30,6 +40,7 @@ const AllEntries = (props) => {
         setScoresSorted
       );
     }
+    getProfileInfo();
   }, [props.challengeName]);
 
   const sortByUpdate = React.useCallback(
@@ -121,7 +132,7 @@ const AllEntries = (props) => {
       maxWidth="1600px"
     >
       <H2 as="h2">All Entries</H2>
-      {!loading ? (
+      {!loading && (profileInfo !== null) ? (
         <>
           <Search
             searchQueryHandler={(event) =>
@@ -135,6 +146,7 @@ const AllEntries = (props) => {
                 orderedKeys={orderKeys(entries[0])}
                 sortByUpdate={sortByUpdate}
                 popUpMessageHandler={props.popUpMessageHandler}
+                profileInfo={profileInfo}
               />
             </div>
           )}