From 1d68702d35ce50429c16010d951a1da5c0dd689d Mon Sep 17 00:00:00 2001
From: burnettk <burnettk@users.noreply.github.com>
Date: Fri, 25 Nov 2022 02:53:20 -0500
Subject: [PATCH] do not mislead user about being able to edit and clean up
 time in words

---
 .../src/components/TableCellWithTimeAgoInWords.tsx  |  8 ++++----
 .../src/components/TasksForMyOpenProcesses.tsx      |  2 +-
 .../src/components/TasksWaitingForMe.tsx            |  2 +-
 .../src/components/TasksWaitingForMyGroups.tsx      |  2 +-
 spiffworkflow-frontend/src/helpers/timeago.js       | 10 +++++++---
 .../src/routes/ProcessModelShow.tsx                 | 13 ++++++++++---
 6 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/spiffworkflow-frontend/src/components/TableCellWithTimeAgoInWords.tsx b/spiffworkflow-frontend/src/components/TableCellWithTimeAgoInWords.tsx
index 754c37fb5..9952c0561 100644
--- a/spiffworkflow-frontend/src/components/TableCellWithTimeAgoInWords.tsx
+++ b/spiffworkflow-frontend/src/components/TableCellWithTimeAgoInWords.tsx
@@ -3,15 +3,15 @@ import { TimeAgo } from '../helpers/timeago';
 import { convertSecondsToFormattedDateTime } from '../helpers';
 
 type OwnProps = {
-  time_in_seconds: number;
+  timeInSeconds: number;
 };
 
 export default function TableCellWithTimeAgoInWords({
-  time_in_seconds,
+  timeInSeconds,
 }: OwnProps) {
   return (
-    <td title={convertSecondsToFormattedDateTime(time_in_seconds) || '-'}>
-      {time_in_seconds ? TimeAgo.inWords(time_in_seconds) : '-'}
+    <td title={convertSecondsToFormattedDateTime(timeInSeconds) || '-'}>
+      {timeInSeconds ? TimeAgo.inWords(timeInSeconds) : '-'}
     </td>
   );
 }
diff --git a/spiffworkflow-frontend/src/components/TasksForMyOpenProcesses.tsx b/spiffworkflow-frontend/src/components/TasksForMyOpenProcesses.tsx
index 05121c861..6e6e84d55 100644
--- a/spiffworkflow-frontend/src/components/TasksForMyOpenProcesses.tsx
+++ b/spiffworkflow-frontend/src/components/TasksForMyOpenProcesses.tsx
@@ -75,7 +75,7 @@ export default function MyOpenProcesses() {
             ) || '-'}
           </td>
           <TableCellWithTimeAgoInWords
-            time_in_seconds={rowToUse.updated_at_in_seconds}
+            timeInSeconds={rowToUse.updated_at_in_seconds}
           />
           <td>
             <Button
diff --git a/spiffworkflow-frontend/src/components/TasksWaitingForMe.tsx b/spiffworkflow-frontend/src/components/TasksWaitingForMe.tsx
index e5504ff05..ccf0ea108 100644
--- a/spiffworkflow-frontend/src/components/TasksWaitingForMe.tsx
+++ b/spiffworkflow-frontend/src/components/TasksWaitingForMe.tsx
@@ -75,7 +75,7 @@ export default function TasksWaitingForMe() {
             ) || '-'}
           </td>
           <TableCellWithTimeAgoInWords
-            time_in_seconds={rowToUse.updated_at_in_seconds}
+            timeInSeconds={rowToUse.updated_at_in_seconds}
           />
           <td>
             <Button
diff --git a/spiffworkflow-frontend/src/components/TasksWaitingForMyGroups.tsx b/spiffworkflow-frontend/src/components/TasksWaitingForMyGroups.tsx
index 8a020ff11..51c38e946 100644
--- a/spiffworkflow-frontend/src/components/TasksWaitingForMyGroups.tsx
+++ b/spiffworkflow-frontend/src/components/TasksWaitingForMyGroups.tsx
@@ -83,7 +83,7 @@ export default function TasksWaitingForMyGroups() {
             ) || '-'}
           </td>
           <TableCellWithTimeAgoInWords
