Fix for reset / edit function in user-roles #554

Author: oharsta

client/src/components/MinimalDateField.jsx

@@ -3,13 +3,12 @@ import React, {useRef} from "react";
 import DatePicker from "react-datepicker";
 import ResetIcon from "@surfnet/sds/icons/functional-icons/close.svg";
 import EditIcon from "@surfnet/sds/icons/functional-icons/edit.svg";
-
 import "react-datepicker/dist/react-datepicker.css";
 import "./MinimalDateField.scss"
 import {futureDate, shortDateFromEpoch} from "../utils/Date";
 import {isEmpty} from "../utils/Utils";
 import I18n from "../locale/I18n";
-import {Chip, ChipType} from "@surfnet/sds";
+import {Chip, ChipType, Tooltip} from "@surfnet/sds";
 
 export const MinimalDateField = ({
                                      onChange,
@@ -64,11 +63,17 @@ export const MinimalDateField = ({
             {(!isEmpty(value) && allowNull) &&
                 <div className="icon reset-icon left"
                      onClick={() => onChange(null)}>
-                    <ResetIcon/>
+                    <Tooltip standalone={true}
+                             children={<ResetIcon/>}
+                             tip={I18n.t("forms.reset")}/>
+
                 </div>}
             <div className={`icon edit-icon ${isEmpty(value) || !allowNull ? "left" : ""}`}
                  onClick={toggle}>
-                <EditIcon/>
+                <Tooltip standalone={true}
+                         children={<EditIcon/>}
+                         tip={I18n.t("forms.edit")}/>
+
             </div>
         </div>
     );

client/src/components/User.jsx

@@ -108,7 +108,7 @@ export const User = ({user, other, config, currentUser}) => {
                 </section>
             </div>;
         return (
-            <Card cardType={CardType.Big} children={children}/>
+            <Card key={index} cardType={CardType.Big} children={children}/>
         );
     }
 

client/src/locale/en.js

@@ -317,6 +317,7 @@ const en = {
         ok: "OK",
         or: "or ",
         edit: "Edit",
+        reset: "Reset",
         cancel: "Cancel",
         save: "Save",
         specificDate: "Set specific date",

client/src/locale/nl.js

@@ -317,6 +317,7 @@ const nl = {
         ok: "Oké",
         or: "of ",
         edit: "Bewerken",
+        reset: "Reset",
         cancel: "Annuleren",
         save: "Opslaan",
         specificDate: "Zet specifieke datum",

client/src/pages/Role.jsx

@@ -64,22 +64,19 @@ export const Role = () => {
                 const newTabs = [
                     <Page key="guests"
                           name="guests"
-                          label={I18n.t("tabs.guestRoles")}
-                    >
+                          label={I18n.t("tabs.guestRoles")}>
                         <UserRoles role={res}
                                    guests={true}
                         />
                     </Page>,
                     <Page key="invitations"
                           name="invitations"
-                          label={I18n.t("tabs.allPendingInvitations")}
-                    >
+                          label={I18n.t("tabs.allPendingInvitations")}>
                         <Invitations role={res}/>
                     </Page>,
                     <Page key="maintainers"
                           name="maintainers"
-                          label={I18n.t("tabs.userRoles")}
-                    >
+                          label={I18n.t("tabs.userRoles")}>
                         <UserRoles role={res}
                                    guests={false}
                         />

client/src/tabs/UserRoles.jsx

@@ -339,6 +339,7 @@ export const UserRoles = ({role, guests}) => {
             key: "endDate",
             header: I18n.t("roles.endDate"),
             toolTip: I18n.t("tooltips.roleExpiryDateTooltip"),
+            hasLink: true,
             mapper: userRole => displayEndDate(userRole)
         },
         {
@@ -349,6 +350,7 @@ export const UserRoles = ({role, guests}) => {
         {
             key: "adminIcons",
             nonSortable: true,
+            hasLink: true,
             header: "",
             mapper: userRole => actionIcons(userRole)
         },