Sidebar refresh button (#788)

* added refresh button to refresh dashboard, it will also refresh the current dashboard if it's not in draft mode

* added edge case when trying to reload the selected dashboard by clicking it and it's in draft mode, the discard modal will be shown to prevent wrong loading

* Fixed styling on sidebar refresh button

---------

Co-authored-by: Alfred Rubin <[email protected]>
Co-authored-by: Niels de Jong <[email protected]>

Author: alfredorubin96

src/dashboard/sidebar/DashboardSidebar.tsx

@@ -4,7 +4,13 @@ import { getDashboardIsEditable, getPageNumber } from '../../settings/SettingsSe
 import { getDashboardSettings, getDashboardTitle } from '../DashboardSelectors';
 import { Button, SideNavigation, SideNavigationGroupHeader, SideNavigationList, TextInput } from '@neo4j-ndl/react';
 import { removeReportThunk } from '../../page/PageThunks';
-import { PlusIconOutline, MagnifyingGlassIconOutline, CircleStackIconOutline } from '@neo4j-ndl/react/icons';
+import {
+  PlusIconOutline,
+  MagnifyingGlassIconOutline,
+  CircleStackIconOutline,
+  ArrowPathIconOutline,
+} from '@neo4j-ndl/react/icons';
+
 import Tooltip from '@mui/material/Tooltip';
 import { DashboardSidebarListItem } from './DashboardSidebarListItem';
 import {
@@ -367,6 +373,33 @@ export const NeoDashboardSidebar = ({
               <span className='n-text-palette-neutral-text-weak' style={{ lineHeight: '28px' }}>
                 Dashboards
               </span>
+              <Tooltip title='Refresh' aria-label='refresh' disableInteractive>
+                <Button
+                  aria-label={'refresh'}
+                  fill='text'
+                  size='small'
+                  color='neutral'
+                  style={{
+                    float: 'right',
+                    marginLeft: '3px',
+                    marginRight: '12px',
+                    paddingLeft: 0,
+                    paddingRight: '3px',
+                  }}
+                  onClick={() => {
+                    getDashboardListFromNeo4j();
+                    // When reloading, if the dashboard is not in DRAFT mode, we can directly refresh it.
+                    if (!draft) {
+                      const d = dashboards[selectedDashboardIndex];
+                      loadDashboardFromNeo4j(driver, dashboardDatabase, d.uuid, (file) => {
+                        loadDashboard(d.uuid, file);
+                      });
+                    }
+                  }}
+                >
+                  <ArrowPathIconOutline className='btn-icon-base-r-m' />
+                </Button>
+              </Tooltip>
               {/* Only let users create dashboards and change database when running in editor mode. */}
               {!readonly || (readonly && standaloneSettings.standaloneLoadFromOtherDatabases) ? (
                 <>
@@ -379,7 +412,7 @@ export const NeoDashboardSidebar = ({
                       style={{
                         float: 'right',
                         marginLeft: '0px',
-                        marginRight: '12px',
+                        marginRight: '3px',
                         paddingLeft: 0,
                         paddingRight: '3px',
                       }}
@@ -479,7 +512,7 @@ export const NeoDashboardSidebar = ({
                   saved={!(draft && selectedDashboardIndex == d.index)}
                   readonly={readonly}
                   onSelect={() => {
-                    if (draft && d.index !== selectedDashboardIndex) {
+                    if (draft) {
                       setInspectedIndex(d.index);
                       setModalOpen(Modal.LOAD);
                     } else {

src/index.pcss

@@ -37,6 +37,10 @@
     @apply n-mr-token-2 n-w-4 n-h-4;
   }
 
+  .btn-icon-base-r-m {
+    @apply n-ml-token-3 n-w-5 n-h-5;
+  }
+
   .btn-icon-base-r {
     @apply n-ml-token-3 n-w-6 n-h-6;
   }