-            time_in_seconds={rowToUse.updated_at_in_seconds}
+            timeInSeconds={rowToUse.updated_at_in_seconds}
           />
           <td>
             <Button
diff --git a/spiffworkflow-frontend/src/helpers/timeago.js b/spiffworkflow-frontend/src/helpers/timeago.js
index fb36012ab..54d0969c5 100644
--- a/spiffworkflow-frontend/src/helpers/timeago.js
+++ b/spiffworkflow-frontend/src/helpers/timeago.js
@@ -1,5 +1,6 @@
+/* eslint-disable no-restricted-syntax */
 // https://gist.github.com/caiotarifa/30ae974f2293c761f3139dd194abd9e5
-export const TimeAgo = (function () {
+export const TimeAgo = (function awesomeFunc() {
   const self = {};
 
   // Public Methods
@@ -20,9 +21,11 @@ export const TimeAgo = (function () {
     years: '%d years',
   };
 
-  self.inWords = function (timeAgo) {
+  self.inWords = function inWords(timeAgo) {
     const milliseconds = timeAgo * 1000;
-    const seconds = Math.floor((new Date() - parseInt(milliseconds)) / 1000);
+    const seconds = Math.floor(
+      (new Date() - parseInt(milliseconds, 10)) / 1000
+    );
     const separator = this.locales.separator || ' ';
     let words = this.locales.prefix + separator;
     let interval = 0;
@@ -36,6 +39,7 @@ export const TimeAgo = (function () {
 
     let distance = this.locales.seconds;
 
+    // eslint-disable-next-line guard-for-in
     for (const key in intervals) {
       interval = Math.floor(intervals[key]);
 
diff --git a/spiffworkflow-frontend/src/routes/ProcessModelShow.tsx b/spiffworkflow-frontend/src/routes/ProcessModelShow.tsx
index 0df36dbb3..863aeb655 100644
--- a/spiffworkflow-frontend/src/routes/ProcessModelShow.tsx
+++ b/spiffworkflow-frontend/src/routes/ProcessModelShow.tsx
@@ -7,6 +7,7 @@ import {
   TrashCan,
   Favorite,
   Edit,
+  View,
   ArrowRight,
   // @ts-ignore
 } from '@carbon/icons-react';
@@ -66,7 +67,7 @@ export default function ProcessModelShow() {
     [targetUris.processModelShowPath]: ['PUT', 'DELETE'],
     [targetUris.processInstanceListPath]: ['GET'],
     [targetUris.processInstanceActionPath]: ['POST'],
-    [targetUris.processModelFileCreatePath]: ['POST', 'GET', 'DELETE'],
+    [targetUris.processModelFileCreatePath]: ['POST', 'PUT', 'GET', 'DELETE'],
   };
   const { ability, permissionsLoaded } = usePermissionFetcher(
     permissionRequestData
@@ -214,12 +215,18 @@ export default function ProcessModelShow() {
     isPrimaryBpmnFile: boolean
   ) => {
     const elements = [];
+    let icon = View;
+    let actionWord = 'View';
+    if (ability.can('PUT', targetUris.processModelFileCreatePath)) {
+      icon = Edit;
+      actionWord = 'Edit';
+    }
     elements.push(
       <Can I="GET" a={targetUris.processModelFileCreatePath} ability={ability}>
         <Button
           kind="ghost"
-          renderIcon={Edit}
-          iconDescription="Edit File"
+          renderIcon={icon}
+          iconDescription={`${actionWord} File`}
           hasIconOnly
           size="lg"
           data-qa={`edit-file-${processModelFile.name.replace('.', '-')}`}