Merge pull request #867 from neo4j-labs/develop

Release 2.4.5

Author: mariusconjeaud

.github/workflows/master-deployment.yml

@@ -31,7 +31,7 @@ jobs:
         with:
           build: yarn run build
           start: yarn run dev
-          wait-on: "http://localhost:3000"
+          wait-on: 'http://localhost:3000'
           browser: chrome
   build-s3:
     needs: build-test
@@ -79,7 +79,7 @@ jobs:
           context: .
           file: ./Dockerfile
           push: true
-          tags: ${{ secrets.DOCKER_HUB_LABS_USERNAME }}/neodash:latest,${{ secrets.DOCKER_HUB_LABS_USERNAME }}/neodash:2.4.4
+          tags: ${{ secrets.DOCKER_HUB_LABS_USERNAME }}/neodash:latest,${{ secrets.DOCKER_HUB_LABS_USERNAME }}/neodash:2.4.5
   build-docker-legacy:
     needs: build-test
     runs-on: neodash-runners
@@ -103,7 +103,7 @@ jobs:
           context: .
           file: ./Dockerfile
           push: true
-          tags: ${{ secrets.DOCKER_HUB_USERNAME }}/neodash:latest,${{ secrets.DOCKER_HUB_USERNAME }}/neodash:2.4.4
+          tags: ${{ secrets.DOCKER_HUB_USERNAME }}/neodash:latest,${{ secrets.DOCKER_HUB_USERNAME }}/neodash:2.4.5
   deploy-gallery:
     runs-on: neodash-runners
     strategy:

Dockerfile

@@ -10,6 +10,7 @@ WORKDIR /usr/local/src/neodash
 
 # Copy sources and install/build
 COPY ./package.json /usr/local/src/neodash/package.json
+COPY ./yarn.lock /usr/local/src/neodash/yarn.lock
 
 RUN yarn install
 COPY ./ /usr/local/src/neodash
@@ -43,4 +44,4 @@ USER nginx
 EXPOSE $NGINX_PORT
 
 HEALTHCHECK cmd curl --fail "http://localhost:$NGINX_PORT" || exit 1
-LABEL version="2.4.4"
+LABEL version="2.4.5"

changelog.md

