From 7d286a07f2141bf8b8b85ca9d9b5eb3c0d7fc996 Mon Sep 17 00:00:00 2001
From: Joe Boccanfuso <109477394+jbocce@users.noreply.github.com>
Date: Wed, 12 Jul 2023 10:19:03 -0400
Subject: [PATCH] fix(Worklist): use the flexbox gap style property for spacing
 between mode buttons (#3532)

---
 platform/app/src/routes/WorkList/WorkList.tsx | 85 ++++++++++---------
 1 file changed, 47 insertions(+), 38 deletions(-)

diff --git a/platform/app/src/routes/WorkList/WorkList.tsx b/platform/app/src/routes/WorkList/WorkList.tsx
index 5111d0d0d..7156b5451 100644
--- a/platform/app/src/routes/WorkList/WorkList.tsx
+++ b/platform/app/src/routes/WorkList/WorkList.tsx
@@ -336,47 +336,56 @@ function WorkList({
               : []
           }
         >
-          {appConfig.loadedModes.map((mode, i) => {
-            const isFirst = i === 0;
+          <div className="flex flex-row gap-2">
+            {appConfig.loadedModes.map((mode, i) => {
+              const isFirst = i === 0;
 
-            const modalitiesToCheck = modalities.replaceAll('/', '\\');
+              const modalitiesToCheck = modalities.replaceAll('/', '\\');
 
-            const isValidMode = mode.isValidMode({
-              modalities: modalitiesToCheck,
-              study,
-            });
-            // TODO: Modes need a default/target route? We mostly support a single one for now.
-            // We should also be using the route path, but currently are not
-            // mode.routeName
-            // mode.routes[x].path
-            // Don't specify default data source, and it should just be picked up... (this may not currently be the case)
-            // How do we know which params to pass? Today, it's just StudyInstanceUIDs and configUrl if exists
-            const query = new URLSearchParams();
-            if (filterValues.configUrl) {
-              query.append('configUrl', filterValues.configUrl);
-            }
-            query.append('StudyInstanceUIDs', studyInstanceUid);
-            return (
-              <Link
-                key={i}
-                to={`${dataPath ? '../../' : ''}${mode.routeName}${dataPath ||
-                  ''}?${query.toString()}`}
-                // to={`${mode.routeName}/dicomweb?StudyInstanceUIDs=${studyInstanceUid}`}
-              >
-                {/* TODO revisit the completely rounded style of buttons used for launching a mode from the worklist later - for now use LegacyButton*/}
-                <LegacyButton
-                  rounded="full"
-                  variant={isValidMode ? 'contained' : 'disabled'}
-                  disabled={!isValidMode}
-                  endIcon={<Icon name="launch-arrow" />} // launch-arrow | launch-info
-                  className={classnames({ 'ml-2': !isFirst })}
-                  onClick={() => {}}
+              const isValidMode = mode.isValidMode({
+                modalities: modalitiesToCheck,
+                study,
+              });
+              // TODO: Modes need a default/target route? We mostly support a single one for now.
+              // We should also be using the route path, but currently are not
+              // mode.routeName
+              // mode.routes[x].path
+              // Don't specify default data source, and it should just be picked up... (this may not currently be the case)
+              // How do we know which params to pass? Today, it's just StudyInstanceUIDs and configUrl if exists
+              const query = new URLSearchParams();
+              if (filterValues.configUrl) {
+                query.append('configUrl', filterValues.configUrl);
+              }
+              query.append('StudyInstanceUIDs', studyInstanceUid);
+              return (
+                <Link
+                  className={isValidMode ? '' : 'cursor-not-allowed'}
+                  key={i}
+                  to={`${dataPath ? '../../' : ''}${mode.routeName}${dataPath ||
+                    ''}?${query.toString()}`}
+                  onClick={event => {
+                    // In case any event bubbles up for an invalid mode, prevent the navigation.
+                    // For example, the event bubbles up when the icon embedded in the disabled button is clicked.
+                    if (!isValidMode) {
+                      event.preventDefault();
+                    }
+                  }}
+                  // to={`${mode.routeName}/dicomweb?StudyInstanceUIDs=${studyInstanceUid}`}
                 >
-                  {t(`Modes:${mode.displayName}`)}
-                </LegacyButton>
-              </Link>
-            );
-          })}
+                  {/* TODO revisit the completely rounded style of buttons used for launching a mode from the worklist later - for now use LegacyButton*/}
+                  <LegacyButton
+                    rounded="full"
+                    variant={isValidMode ? 'contained' : 'disabled'}
+                    disabled={!isValidMode}
+                    endIcon={<Icon name="launch-arrow" />} // launch-arrow | launch-info
+                    onClick={() => {}}
+                  >
+                    {t(`Modes:${mode.displayName}`)}
+                  </LegacyButton>
+                </Link>
+              );
+            })}
+          </div>
         </StudyListExpandedRow>
       ),
       onClickRow: () =>