Collection of bug fixes for the 2.4.2 release (#744)

nielsdejong · web-flow · commit c4cf2fd1ff76 · 2024-01-12T14:44:55.000+01:00
* Fixed issue where table action rule creation modal displayed invalid suggestions

* Add support for links in table actions, as well as improved rendering of links in markdown

* No longer rendering empty buttons for missing values in table actions

* Fix number formatting to always use en-US locale

* Fixed issue where dashboard database was not set correctly for share links without credentials

* Fixed dashboard title visibility in sidebar

* Added missing setting to pie chart configuration

* Clean up code, remove old console.log statements

* Stability and UX for table checkbox actiosn

* Handling shared dashboards in standalone mode

* Added hidden setting for hiding the plaintext password warning. Fixed issue with casting null dates

* Style tweaks for reports without footers

* Fixed styling defaults for bar chart

* Fixed fullscreen views

* Freetext parameter with manual save style fixes

* clean up graph editing modal

* Correction to release notes

* Robustness of actions rule create modal

* Improved comments
diff --git a/changelog.md b/changelog.md
@@ -6,11 +6,11 @@ This is a release with a large amount of quality of life improvements, as well a
 - Added parameter select setting for autopopulating first selector value. [#746](https://github.com/neo4j-labs/neodash/pull/746)
 - Improved UX for editing page names & dashboard titles. [#743](https://github.com/neo4j-labs/neodash/pull/743)
 - Unified common settings for each report type. [#724](https://github.com/neo4j-labs/neodash/pull/724)
-- SSO auth tokens are now automatically refreshed on expiry. [#611](https://github.com/neo4j-labs/neodash/pull/611)
 - Title of the browser tab NeoDash runs on is now automatically set to the dashboard name.  [#708](https://github.com/neo4j-labs/neodash/pull/708)
 - Fixed issue where invisible table columns were not handled correctly. [#695](https://github.com/neo4j-labs/neodash/pull/695)
 - Miscellaneous bug fixes, style improvements & stability fixes. [#744](https://github.com/neo4j-labs/neodash/pull/744)
 
+
 ## NeoDash 2.4.1
 This is a patch release following 2.4.0. It contains several new features for self-hosted (standalone) NeoDash deployments, as well as a variety of UX improvements for dashboard editors.
 
diff --git a/public/style.css b/public/style.css
@@ -95,7 +95,8 @@
 }
 
 .react-resizable-handle {
-  bottom: 1px !important;
+  bottom: 4px !important;
+  right: -2px !important;
   opacity: 0.5;
   color: rgb(222, 222, 222);
 }
@@ -216,7 +217,7 @@
 }
 
 .card-view .MuiTablePagination-root {
-  margin-top: -40px;
+  margin-top: 0px;
 
 }
 
@@ -253,3 +254,7 @@
   display: none;
 }
 /* End Gantt chart workaround */
+
+.markdown-widget a {
+  text-decoration: underline;
+}
diff --git a/release-notes.md b/release-notes.md
@@ -6,7 +6,6 @@ This is a release with a large amount of quality of life improvements, as well a
 - Added parameter select setting for autopopulating first selector value. [#746](https://github.com/neo4j-labs/neodash/pull/746)
 - Improved UX for editing page names & dashboard titles. [#743](https://github.com/neo4j-labs/neodash/pull/743)
 - Unified common settings for each report type. [#724](https://github.com/neo4j-labs/neodash/pull/724)
-- SSO auth tokens are now automatically refreshed on expiry. [#611](https://github.com/neo4j-labs/neodash/pull/611)
 - Title of the browser tab NeoDash runs on is now automatically set to the dashboard name.  [#708](https://github.com/neo4j-labs/neodash/pull/708)
 - Fixed issue where invisible table columns were not handled correctly. [#695](https://github.com/neo4j-labs/neodash/pull/695)
 - Miscellaneous bug fixes, style improvements & stability fixes. [#744](https://github.com/neo4j-labs/neodash/pull/744)
diff --git a/src/application/ApplicationActions.ts b/src/application/ApplicationActions.ts
@@ -150,6 +150,7 @@ export const setStandaloneEnabled = (
   standaloneDashboardURL: string,
   standaloneUsername: string,
   standalonePassword: string,
+  standalonePasswordWarningHidden: boolean,
   standaloneAllowLoad: boolean,
   standaloneLoadFromOtherDatabases: boolean,
   standaloneMultiDatabase: boolean,
@@ -167,6 +168,7 @@ export const setStandaloneEnabled = (
     standaloneDashboardURL,
     standaloneUsername,
     standalonePassword,
+    standalonePasswordWarningHidden,
     standaloneAllowLoad,
     standaloneLoadFromOtherDatabases,
     standaloneMultiDatabase,
diff --git a/src/application/ApplicationReducer.ts b/src/application/ApplicationReducer.ts
@@ -195,6 +195,7 @@ export const applicationReducer = (state = initialState, action: { type: any; pa
         standaloneDashboardURL,
         standaloneUsername,
         standalonePassword,
+        standalonePasswordWarningHidden,
         standaloneAllowLoad,
         standaloneLoadFromOtherDatabases,
         standaloneMultiDatabase,
@@ -211,6 +212,7 @@ export const applicationReducer = (state = initialState, action: { type: any; pa
         standaloneDashboardURL: standaloneDashboardURL,
         standaloneUsername: standaloneUsername,
         standalonePassword: standalonePassword,
+        standalonePasswordWarningHidden: standalonePasswordWarningHidden,
         standaloneAllowLoad: standaloneAllowLoad,
         standaloneLoadFromOtherDatabases: standaloneLoadFromOtherDatabases,
         standaloneMultiDatabase: standaloneMultiDatabase,
diff --git a/src/application/ApplicationSelectors.ts b/src/application/ApplicationSelectors.ts
@@ -94,6 +94,7 @@ export const applicationGetStandaloneSettings = (state: any) => {
     standaloneDashboardURL: state.application.standaloneDashboardURL,
     standaloneUsername: state.application.standaloneUsername,
     standalonePassword: state.application.standalonePassword,
+    standalonePasswordWarningHidden: state.application.standalonePasswordWarningHidden,
     standaloneAllowLoad: state.application.standaloneAllowLoad,
     standaloneLoadFromOtherDatabases: state.application.standaloneLoadFromOtherDatabases,
     standaloneMultiDatabase: state.application.standaloneMultiDatabase,
diff --git a/src/application/ApplicationThunks.ts b/src/application/ApplicationThunks.ts
@@ -259,26 +259,42 @@ export const handleSharedDashboardsThunk = () => (dispatch: any) => {
       const skipConfirmation = urlParams.get('skipConfirmation') == 'Yes';
 
       const dashboardDatabase = urlParams.get('dashboardDatabase');
+      dispatch(setStandaloneDashboardDatabase(dashboardDatabase));
       if (urlParams.get('credentials')) {
+        setWelcomeScreenOpen(false);
         const connection = decodeURIComponent(urlParams.get('credentials'));
         const protocol = connection.split('://')[0];
         const username = connection.split('://')[1].split(':')[0];
         const password = connection.split('://')[1].split(':')[1].split('@')[0];
-
         const database = connection.split('@')[1].split(':')[0];
         const url = connection.split('@')[1].split(':')[1];
         const port = connection.split('@')[1].split(':')[2];
-        if (url == password) {
-          // Special case where a connect link is generated without a password.
-          // Here, the format is parsed incorrectly and we open the connection window instead.
-
-          dispatch(resetShareDetails());
-          dispatch(setConnectionProperties(protocol, url, port, database, username.split('@')[0], ''));
-          dispatch(setWelcomeScreenOpen(false));
-          dispatch(setConnectionModalOpen(true));
-          // window.history.pushState({}, document.title, "/");
-          return;
-        }
+        // if (url == password) {
+        //   // Special case where a connect link is generated without a password.
+        //   // Here, the format is parsed incorrectly and we open the connection window instead.
+        //   dispatch(setConnectionProperties(protocol, url, port, database, username.split('@')[0], ''));
+        //   dispatch(
+        //     setShareDetailsFromUrl(
+        //       type,
+        //       id,
+        //       standalone,
+        //       protocol,
+        //       url,
+        //       port,
+        //       database,
+        //       username.split('@')[0],
+        //       '',
+        //       dashboardDatabase,
+        //       true
+        //     )
+        //   );
+        //   setDashboardToLoadAfterConnecting(id);
+        //   window.history.pushState({}, document.title, window.location.pathname);
+        //   dispatch(setConnectionModalOpen(true));
+        //   dispatch(setWelcomeScreenOpen(false));
+        //   // window.history.pushState({}, document.title, "/");
+        //   return;
+        // }
 
         dispatch(setConnectionModalOpen(false));
         dispatch(
@@ -448,6 +464,7 @@ export const loadApplicationConfigThunk = () => async (dispatch: any, getState:
         config.standaloneDashboardURL,
         config.standaloneUsername,
         config.standalonePassword,
+        config.standalonePasswordWarningHidden,
         config.standaloneAllowLoad,
         config.standaloneLoadFromOtherDatabases,
         config.standaloneMultiDatabase,
@@ -605,7 +622,6 @@ export const initializeApplicationAsStandaloneThunk =
   (config, paramsToSetAfterConnecting) => (dispatch: any, getState: any) => {
     const clearNotificationAfterLoad = true;
     const state = getState();
-
     // If we are running in standalone mode, auto-set the connection details that are configured.
     dispatch(
       setConnectionProperties(
@@ -648,4 +664,5 @@ export const initializeApplicationAsStandaloneThunk =
     } else {
       dispatch(setConnectionModalOpen(true));
     }
+    dispatch(handleSharedDashboardsThunk());
   };
diff --git a/src/card/Card.tsx b/src/card/Card.tsx
@@ -209,7 +209,7 @@ const NeoCard = ({
   if (expanded) {
     return (
       <Dialog open={expanded} aria-labelledby='form-dialog-title' className='dialog-xxl'>
-        <Dialog.Content style={{ height: document.documentElement.clientHeight }}>{component}</Dialog.Content>
+        <Dialog.Content style={{ height: document.documentElement.clientHeight - 200 }}>{component}</Dialog.Content>
       </Dialog>
     );
   }
diff --git a/src/card/settings/CardSettings.tsx b/src/card/settings/CardSettings.tsx
@@ -36,7 +36,7 @@ const NeoCardSettings = ({
   expanded,
   onToggleCardExpand,
 }) => {
-  const reportHeight = heightPx - CARD_HEADER_HEIGHT + 24;
+  const reportHeight = heightPx - CARD_HEADER_HEIGHT + 19;
 
   const cardSettingsHeader = (
     <NeoCardSettingsHeader
diff --git a/src/card/view/CardView.tsx b/src/card/view/CardView.tsx
@@ -44,7 +44,7 @@ const NeoCardView = ({
   expanded,
   onToggleCardExpand,
 }) => {
-  const reportHeight = heightPx - CARD_FOOTER_HEIGHT - CARD_HEADER_HEIGHT + 22;
+  const reportHeight = heightPx - CARD_FOOTER_HEIGHT - CARD_HEADER_HEIGHT + 20;
   const cardHeight = heightPx - CARD_FOOTER_HEIGHT + 23;
   const ref = React.useRef();
 
@@ -137,10 +137,10 @@ const NeoCardView = ({
 
   const localParameters = { ...getLocalParameters(query), ...getLocalParameters(settings.drilldownLink) };
   const reportTypes = getReportTypes(extensions);
-  const withoutFooter =
-    reportTypes[type] && reportTypes[type].withoutFooter
-      ? reportTypes[type].withoutFooter
-      : (reportTypes[type] && !reportTypes[type].selection) || (settings && settings.hideSelections);
+  const reportTypeHasNoFooter = reportTypes[type] && reportTypes[type].withoutFooter;
+  const withoutFooter = reportTypeHasNoFooter
+    ? reportTypes[type].withoutFooter
+    : (reportTypes[type] && !reportTypes[type].selection) || (settings && settings.hideSelections);
 
   const getGlobalParameter = (key: string): unknown => {
     return globalParameters ? globalParameters[key] : undefined;
@@ -170,13 +170,13 @@ const NeoCardView = ({
     paddingRight: '0px',
     paddingTop: '0px',
     width: '100%',
-    marginTop: '-3px',
+    marginTop: '-9px',
     height: expanded
       ? withoutFooter
         ? '100%'
         : `calc(100% - ${CARD_FOOTER_HEIGHT}px)`
       : withoutFooter
-      ? `${reportHeight + CARD_FOOTER_HEIGHT}px`
+      ? `${reportHeight + CARD_FOOTER_HEIGHT - (reportTypeHasNoFooter ? 0 : 20)}px`
       : `${reportHeight}px`,
     overflow: 'auto',
   };
diff --git a/src/chart/ChartUtils.ts b/src/chart/ChartUtils.ts
@@ -219,7 +219,7 @@ export function replaceDashboardParameters(str, parameters) {
     let param = _.replace(`$`, '').trim();
     let val = parameters?.[param] || null;
     let type = getRecordType(val);
-    let valueRender = type === 'string' ? val : RenderSubValue(val);
+    let valueRender = type === 'string' || type == 'link' ? val : RenderSubValue(val);
     return valueRender;
   };
 
@@ -406,6 +406,9 @@ export const isEmptyObject = (obj: object) => {
  * @returns True if it's an object castable to date
  */
 export function isCastableToNeo4jDate(value: object) {
+  if (value == null || value == undefined) {
+    return false;
+  }
   let keys = Object.keys(value);
   return keys.length == 3 && keys.includes('day') && keys.includes('month') && keys.includes('year');
 }
diff --git a/src/chart/bar/BarChart.tsx b/src/chart/bar/BarChart.tsx
@@ -21,7 +21,7 @@ const NeoBarChart = (props: ChartProps) => {
   const customDimensions = settings.customDimensions ? settings.customDimensions : false;
   const legendWidth = settings.legendWidth ? settings.legendWidth : 128;
   const marginTop = settings.marginTop ? settings.marginTop : 24;
-  const marginBottom = settings.marginBottom ? settings.marginBottom : 60;
+  const marginBottom = settings.marginBottom ? settings.marginBottom : 30;
   const legend = settings.legend ? settings.legend : false;
   const labelRotation = settings.labelRotation != undefined ? settings.labelRotation : 45;
   const barWidth = settings.barWidth ? settings.barWidth : 10;
diff --git a/src/chart/graph/component/GraphChartCanvas.tsx b/src/chart/graph/component/GraphChartCanvas.tsx
@@ -1,10 +1,21 @@
 import React from 'react';
 
-const canvasStyle = { paddingLeft: '10px', position: 'relative', overflow: 'hidden', width: '100%', height: '100%' };
+const canvasStyle = {
+  paddingLeft: '10px',
+  marginBottom: 5,
+  position: 'relative',
+  overflow: 'hidden',
+  width: '100%',
+  height: '100%',
+};
 
 /**
  * Renders the canvas on which the graph visualization is projected.
  */
 export const NeoGraphChartCanvas = ({ children }) => {
-  return <div style={canvasStyle}>{children}</div>;
+  return (
+    <div className='graph-chart-canvas' style={canvasStyle}>
+      {children}
+    </div>
+  );
 };
diff --git a/src/chart/graph/component/GraphChartEditModal.tsx b/src/chart/graph/component/GraphChartEditModal.tsx
@@ -203,7 +203,6 @@ export const GraphChartEditModal = (props: GraphChartEditorVisualizationProps) =
               </tr>
             </tbody>
           </table>
-          <hr />
           <Button
             key={'btnEditProp'}
             style={{ marginBottom: '10px' }}
diff --git a/src/chart/markdown/MarkdownChart.tsx b/src/chart/markdown/MarkdownChart.tsx
@@ -19,7 +19,10 @@ const NeoMarkdownChart = (props: ChartProps) => {
   const modifiedMarkdown = replaceGlobalParameters ? replaceDashboardParameters(markdown, parameters) : markdown;
   // TODO: we should check if the gfm plugin has an impact on the standard security provided by ReactMarkdown
   return (
-    <div style={{ marginTop: '0px', marginLeft: '15px', marginRight: '15px', marginBottom: '0px' }}>
+    <div
+      className='markdown-widget'
+      style={{ marginTop: '0px', marginLeft: '15px', marginRight: '15px', marginBottom: '0px' }}
+    >
       <base target='_blank' /> <ReactMarkdown remarkPLugins={[gfm]} children={modifiedMarkdown} />
     </div>
   );
diff --git a/src/chart/parameter/component/FreeTextParameterSelect.tsx b/src/chart/parameter/component/FreeTextParameterSelect.tsx
@@ -81,7 +81,11 @@ const FreeTextParameterSelectComponent = (props: ParameterSelectProps) => {
         }}
       />
       {manualParameterSave ? <SelectionConfirmationButton onClick={() => manualHandleParametersUpdate()} /> : <></>}
-      {running ? <CircularProgress size={18} style={{ position: 'absolute', right: '20px' }} /> : <></>}
+      {running && !manualParameterSave ? (
+        <CircularProgress size={18} style={{ position: 'absolute', right: '20px' }} />
+      ) : (
+        <></>
+      )}
     </div>
   );
 };
diff --git a/src/chart/table/TableChart.tsx b/src/chart/table/TableChart.tsx
@@ -40,12 +40,17 @@ const fallbackRenderer = (value) => {
 
 function renderAsButtonWrapper(renderer) {
   return function renderAsButton(value) {
+    const outputValue = renderer(value, true);
+    // If there's nothing to be rendered, there's no button needed.
+    if (outputValue == '') {
+      return <></>;
+    }
     return (
       <Button
         style={{ width: '100%', marginLeft: '5px', marginRight: '5px' }}
         variant='contained'
         color='primary'
-      >{`${renderer(value)}`}</Button>
+      >{`${outputValue}`}</Button>
     );
   };
 }
@@ -107,8 +112,7 @@ export const NeoTableChart = (props: ChartProps) => {
     return key != 'id' ? key : `${key} `;
   };
 
-  const actionableFields = actionsRules.map((r) => r.field);
-
+  const actionableFields = actionsRules.filter((r) => r.condition !== 'rowCheck').map((r) => r.field);
   const columns = transposed
     ? [records[0].keys[0]].concat(records.map((record) => record._fields[0]?.toString() || '')).map((key, i) => {
         const uniqueKey = `${String(key)}_${i}`;
@@ -126,7 +130,9 @@ export const NeoTableChart = (props: ChartProps) => {
           actionableFields.includes(key)
         );
       })
-    : records[0].keys.map((key, i) => {
+    : records[0] &&
+      records[0].keys &&
+      records[0].keys.map((key, i) => {
         const value = records[0].get(key);
         if (columnWidthsType == 'Relative (%)') {
           return ApplyColumnType(
diff --git a/src/config/ReportConfig.tsx b/src/config/ReportConfig.tsx
@@ -380,7 +380,7 @@ const _REPORT_TYPES = {
       marginBottom: {
         label: 'Margin Bottom',
         type: SELECTION_TYPES.NUMBER,
-        default: 45,
+        default: 30,
       },
       legendWidth: {
         label: 'Legend Width',
diff --git a/src/dashboard/Dashboard.tsx b/src/dashboard/Dashboard.tsx
@@ -36,7 +36,6 @@ const Dashboard = ({
     );
     setDriver(newDriver);
   }
-
   const content = (
     <Neo4jProvider driver={driver}>
       <NeoDashboardConnectionUpdateHandler
@@ -81,7 +80,8 @@ const Dashboard = ({
                   {/* The main content of the page */}
 
                   <div>
-                    {standaloneSettings.standalonePassword ? (
+                    {standaloneSettings.standalonePassword &&
+                    standaloneSettings.standalonePasswordWarningHidden !== true ? (
                       <div style={{ textAlign: 'center', color: 'red', paddingTop: 60, marginBottom: -50 }}>
                         Warning: NeoDash is running with a plaintext password in config.json.
                       </div>
diff --git a/src/dashboard/DashboardThunks.ts b/src/dashboard/DashboardThunks.ts
@@ -404,7 +404,7 @@ export const loadDashboardFromNeo4jByNameThunk =
           if (records.length == 0) {
             dispatch(
               createNotificationThunk(
-                'Unable to load dashboard.',
+                `Unable to load dashboard "${name}".`,
                 'A dashboard with the provided name could not be found.'
               )
             );
@@ -429,7 +429,7 @@ export const loadDashboardFromNeo4jByNameThunk =
           }
 
           if (records[0].error) {
-            dispatch(createNotificationThunk('Unable to load dashboard.', records[0].error));
+            dispatch(createNotificationThunk(`Unable to load dashboard "${name}".`, records[0].error));
             if (loggingSettings.loggingMode > '1') {
               dispatch(
                 createLogThunk(
diff --git a/src/dashboard/sidebar/DashboardSidebarListItem.tsx b/src/dashboard/sidebar/DashboardSidebarListItem.tsx
diff --git a/src/extensions/actions/ActionsRuleCreationModal.tsx b/src/extensions/actions/ActionsRuleCreationModal.tsx
diff --git a/src/report/ReportRecordProcessing.tsx b/src/report/ReportRecordProcessing.tsx
diff --git a/src/settings/SettingsModal.tsx b/src/settings/SettingsModal.tsx

Original file line number	Diff line number	Diff line change
`@@ -95,7 +95,8 @@`
`95`	`95`	`}`
`96`	`96`
`97`	`97`	`.react-resizable-handle {`
`98`		`- bottom: 1px !important;`
	`98`	`+ bottom: 4px !important;`
	`99`	`+ right: -2px !important;`
`99`	`100`	`opacity: 0.5;`
`100`	`101`	`color: rgb(222, 222, 222);`
`101`	`102`	`}`
`@@ -216,7 +217,7 @@`
`216`	`217`	`}`
`217`	`218`
`218`	`219`	`.card-view .MuiTablePagination-root {`
`219`		`- margin-top: -40px;`
	`220`	`+ margin-top: 0px;`
`220`	`221`
`221`	`222`	`}`
`222`	`223`
`@@ -253,3 +254,7 @@`
`253`	`254`	`display: none;`
`254`	`255`	`}`
`255`	`256`	`/* End Gantt chart workaround */`
	`257`	`+`
	`258`	`+.markdown-widget a {`
	`259`	`+ text-decoration: underline;`
	`260`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -209,7 +209,7 @@ const NeoCard = ({`
`209`	`209`	`if (expanded) {`
`210`	`210`	`return (`
`211`	`211`	`<Dialog open={expanded} aria-labelledby='form-dialog-title' className='dialog-xxl'>`
`212`		`- <Dialog.Content style={{ height: document.documentElement.clientHeight }}>{component}</Dialog.Content>`
	`212`	`+ <Dialog.Content style={{ height: document.documentElement.clientHeight - 200 }}>{component}</Dialog.Content>`
`213`	`213`	`</Dialog>`
`214`	`214`	`);`
`215`	`215`	`}`