[BP-149] [BP-150] Smartsheet and Monday: Enhance button rendering and styling adjustments

integrationList.json

@@ -482,7 +482,7 @@
     "isActiveInProd": false
   },
   {
-    "matches": ["*://app.smartsheet.com/*"],
+    "matches": ["*://app.smartsheet.com/*", "*://*.smartsheet.eu/*"],
     "script": ["smartsheet.js"],
     "isActiveInProd": true
   }

scripts-2.0/hooks/useTheme/useTheme.tsx

@@ -18,7 +18,7 @@ export const useTheme = (): IUseTheme => {
                 case 'system':
                 default:
                     setTheme(
-                        window.matchMedia('(prefers-color-scheme: dark)').matches ? 'darkmode' : 'system'
+                        window.matchMedia('(prefers-color-scheme: dark)').matches ? 'darkmode' : 'default'
                     );
             }
         }).catch(() => {});

scripts-2.0/style/monday.scss

@@ -1,26 +1,13 @@
 .tc-button.monday {
   &__table-view {
     height: 100%;
+    top: 7px;
+    position: relative;
 
-    svg {
-      width: 20px;
-    }
   }
 
   &__edit-view {
-    svg {
-      width: 115px;
-    }
-  }
-
-  &__calendar-view {
-    margin: 3px 0 0 5px;
-    position: absolute;
-    opacity: 0;
-
-    svg {
-      width: 18px;
-    }
+    margin: 5px 0 0 0;
   }
 }
 

scripts-2.0/style/smartsheet.scss

@@ -10,14 +10,33 @@
 }
 
 .tc-button.smartsheet-grid {
-  position: absolute;
-  left: 4px;
+  position: relative;
+  left: 0;
+  top: -2px;
+  margin-right: 4px;
+  vertical-align: middle;
 }
 .tc-button.smartsheet-card {
   height: 20px;
   margin: -4px 5px 0 1px;
 }
 