@@ -1,3 +1,15 @@
+## NeoDash 2.4.5
+This is a small release containing a few fixes:
+- Fixed rendering of string arrays inside tables, report titles, and report action buttons [849](https://github.com/neo4j-labs/neodash/pull/849)
+- Allowed text to wrap in tables, preserving the number of rows [852](https://github.com/neo4j-labs/neodash/pull/852)
+- Disabled auto-sorting of Cypher query-based Parameter Select ; use Cypher ORDER BY to control result order [857](https://github.com/neo4j-labs/neodash/pull/857)
+- Updated role selector menu, and made user updates more robust [854](https://github.com/neo4j-labs/neodash/pull/854)
+
+Thanks to all the contributors for this release: 
+- [MariusC](https://github.com/mariusconjeaud),
+- [LiamEdwardsLamarche](https://github.com/LiamEdwardsLamarche),
+- [AleSim94](https://github.com/AleSim94)
+
 ## NeoDash 2.4.4
 This is a hotfix release fixing some breaking issues in the 2.4.3:
 - Fixed number parsing using newer versions of the Neo4j driver. [811](https://github.com/neo4j-labs/neodash/pull/811)

docs/modules/ROOT/pages/developer-guide/deploy-a-build.adoc

@@ -37,7 +37,7 @@ Depending on the webserver type and version, this could be different directory.
 As an example - to copy the files to an nginx webserver using `scp`:
 
 ```bash
-scp neodash-2.4.4 username@host:/usr/share/nginx/html
+scp neodash-2.4.5 username@host:/usr/share/nginx/html
 ```
 
 NeoDash should now be visible by visiting your (sub)domain in the browser.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "neodash",
-  "version": "2.4.4",
+  "version": "2.4.5",
   "description": "NeoDash - Neo4j Dashboard Builder",
   "neo4jDesktop": {
     "apiVersion": "^1.2.0"
@@ -65,6 +65,7 @@
     "d3-scale-chromatic": "^3.0.0",
     "dayjs": "^1.11.7",
     "dom-to-image": "^2.6.0",
+    "dompurify": "^3.1.0",
     "leaflet": "^1.7.1",
     "lodash.debounce": "^4.0.8",
     "lodash.isequal": "^4.5.0",

public/style.css

@@ -125,17 +125,13 @@
   margin-top: -10px;
 }
 
-.MuiDataGrid-virtualScroller {
-  overflow-y: hidden !important;
-}
-
-.MuiDataGrid-panel{
+.MuiDataGrid-panel {
   translate: 0px -152%;
 }
 
 .MuiCard-root {
-  box-shadow: 0 0 #0000,0 0 #0000,var(--tw-shadow) !important;
-  box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow) !important;
+  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow) !important;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
 }
 
 .white-text {
@@ -188,7 +184,6 @@
   text-align: center;
 }
 
-
 .card-view.expanded {
   position: absolute;
   top: 0;
@@ -218,24 +213,23 @@
 
 .card-view .MuiTablePagination-root {
   margin-top: 0px;
-
 }
 
 @keyframes pulse {
-	0% {
-		transform: scale(0.95);
-		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
-	}
+  0% {
+    transform: scale(0.95);
+    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
+  }
 
-	70% {
-		transform: scale(1);
-		box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
-	}
+  70% {
+    transform: scale(1);
+    box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
+  }
 
-	100% {
-		transform: scale(0.95);
-		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
-	}
+  100% {
+    transform: scale(0.95);
+    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
+  }
 }
 
 /* Workaround for Needle not handling menu placement of dropdowns on modals */
@@ -247,14 +241,14 @@
 /* End workaround */
 
 /* Workaround for cleaning the Gantt chart UI */
-.gantt-wrapper > div > div:first-child > div:first-child > div:first-child > div> div:not(:first-child) {
+.gantt-wrapper > div > div:first-child > div:first-child > div:first-child > div > div:not(:first-child) {
   display: none;
 }
-.gantt-wrapper > div > div > div > div> div>  div> div:not(:first-child)  {
+.gantt-wrapper > div > div > div > div > div > div > div:not(:first-child) {
   display: none;
 }
 /* End Gantt chart workaround */
 
 .markdown-widget a {
   text-decoration: underline;
-}
+}

release-notes.md

@@ -1,8 +1,11 @@
-## NeoDash 2.4.4
-This is a hotfix release fixing some breaking issues in the 2.4.3:
-- Fixed number parsing using newer versions of the Neo4j driver. [811](https://github.com/neo4j-labs/neodash/pull/811)
-- Reverted new connection handler for auto-renewed SSO sessions. [815](https://github.com/neo4j-labs/neodash/pull/815)
-- Improved handling of parameters in form extension, resolved local state issues. [813](https://github.com/neo4j-labs/neodash/pull/813)
-- Updated Role management extension to no longer execute queries in parallel, improved UX and error handling [813](https://github.com/neo4j-labs/neodash/pull/813)
+## NeoDash 2.4.5
+This is a small release containing a few fixes:
+- Fixed rendering of string arrays inside tables, report titles, and report action buttons [849](https://github.com/neo4j-labs/neodash/pull/849)
+- Allowed text to wrap in tables, preserving the number of rows [852](https://github.com/neo4j-labs/neodash/pull/852)
+- Disabled auto-sorting of Cypher query-based Parameter Select ; use Cypher ORDER BY to control result order [857](https://github.com/neo4j-labs/neodash/pull/857)
+- Updated role selector menu, and made user updates more robust [854](https://github.com/neo4j-labs/neodash/pull/854)
 
-If you are currently using NeoDash version 2.4.3, we recommend updating as soon as possible.
+Thanks to all the contributors for this release: 
+- [MariusC](https://github.com/mariusconjeaud),
+- [LiamEdwardsLamarche](https://github.com/LiamEdwardsLamarche),
+- [AleSim94](https://github.com/AleSim94)

src/chart/ChartUtils.ts

@@ -218,8 +218,14 @@ export function replaceDashboardParameters(str, parameters) {
     let param = _.replace(`$`, '').trim();
     let val = parameters?.[param] || null;
     let type = getRecordType(val);
-    let valueRender = type === 'string' || type == 'link' ? val : RenderSubValue(val);
-    return valueRender;
+
+    // Arrays weren't playing nicely with RenderSubValue(). Each object would be passed separately and return [oject Object].
+    if (type === 'string' || type == 'link' ) {
+      return val;
+    } else if (type === 'array') {
+      return RenderSubValue(val.join(', '));
+    }
+    return RenderSubValue(val);
   };
 
   let newString = str.replace(rx, parameterElementReplacer).replace(rxSimple, parameterSimpleReplacer);

src/chart/graph/component/GraphEntityInspectionTable.tsx

@@ -2,16 +2,18 @@ import React from 'react';
 import ShowMoreText from 'react-show-more-text';
 import { Checkbox, Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@mui/material';
 import { TextLink } from '@neo4j-ndl/react';
+// import DOMPurify from 'dompurify'; 
 
 export const formatProperty = (property) => {
-  if (property.startsWith('http://') || property.startsWith('https://')) {
+  const str = property?.toString() || '';
+  if (str.startsWith('http://') || str.startsWith('https://')) {
     return (
-      <TextLink externalLink href={property}>
-        {property}
+      <TextLink externalLink href={str}>
+        {str}
       </TextLink>
     );
   }
-  return property;
+  return str; 
 };
 
 /**
@@ -88,7 +90,7 @@ export const GraphEntityInspectionTable = ({
                     {key}
                   </TableCell>
                   <TableCell align={'left'} style={{ color: tableTextColor }}>
-                    <ShowMoreText lines={2}>{formatProperty(entity && entity.properties[key].toString())}</ShowMoreText>
+                    <ShowMoreText lines={2}>{formatProperty(entity?.properties[key])}</ShowMoreText> 
                   </TableCell>
                   {checklistEnabled ? (
                     <TableCell align={'center'}>

src/chart/parameter/ParameterSelectionChart.tsx

@@ -94,6 +94,7 @@ export const NeoParameterSelectionChart = (props: ChartProps) => {
           compatibilityMode={compatibilityMode}
           multiSelector={multiSelector}
           manualParameterSave={manualParameterSave}
+          autoSort={true}
         />
       );
     } else if (type == 'Relationship Property') {
@@ -112,6 +113,7 @@ export const NeoParameterSelectionChart = (props: ChartProps) => {
           compatibilityMode={compatibilityMode}
           multiSelector={multiSelector}
           manualParameterSave={manualParameterSave}
+          autoSort={true}
         />
       );
     } else if (type == 'Date Picker') {
@@ -147,6 +149,7 @@ export const NeoParameterSelectionChart = (props: ChartProps) => {
           compatibilityMode={compatibilityMode}
           multiSelector={multiSelector}
           manualParameterSave={manualParameterSave}
+          autoSort={false}
         />
       );
     }

src/chart/parameter/component/NodePropertyParameterSelect.tsx

@@ -165,12 +165,14 @@ const NodePropertyParameterSelectComponent = (props: ParameterSelectProps) => {
       />
     );
   }
+  let options = extraRecords?.map((r) => r?._fields?.[displayValueRowIndex] || '(no data)');
+  options = props.autoSort ? options.sort() : options;
   return (
     <div className={'n-flex n-flex-row n-flex-wrap n-items-center'}>
       <Autocomplete
         id='autocomplete'
         multiple={multiSelector}
-        options={extraRecords?.map((r) => r?._fields?.[displayValueRowIndex] || '(no data)').sort()}
+        options={options}
         disabled={disabled}
         limitTags={multiSelectLimit}
         style={{
@@ -198,7 +200,8 @@ const NodePropertyParameterSelectComponent = (props: ParameterSelectProps) => {
           if (autoSelectFirstValue && paramValueDisplayLocal == '') {
             debouncedQueryCallback(props.query, { input: '', ...allParameters }, (records) => {
               if (records && records.length > 0 && records[0] && records[0]._fields) {
-                const values = records?.map((r) => r?._fields?.[displayValueRowIndex] || '(no data)').sort();
+                let values = records?.map((r) => r?._fields?.[displayValueRowIndex] || '(no data)');
+                values = props.autoSort ? values.sort() : values;
                 setExtraRecords(records);
                 propagateSelection(undefined, values[0]);
               }

src/chart/parameter/component/ParameterSelect.ts

@@ -62,4 +62,8 @@ export interface ParameterSelectProps {
    * Add the possibility for manual selection confirmation
    */
   manualParameterSave?: boolean;
+  /**
+   * Pass true if results should be sorted automatically
+   */
+  autoSort?: boolean;
 }

src/chart/parameter/component/QueryParameterSelect.tsx

@@ -17,6 +17,7 @@ const QueryParameterSelectComponent = (props: ParameterSelectProps) => {
       allParameters={props.allParameters}
       compatibilityMode={props.compatibilityMode}
       multiSelector={props.multiSelector}
+      autoSort={props.autoSort}
     />
   );
 };

src/chart/table/TableChart.tsx

@@ -50,7 +50,7 @@ function renderAsButtonWrapper(renderer) {
         style={{ width: '100%', marginLeft: '5px', marginRight: '5px' }}
         variant='contained'
         color='primary'
-      >{`${outputValue}`}</Button>
+      >{outputValue}</Button>
     );
   };
 }
@@ -262,7 +262,8 @@ export const NeoTableChart = (props: ChartProps) => {
         <DataGrid
           key={'tableKey'}
           headerHeight={32}
-          rowHeight={tableRowHeight}
+          density={compact ? 'compact' : 'standard'}
+          getRowHeight={() => 'auto'}
           rows={rows}
           columns={columns}
           columnVisibilityModel={columnVisibilityModel}
@@ -305,6 +306,13 @@ export const NeoTableChart = (props: ChartProps) => {
               })
               .join(' ');
           }}
+          sx={{
+            '&.MuiDataGrid-root--densityCompact .MuiDataGrid-cell': { py: '3px' },
+            '&.MuiDataGrid-root--densityCompact .MuiDataGrid-cell:has(button)': { py: '0px' },
+            '&.MuiDataGrid-root--densityStandard .MuiDataGrid-cell': { py: '15px' },
+            '&.MuiDataGrid-root--densityComfortable .MuiDataGrid-cell': { py: '22px' },
+            '&.MuiDataGrid-root .MuiDataGrid-cell': { wordBreak: 'break-word' },
+          }}
         />
       </div>
     </ThemeProvider>

src/extensions/rbac/RBACManagementMenu.tsx

@@ -64,7 +64,7 @@ export const RBACManagementMenu = ({ anchorEl, MenuOpen, handleClose, createNoti
         onClose={handleClose}
         size='small'
       >
-        <MenuItems>
+        <MenuItems className='n-overflow-y-scroll n-h-44'>
           {roles.map((role) => (
             <MenuItem key={role} onClick={() => handleRoleClicked(role)} icon={<UserIconOutline />} title={role} />
           ))}

src/extensions/rbac/RBACUtils.ts

@@ -258,10 +258,11 @@ export function retrieveDatabaseList(driver, setDatabases: React.Dispatch<React.
 export async function updateUsers(driver, currentRole, allUsers, selectedUsers, onSuccess, onFail) {
   // 1. Build the query that removes all users from the role.
   let globalStatus = -1;
+  const escapedAllUsers = allUsers.map((user) => `\`${user}\``).join(',');
   await runCypherQuery(
     driver,
     'system',
-    `REVOKE ROLE ${currentRole} FROM ${allUsers.join(',')}`,
+    `REVOKE ROLE ${currentRole} FROM ${escapedAllUsers}`,
     {},
     1000,
     (status) => {
@@ -277,10 +278,11 @@ export async function updateUsers(driver, currentRole, allUsers, selectedUsers,
     //  TODO: Neo4j is very slow in updating after the previous query, even though it is technically a finished query.
     // We build in an artificial delay...
     if (selectedUsers.length > 0) {
+      const escapedSelectedUsers = selectedUsers.map((user) => `\`${user}\``).join(',');
       await runCypherQuery(
         driver,
         'system',
-        `GRANT ROLE ${currentRole} TO ${selectedUsers.join(',')}`,
+        `GRANT ROLE ${currentRole} TO ${escapedSelectedUsers}`,
         {},
         1000,
         (status) => {

src/modal/AboutModal.tsx

@@ -3,7 +3,7 @@ import { Button, Dialog, TextLink } from '@neo4j-ndl/react';
 import { BookOpenIconOutline, BeakerIconOutline } from '@neo4j-ndl/react/icons';
 import { Section, SectionTitle, SectionContent } from './ModalUtils';
 
-export const version = '2.4.4';
+export const version = '2.4.5';
 
 export const NeoAboutModal = ({ open, handleClose, getDebugState }) => {
   const downloadDebugFile = () => {

src/report/ReportRecordProcessing.tsx

@@ -10,6 +10,7 @@ import {
   valueIsPath,
   valueIsRelationship,
 } from '../chart/ChartUtils';
+// import DOMPurify from 'dompurify';
 
 /**
  * Collects all node labels and node properties in a set of Neo4j records.