+.tc-smartsheet-board-card-title {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.tc-smartsheet-board-card-title > [data-client-id="boardvw-inline-edit-text-field"] {
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
+.tc-button.smartsheet-board-card {
+  flex: 0 0 auto;
+  margin: -3px 0px 0px 4px;
+}
+
 .timecamp .footer__buttons {
   display: flex;
   align-items: center;

scripts-2.0/third_party/monday.js

@@ -55,64 +55,43 @@ tcbutton.render(
     }
 );
 
-//Calendar view
+//Edit view
 tcbutton.render(
-    '.deadline-task-component:not(.tc)',
-    {observe: true, debounceInterval: 500},
+    '.item-page-header-title-section .item-page-item-name h2',
+    {observe: true, debounceInterval: 50},
     elem => {
-        if ($('.tc-button', elem)) {
-            return false;
-        }
-
         try {
-            const pulseId = $('.button_link', elem).href.split('/').pop();
+            const pulseId = document.URL.split('/').pop();
+
             const externalTaskId = buildExternalIdForMonday(pulseId);
             if (!externalTaskId) {
                 return false;
             }
 
-            const description = () => {
-                return $('.pulse-name-text .ds-text-component span', elem).textContent.trim();
-            };
+            const insertTarget = elem.parentElement.parentElement.parentElement.parentElement.parentElement;
+            const alreadyCreatedButtons = $$('.tc-button.monday__edit-view', insertTarget.parentElement);
 
-            const link = tcbutton.createTimerLink({
-                className: MONDAY,
-                additionalClasses: [MONDAY + '__calendar-view'],
-                description: description,
-                buttonType: 'minimal',
-                externalTaskId: externalTaskId,
-                isBackendIntegration: true,
-                taskNotFoundInfo: TASK_NOT_FOUND_INFO
-            });
+            if (alreadyCreatedButtons.length > 0) {
+                const buttonsArray = Array.from(alreadyCreatedButtons);
 
-            $('.pulse-name-wrapper .ds-text-component', elem).insertAdjacentElement('beforeend', link);
+                const correctButtons = buttonsArray.filter(button => {
+                    return button.dataset.externalTaskId === externalTaskId;
+                });
+                const incorrectButtons = buttonsArray.filter(button => {
+                    return button.dataset.externalTaskId !== externalTaskId;
+                });
 
-            return true;
-        } catch (e) {
-            return false;
-        }
-    }
-);
-
-//Edit view
-tcbutton.render(
-    '.slide-panel-content .flexible-header:not(.tc)',
-    {observe: true, debounceInterval: 500},
-    elem => {
-        if ($('.tc-button', elem)) {
-            return false;
-        }
+                if (correctButtons.length) {
+                    correctButtons.slice(1).forEach(button => button.remove());
+                }
 
-        try {
-            const pulseId = document.URL.split('/').pop();
+                incorrectButtons.forEach(button => button.remove());
 
-            const externalTaskId = buildExternalIdForMonday(pulseId);
-            if (!externalTaskId) {
                 return false;
             }
 
             const description = () => {
-                return $('.heading-component', elem).textContent.trim();
+                return elem?.textContent?.trim()
             };
 
             const link = tcbutton.createTimerLink({
@@ -124,7 +103,7 @@ tcbutton.render(
                 taskNotFoundInfo: TASK_NOT_FOUND_INFO
             });
 
-            $('.item-board-subset-tabs-component .add-board-subset-picker-wrapper-v2', elem).insertAdjacentElement('beforeend', link);
+            insertTarget.insertAdjacentElement('afterend', link);
 
             return true;
         } catch (e) {

scripts-2.0/third_party/smartsheet.js

@@ -1,33 +1,5 @@
 "use strict";
 
-//Task
-tcbutton.render(
-    ".conversationsPanelHeader.rowCommentsMode:not(.tc)",
-    { observe: true, debounceInterval: 500 },
-    (elem) => {
-        const task = $(".centeredTitle", elem);
-        if (!task) {
-            return false;
-        }
-
-        let title = task.textContent.trim();
-        let colonIndex = title.indexOf(':');
-        if (colonIndex !== -1) {
-            title = title.substring(colonIndex + 1);
-        }
-
-        const link = tcbutton.createTimerLink({
-            className: "smartsheet-task",
-            buttonType: "minimal",
-            description: title,
-        });
-
-        $(".centeredTitle", elem).appendChild(link);
-
-        return true;
-    }
-);
-
 //Sheet title
 tcbutton.render(
     ".containerNameWrapper:not(.tc)",
@@ -51,10 +23,15 @@ tcbutton.render(
 
 //Grid cell and gantt cell
 tcbutton.render(
-    ".gridPrimaryCell:not(.tc)",
+    ".gridRowWrapper > div:not(.groupingSummaryReportGroup) .gridPrimaryCell .gridCellContent",
     { observe: true, debounceInterval: 500 },
     (elem) => {
-        const title = $(".gridCellContent", elem)?.textContent.trim();
+        if ($(".tc-button.smartsheet-grid", elem)) {
+            return false;
+        }
+
+        const title = elem?.textContent.trim();
+
         if (!title) {
             return false;
         }
@@ -66,7 +43,7 @@ tcbutton.render(
             description: title,
         });
 
-        elem.insertAdjacentElement("beforebegin", link);
+        elem.insertAdjacentElement("afterbegin", link);
 
         return true;
     }
@@ -94,3 +71,41 @@ tcbutton.render(
         return true;
     }
 );
+
+//Board card details view
+tcbutton.render(
+    ".card-focus-lock:not(.tc)",
+    { observe: true, debounceInterval: 500 },
+    (elem) => {
+        const titleField = $('[data-client-id="boardvw-inline-edit-text-field"]', elem);
+        const titleInput = $('.inline-edit-text-field-input', titleField);
+        const titleWrapper = titleField?.parentElement;
+
+        if (!titleField || !titleInput || !titleWrapper) {
+            return false;
+        }
+
+        if ($('.tc-button.smartsheet-board-card', titleWrapper)) {
+            return false;
+        }
+
+        const title = titleInput.value?.trim();
+
+        if (!title) {
+            return false;
+        }
+
+        titleWrapper.classList.add('tc-smartsheet-board-card-title');
+
+        const link = tcbutton.createTimerLink({
+            className: "smartsheet-board-card",
+            buttonType: "minimal",
+            projectName: title,
+            description: title,
+        });
+
+        titleWrapper.insertAdjacentElement("afterbegin", link);
+
+        return true;
+    }
+);