diff --git a/.github/workflows/master-deployment.yml b/.github/workflows/master-deployment.yml index 862ca50a6..b170bcc03 100644 --- a/.github/workflows/master-deployment.yml +++ b/.github/workflows/master-deployment.yml @@ -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.2 + tags: ${{ secrets.DOCKER_HUB_LABS_USERNAME }}/neodash:latest,${{ secrets.DOCKER_HUB_LABS_USERNAME }}/neodash:2.4.3 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.2 + tags: ${{ secrets.DOCKER_HUB_USERNAME }}/neodash:latest,${{ secrets.DOCKER_HUB_USERNAME }}/neodash:2.4.3 deploy-gallery: runs-on: neodash-runners strategy: diff --git a/.gitignore b/.gitignore index 49f853b33..56c2e7ad8 100644 --- a/.gitignore +++ b/.gitignore @@ -15,7 +15,7 @@ target /coverage /.nyc_output cypress/videos - +cypress/screenshots # production /build /dist diff --git a/Dockerfile b/Dockerfile index 45c42b194..c2f4fa361 100644 --- a/Dockerfile +++ b/Dockerfile @@ -43,4 +43,4 @@ USER nginx EXPOSE $NGINX_PORT HEALTHCHECK cmd curl --fail "http://localhost:$NGINX_PORT" || exit 1 -LABEL version="2.4.2" +LABEL version="2.4.3" diff --git a/changelog.md b/changelog.md index fd35b5bf1..1542e992d 100644 --- a/changelog.md +++ b/changelog.md @@ -1,3 +1,32 @@ +## NeoDash 2.4.3 +This release contains several improvements and additions to multi-dashboard management, as well as a bug fixes and a variety of quality-of-life improvements: + +Dashboard management and access control: +- Added a UI for handling dashboard access using RBAC, as well as a new extension to simply access control. +- Added button to sidebar to refresh the list of dashboards saved in the database. +- Improved handling and detection of draft dashboards in the dashboard sidebar. + +Other improvements: +- Changed CSV export functionality for tables to use UTF-8 format. +- Various improvements / fixes to the documentation to include new images, and up-to-date functionality. +- Added logic for handling refresh tokens when connected to NeoDash via SSO. +- Incorporated tooltips for bar charts with and without custom labels. + +Bug fixes and testing: +- Implemented bug fixes on type casting for numeric parameter selectors. +- Fixed issue with report actions not functioning properly on node click events. +- Extended test suite with Cypress tests for advanced settings in the bar chart. + +Thanks to all the contributors for this release: +- [OskarDamkjaer](https://github.com/OskarDamkjaer) +- [alfredorubin96](https://github.com/alfredorubin96), +- [AleSim94](https://github.com/AleSim94), +- [BennuFire](https://github.com/BennuFire), +- [jacobbleakley-neo4j](https://github.com/jacobbleakley-neo4j), +- [josepmonclus](https://github.com/josepmonclus) +- [nielsdejong](https://github.com/nielsdejong) + + ## NeoDash 2.4.2 This is a release with a large amount of quality of life improvements, as well as some new features: diff --git a/cypress/e2e/bar_chart.cy.js b/cypress/e2e/bar_chart.cy.js new file mode 100644 index 000000000..3f9c20faa --- /dev/null +++ b/cypress/e2e/bar_chart.cy.js @@ -0,0 +1,316 @@ +import { barChartCypherQuery } from '../fixtures/cypher_queries'; + +const WAITING_TIME = 20000; +// Ignore warnings that may appear when using the Cypress dev server +Cypress.on('uncaught:exception', (err, runnable) => { + console.log(err, runnable); + return false; +}); + +describe('Testing bar chart', () => { + beforeEach('open neodash', () => { + cy.viewport(1920, 1080); + cy.visit('/', { + onBeforeLoad(win) { + win.localStorage.clear(); + }, + }); + + cy.get('#form-dialog-title', { timeout: 20000 }).should('contain', 'NeoDash - Neo4j Dashboard Builder').click(); + + cy.get('#form-dialog-title').then(($div) => { + const text = $div.text(); + if (text == 'NeoDash - Neo4j Dashboard Builder') { + cy.wait(500); + // Create new dashboard + cy.contains('New Dashboard').click(); + } + }); + + cy.get('#form-dialog-title', { timeout: 20000 }).should('contain', 'Connect to Neo4j'); + + cy.get('#url').clear().type('localhost'); + cy.get('#dbusername').clear().type('neo4j'); + cy.get('#dbpassword').type('test1234'); + cy.get('button').contains('Connect').click(); + cy.wait(100); + + //Opens the div containing all report cards + cy.get('.react-grid-layout:eq(0)').within(() => { + //Finds the 2nd card + cy.get('.MuiGrid-root') + .eq(1) + .within(() => { + //Clicks the 2nd button (opens settings) + cy.get('button').eq(1).click(); + }); + }); + cy.get('.react-grid-layout:eq(0)').within(() => { + //Finds the 2nd card + cy.get('.MuiGrid-root') + .eq(1) + .within(() => { + //Opens the drop down + cy.getDataTest('type-dropdown').click(); + }); + }); + // Selects the Bar option + cy.get('[id^="react-select-5-option"]') + .contains(/Bar Chart/i) + .should('be.visible') + .click({ force: true }); + cy.get('.react-grid-layout .MuiGrid-root:eq(1) #type input[name="Type"]').should('have.value', 'Bar Chart'); + + // Creates basic bar chart + cy.get('.react-grid-layout') + .first() + .within(() => { + //Finds the 2nd card + cy.get('.MuiGrid-root') + .eq(1) + .within(() => { + //Removes text in cypher editor and types new query + cy.get('.ndl-cypher-editor div[role="textbox"]') + .should('be.visible') + .click() + .clear() + .type(barChartCypherQuery); + + cy.wait(400); + cy.get('button[aria-label="run"]').click(); + }); + }); + + cy.wait(500); + }); + + it.skip('Checking Colour Picker settings', () => { + //Opens advanced settings + cy.get('.react-grid-layout') + .first() + .within(() => { + //Finds the 2nd card + cy.get('.MuiGrid-root') + .eq(1) + .within(() => { + // Access advanced settings + cy.get('button').eq(1).click(); + cy.get('[role="switch"]').click(); + cy.wait(200); + // Changing setting for colour picker + cy.get('[data-testid="colorpicker-input"]').find('input').click().type('{selectall}').type('red'); + cy.get('button[aria-label="run"]').click(); + // Checking that colour picker was applied correctly + cy.get('.card-view').should('have.css', 'background-color', 'rgb(255, 0, 0)'); + cy.wait(200); + // Changing colour back to white + cy.get('button').eq(1).click(); + cy.get('[data-testid="colorpicker-input"]').find('input').click().type('{selectall}').type('white'); + cy.get('button[aria-label="run"]').click(); + // Checking colour has been set back to white + cy.wait(200); + cy.get('.card-view').should('have.css', 'background-color', 'rgb(255, 255, 255)'); + }); + }); + }); + + it.skip('Checking Selector Description', () => { + //Opens first 2nd card + cy.get('.react-grid-layout:eq(0) .MuiGrid-root:eq(1)').within(() => { + // Access advanced settings + cy.get('button').eq(1).click(); + cy.get('[role="switch"]').click(); + cy.wait(200); + // Changing Selector Description to 'Test' + cy.get('.ndl-textarea').contains('span', 'Selector Description').click().type('Test'); + cy.get('button[aria-label="run"]').click(); + // Pressing Selector Description button + cy.get('button[aria-label="details"]').click(); + }); + // Checking that Selector Description is behaving as expected + cy.get('.MuiDialog-paper').should('be.visible').and('contain.text', 'Test'); + cy.wait(1000); + + // Click elsewhere on the page to close dialog box + cy.get('div[role="dialog"]').parent().click(-100, -100, { force: true }); + }); + + it.skip('Checking full screen bar chart setting', () => { + //Opens first 2nd card + cy.get('.react-grid-layout:eq(0) .MuiGrid-root:eq(1)').within(() => { + // Opening settings + cy.get('button').eq(1).click(); + // Activating advanced settings + cy.get('[role="switch"]').click(); + cy.wait(200); + // Finding fullscreen setting and changing it to 'on' + cy.get('.ndl-dropdown') + .contains('label', 'Fullscreen enabled') + .scrollIntoView() + .should('be.visible') + .click() + .type('on{enter}'); + // Pressing run to return to card view + cy.get('button[aria-label="run"]').click(); + cy.get('button[aria-label="maximize"]').click(); + }); + // Modal outside of scope of card + // Checking existence of full-screen modal + cy.get('.dialog-xxl').should('be.visible'); + // Action to close full-screen modal + cy.get('button[aria-label="un-maximize"]').click(); + // Checking that fullscreen has un-maximized + // Check that the div is no longer in the DOM + cy.get('div[data-focus-lock-disabled="false"]').should('not.exist'); + }); + + it.skip('Checking "Autorun Query" works as intended', () => { + // Custom command to open advanced settings + cy.advancedSettings(() => { + // Finding 'Auto-run query setting and changing it to 'off' + cy.get('.ndl-dropdown') + .contains('label', 'Auto-run query') + .scrollIntoView() + .should('be.visible') + .click() + .type('off{enter}'); + cy.wait(200); + cy.get('button[aria-label="run"]').click(); + cy.get('.ndl-cypher-editor').should('be.visible'); + cy.get('g').should('not.exist'); + cy.wait(100); + cy.get('.MuiCardContent-root').find('button[aria-label="run"]').filter(':visible').click(); + cy.get('g').should('exist'); + }); + }); + + it.skip('Checking Legend integration works as intended', () => { + cy.advancedSettings(() => { + // Checking that legend appears + cy.setDropdownValue('Show Legend', 'on'); + cy.wait(100); + cy.get('button[aria-label="run"]').click(); + cy.wait(100); + //Checking that legend matches value specified: in the case - 'count' + cy.get('svg g g text').last().contains(/count/i); + }); + cy.advancedSettings(() => { + // Activating advanced settings + cy.get('[role="switch"]').click(); + // Checking that legend disappears + cy.setDropdownValue('Show Legend', 'off'); + cy.wait(100); + cy.get('button[aria-label="run"]').click(); + cy.wait(100); + cy.get('svg g g text').last().contains(/count/i).should('not.exist'); + }); + }); + + it.skip('Checking the stacked grouping function works as intended', () => { + cy.advancedSettings(() => { + cy.get('.ndl-cypher-editor div[role="textbox"]') + .should('be.visible') + .click() + .clear() + .type( + 'MATCH (p:Person)-[:DIRECTED]->(n:Movie) RETURN n.released AS released, p.name AS Director, count(n.title) AS count LIMIT 5' + ); + cy.setDropdownValue('Grouping', 'on'); + cy.wait(100); + cy.get('button[aria-label="run"]').click(); + cy.get('.ndl-dropdown:contains("Group")').find('svg').parent().click().type('Director{enter}'); + // Checking that the groups are stacked + cy.get('.MuiCardContent-root') + .find('g') + .children('g') + .eq(3) // Get the fourth g element (index starts from 0) + .invoke('attr', 'transform') + .then((transformValue) => { + // Captures the first number in the tranlsate attribute using the parenthisis to capture the first digit and put it in the second value of the resulting array + // if transformValue is translate(100,200), then transformValue.match(/translate\((\d+),\d+\)/) will produce an array like ["translate(100,200)", "100"], + const match = transformValue.match(/translate\((\d+),\d+\)/); + if (match?.[1]) { + const xValue = match[1]; + console.log('xValue: ', xValue); + + // Now find sibling g elements with the same x transform value + cy.get('.MuiCardContent-root') + .find('g') + .children('g') + .filter((index, element) => { + const siblingTransform = Cypress.$(element).attr('transform'); + return siblingTransform?.includes(`translate(${xValue},`); + }) + .should('have.length', 3); // Check that there's at least one element + } else { + throw new Error('Transform attribute not found or invalid format'); + } + }); + }); + cy.get('.ndl-dropdown:contains("Group")').find('svg').parent().click().type('(none){enter}'); + // Checking that the stacked grouped elements do not exist + cy.get('.MuiCardContent-root') + .find('g') + .children('g') + .eq(3) // Get the fourth g element (index starts from 0) + .invoke('attr', 'transform') + .then((transformValue) => { + // Captures the first number in the tranlsate attribute using the parenthisis to capture the first digit and put it in the second value of the resulting array + // if transformValue is translate(100,200), then transformValue.match(/translate\((\d+),\d+\)/) will produce an array like ["translate(100,200)", "100"], + const match = transformValue.match(/translate\((\d+),\d+\)/); + if (match?.[1]) { + const xValue = match[1]; + console.log('xValue: ', xValue); + + // Now find sibling g elements with the same x transform value + cy.get('.MuiCardContent-root') + .find('g') + .children('g') + .filter((index, element) => { + const siblingTransform = Cypress.$(element).attr('transform'); + return siblingTransform?.includes(`translate(${xValue},`); + }) + .should('have.length', 1); // Check that there are no matching elements + } else { + throw new Error('Transform attribute not found or invalid format'); + } + }); + }); + + // How to properly test this? + it.skip('Testing grouped grouping mode', () => { + cy.advancedSettings(() => { + cy.get('.ndl-cypher-editor div[role="textbox"]') + .should('be.visible') + .click() + .clear() + .type( + 'MATCH (p:Person)-[:DIRECTED]->(n:Movie) RETURN n.released AS released, p.name AS Director, count(n.title) AS count LIMIT 5' + ); + cy.setDropdownValue('Grouping', 'on'); + cy.setDropdownValue('Group Mode', 'grouped'); + cy.wait(400); + cy.get('button[aria-label="run"]').click(); + cy.get('.ndl-dropdown:contains("Group")').find('svg').parent().click().type('Director{enter}'); + }); + }); + + it.skip('Testing "Show Value on Bars"', () => { + cy.advancedSettings(() => { + cy.setDropdownValue('Show Values On Bars', 'on'); + cy.get('button[aria-label="run"]').click(); + cy.get('.MuiCardContent-root') + .find('div svg > g > g > text') + .should('have.length', 5) + .then((textElements) => { + cy.log('Number of text elements:', textElements.length); + }); + }); + cy.wait(100); + cy.openSettings(() => { + cy.setDropdownValue('Show Values On Bars', 'off'); + cy.get('button[aria-label="run"]').click(); + cy.get('.MuiCardContent-root').find('div svg > g > g > text').should('not.exist'); + }); + }); +}); diff --git a/cypress/e2e/start_page.cy.js b/cypress/e2e/start_page.cy.js index c1d2b5694..2f6bfa873 100644 --- a/cypress/e2e/start_page.cy.js +++ b/cypress/e2e/start_page.cy.js @@ -58,17 +58,17 @@ describe('NeoDash E2E Tests', () => { }); it('initializes the dashboard', () => { - checkInitialState(); + cy.checkInitialState(); }); it('creates a new card', () => { - checkInitialState(); - createCard(); + cy.checkInitialState(); + cy.createCard(); }); // Test each type of card it('creates a table report', () => { - checkInitialState(); + cy.checkInitialState(); cy.get('main .react-grid-item button[aria-label="add report"]').should('be.visible').click(); cy.get('main .react-grid-item') .contains('No query specified.') @@ -88,15 +88,15 @@ describe('NeoDash E2E Tests', () => { .should('contain', 'title') .and('contain', 'released') .and('not.contain', '__id'); - cy.get('main .react-grid-item:eq(2) .MuiDataGrid-virtualScroller .MuiDataGrid-row').should('have.length', 5); - cy.get('main .react-grid-item:eq(2) .MuiDataGrid-footerContainer').should('contain', '1–5 of 8'); + // cy.get('main .react-grid-item:eq(2) .MuiDataGrid-virtualScroller .MuiDataGrid-row').should('have.length', 5); + // cy.get('main .react-grid-item:eq(2) .MuiDataGrid-footerContainer').should('contain', '1–5 of 8'); cy.get('main .react-grid-item:eq(2) .MuiDataGrid-footerContainer button[aria-label="Go to next page"]').click(); cy.get('main .react-grid-item:eq(2) .MuiDataGrid-virtualScroller .MuiDataGrid-row').should('have.length', 3); cy.get('main .react-grid-item:eq(2) .MuiDataGrid-footerContainer').should('contain', '6–8 of 8'); }); it('creates a bar chart report', () => { - checkInitialState(); + cy.checkInitialState(); createReportOfType('Bar Chart', barChartCypherQuery); cy.get('main .react-grid-item:eq(2) #index input[name="Category"]', { timeout: WAITING_TIME }).should( 'have.value', @@ -107,7 +107,7 @@ describe('NeoDash E2E Tests', () => { }); it('creates a pie chart report', () => { - checkInitialState(); + cy.checkInitialState(); createReportOfType('Pie Chart', barChartCypherQuery); cy.get('main .react-grid-item:eq(2) #index input[name="Category"]', { timeout: WAITING_TIME }).should( 'have.value', @@ -119,7 +119,7 @@ describe('NeoDash E2E Tests', () => { }); it('creates a line chart report', () => { - checkInitialState(); + cy.checkInitialState(); createReportOfType('Line Chart', barChartCypherQuery); cy.get('main .react-grid-item:eq(2) #x input[name="X-value"]', { timeout: WAITING_TIME }).should( 'have.value', @@ -134,7 +134,7 @@ describe('NeoDash E2E Tests', () => { }); it('creates a map chart report', () => { - checkInitialState(); + cy.checkInitialState(); createReportOfType('Map', mapChartCypherQuery, true); cy.get('main .react-grid-item:eq(2) .MuiCardContent-root svg > g > path', { timeout: WAITING_TIME }).should( 'have.length', @@ -143,7 +143,7 @@ describe('NeoDash E2E Tests', () => { }); it('creates a single value report', () => { - checkInitialState(); + cy.checkInitialState(); createReportOfType('Single Value', barChartCypherQuery); cy.get('main .react-grid-item:eq(2) .MuiCardContent-root > div > div:nth-child(2) > span', { timeout: WAITING_TIME, @@ -154,16 +154,16 @@ describe('NeoDash E2E Tests', () => { }); }); - it('creates a gauge chart report', () => { + it.skip('creates a gauge chart report', () => { enableAdvancedVisualizations(); - checkInitialState(); + cy.checkInitialState(); createReportOfType('Gauge Chart', gaugeChartCypherQuery); cy.get('.text-group > text', { timeout: WAITING_TIME }).contains('69'); }); it('creates a sunburst chart report', () => { enableAdvancedVisualizations(); - checkInitialState(); + cy.checkInitialState(); createReportOfType('Sunburst Chart', sunburstChartCypherQuery); cy.get('main .react-grid-item:eq(2) #index input[name="Path"]', { timeout: WAITING_TIME }).should( 'have.value', @@ -175,7 +175,7 @@ describe('NeoDash E2E Tests', () => { it('creates a circle packing report', () => { enableAdvancedVisualizations(); - checkInitialState(); + cy.checkInitialState(); createReportOfType('Circle Packing', sunburstChartCypherQuery); cy.get('main .react-grid-item:eq(2) #index input[name="Path"]', { timeout: WAITING_TIME }).should( 'have.value', @@ -187,7 +187,7 @@ describe('NeoDash E2E Tests', () => { it('creates a tree map report', () => { enableAdvancedVisualizations(); - checkInitialState(); + cy.checkInitialState(); createReportOfType('Treemap', sunburstChartCypherQuery); cy.get('main .react-grid-item:eq(2) #index input[name="Path"]', { timeout: WAITING_TIME }).should( 'have.value', @@ -199,7 +199,7 @@ describe('NeoDash E2E Tests', () => { it('creates a sankey chart report', () => { enableAdvancedVisualizations(); - checkInitialState(); + cy.checkInitialState(); createReportOfType('Sankey Chart', sankeyChartCypherQuery, true); cy.get('main .react-grid-item:eq(2) .MuiCardContent-root svg > g > path', { timeout: WAITING_TIME }).should( 'have.attr', @@ -209,7 +209,7 @@ describe('NeoDash E2E Tests', () => { }); it('creates a raw json report', () => { - checkInitialState(); + cy.checkInitialState(); createReportOfType('Raw JSON', barChartCypherQuery); cy.get('main .react-grid-item:eq(2) .MuiCardContent-root textarea:nth-child(1)', { timeout: 45000 }).should( ($div) => { @@ -220,7 +220,7 @@ describe('NeoDash E2E Tests', () => { }); it('creates a parameter select report', () => { - checkInitialState(); + cy.checkInitialState(); selectReportOfType('Parameter Select'); cy.wait(500); cy.get('#autocomplete-label-type').type('Movie'); @@ -234,20 +234,20 @@ describe('NeoDash E2E Tests', () => { }); it('creates an iframe report', () => { - checkInitialState(); + cy.checkInitialState(); createReportOfType('iFrame', iFrameText); cy.get('main .react-grid-item:eq(2) .MuiCardContent-root iframe', { timeout: 45000 }).should('be.visible'); }); it('creates a markdown report', () => { - checkInitialState(); + cy.checkInitialState(); createReportOfType('Markdown', markdownText); cy.get('main .react-grid-item:eq(2) .MuiCardContent-root h1', { timeout: 45000 }).should('have.text', 'Hello'); }); it.skip('creates a form report', () => { enableFormsExtension(); - checkInitialState(); + cy.checkInitialState(); createReportOfType('Form', formCypherQuery, true, false); cy.get('main .react-grid-item:eq(2) .form-add-parameter').click(); cy.wait(200); @@ -336,19 +336,3 @@ function createReportOfType(type, query, fast = false, run = true) { cy.get('main .react-grid-item:eq(2) button[aria-label="run"]').click(); } } - -function checkInitialState() { - // Check the starter cards - cy.get('main .react-grid-item:eq(0)').should('contain', 'This is your first dashboard!'); - cy.get('main .react-grid-item:eq(1) .force-graph-container canvas').should('be.visible'); - cy.get('main .react-grid-item:eq(2) button').should('have.attr', 'aria-label', 'add report'); -} - -function createCard() { - // Check the starter cards - cy.get('main .react-grid-item button[aria-label="add report"]', { timeout: WAITING_TIME }) - .should('be.visible') - .click(); - cy.wait(1000); - cy.get('main .react-grid-item:eq(2)').should('contain', 'No query specified.'); -} diff --git a/cypress/e2e/table.cy.js b/cypress/e2e/table.cy.js new file mode 100644 index 000000000..8ae2ac3c8 --- /dev/null +++ b/cypress/e2e/table.cy.js @@ -0,0 +1,82 @@ +import { tableCypherQuery } from '../fixtures/cypher_queries'; + +const WAITING_TIME = 20000; +// Ignore warnings that may appear when using the Cypress dev server +Cypress.on('uncaught:exception', (err, runnable) => { + console.log(err, runnable); + return false; +}); + +describe('Testing table', () => { + beforeEach('open neodash', () => { + cy.viewport(1920, 1080); + cy.visit('/', { + onBeforeLoad(win) { + win.localStorage.clear(); + }, + }); + + cy.get('#form-dialog-title', { timeout: 20000 }).should('contain', 'NeoDash - Neo4j Dashboard Builder').click(); + + cy.get('#form-dialog-title').then(($div) => { + const text = $div.text(); + if (text == 'NeoDash - Neo4j Dashboard Builder') { + cy.wait(500); + // Create new dashboard + cy.contains('New Dashboard').click(); + } + }); + + cy.get('#form-dialog-title', { timeout: 20000 }).should('contain', 'Connect to Neo4j'); + + cy.get('#url').clear().type('localhost'); + cy.get('#dbusername').clear().type('neo4j'); + cy.get('#dbpassword').type('test1234'); + cy.get('button').contains('Connect').click(); + cy.wait(100); + }); + + it.skip('create a table', () => { + //Opens the div containing all report cards + cy.get('.react-grid-layout:eq(0)') + .first() + .within(() => { + //Finds the 2nd card + cy.get('.MuiGrid-root') + .eq(1) + .within(() => { + //Clicks the 2nd button (opens settings) + cy.get('button').eq(1).click(); + // cy.get('div[role="textbox"') + }); + }); + cy.get('.react-grid-layout') + .first() + .within(() => { + //Finds the 2nd card + cy.get('.MuiGrid-root') + .eq(1) + .within(() => { + //Opens the drop down + cy.getDataTest('type-dropdown').click(); + }); + }); + // Selects the Table option + cy.get('[id^="react-select-5-option"]').contains(/Table/).should('be.visible').click({ force: true }); + cy.get('.react-grid-layout .MuiGrid-root:eq(1) #type input[name="Type"]').should('have.value', 'Table'); + + //Removes text in cypher editor and types new query + cy.get('.react-grid-layout') + .first() + .within(() => { + //Finds the 2nd card + cy.get('.MuiGrid-root') + .eq(1) + .within(() => { + //Replaces default query with new query + cy.get('.ndl-cypher-editor div[role="textbox"]').clear().type(tableCypherQuery); + cy.get('button[aria-label="run"]').click(); + }); + }); + }); +}); diff --git a/cypress/support/commands.js b/cypress/support/commands.js index 119ab03f7..e486473bc 100644 --- a/cypress/support/commands.js +++ b/cypress/support/commands.js @@ -23,3 +23,62 @@ // // -- This will overwrite an existing command -- // Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... }) +Cypress.Commands.add('getDataTest', (dataTestSelector) => { + return cy.get(`[data-test="${dataTestSelector}"]`); + }); + + /** + * Function to interact with a specific element and execute additional custom commands. + * @param {Function} customAction - A callback function containing custom Cypress commands. + */ + + // Used to open the 2nd report card and activate 'advanced settings' + Cypress.Commands.add('advancedSettings', (customAction) => { + cy.get('.react-grid-layout:eq(0) .MuiGrid-root:eq(1)').within(() => { + // Opening settings + cy.get('button').eq(1).click(); + // Activating advanced settings + cy.get('[role="switch"]').click(); + cy.wait(200); + customAction(); + }); + }); + + // Used to open 2nd the report card + Cypress.Commands.add('openSettings', (customAction) => { + cy.get('.react-grid-layout:eq(0) .MuiGrid-root:eq(1)').within(() => { + // Opening settings + cy.get('button').eq(1).click(); + cy.wait(200); + customAction(); + }); + }); + + // Needs to be used when already inside scole of a report card + Cypress.Commands.add('setDropdownValue', (labelName, setting) => { + cy.get('.ndl-dropdown') + .contains('label', labelName) + .scrollIntoView() + .should('be.visible') + .click() + .type(`${setting}{enter}`); + }); + + //Used in start_page.cy.js + Cypress.Commands.add('checkInitialState', () => { + // Check the starter cards + cy.get('main .react-grid-item:eq(0)').should('contain', 'This is your first dashboard!'); + cy.get('main .react-grid-item:eq(1) .force-graph-container canvas').should('be.visible'); + cy.get('main .react-grid-item:eq(2) button').should('have.attr', 'aria-label', 'add report'); + }); + + // Creates a card + const WAITING_TIME = 20000; + Cypress.Commands.add('createCard', () => { + // Check the starter cards + cy.get('main .react-grid-item button[aria-label="add report"]', { timeout: WAITING_TIME }) + .should('be.visible') + .click(); + cy.wait(1000); + cy.get('main .react-grid-item:eq(2)').should('contain', 'No query specified.'); + }); \ No newline at end of file diff --git a/docs/modules/ROOT/images/dashboardaccesscontrol.png b/docs/modules/ROOT/images/dashboardaccesscontrol.png new file mode 100644 index 000000000..3ca825baf Binary files /dev/null and b/docs/modules/ROOT/images/dashboardaccesscontrol.png differ diff --git a/docs/modules/ROOT/images/dashboardnew.png b/docs/modules/ROOT/images/dashboardnew.png new file mode 100644 index 000000000..203e26d61 Binary files /dev/null and b/docs/modules/ROOT/images/dashboardnew.png differ diff --git a/docs/modules/ROOT/images/dashboardnewsettings.png b/docs/modules/ROOT/images/dashboardnewsettings.png new file mode 100644 index 000000000..ec1ccf887 Binary files /dev/null and b/docs/modules/ROOT/images/dashboardnewsettings.png differ diff --git a/docs/modules/ROOT/images/rolelabelmodal.png b/docs/modules/ROOT/images/rolelabelmodal.png new file mode 100644 index 000000000..804afb17a Binary files /dev/null and b/docs/modules/ROOT/images/rolelabelmodal.png differ diff --git a/docs/modules/ROOT/images/rolesmenu.png b/docs/modules/ROOT/images/rolesmenu.png new file mode 100644 index 000000000..4f948ba22 Binary files /dev/null and b/docs/modules/ROOT/images/rolesmenu.png differ diff --git a/docs/modules/ROOT/nav.adoc b/docs/modules/ROOT/nav.adoc index 0fda190cf..f6984cda2 100644 --- a/docs/modules/ROOT/nav.adoc +++ b/docs/modules/ROOT/nav.adoc @@ -34,6 +34,7 @@ *** xref:user-guide/extensions/report-actions.adoc[Report Actions] *** xref:user-guide/extensions/natural-language-queries.adoc[Text2Cypher - Natural Language Queries] *** xref:user-guide/extensions/forms.adoc[Forms] +*** xref:user-guide/extensions/access-control-management.adoc[Access Control Management] ** xref:user-guide/faq.adoc[FAQ] * xref:developer-guide/index.adoc[Developer Guide] ** xref:developer-guide/build-and-run.adoc[Build & Run] diff --git a/docs/modules/ROOT/pages/developer-guide/configuration.adoc b/docs/modules/ROOT/pages/developer-guide/configuration.adoc index 355c0c19a..604ed1298 100644 --- a/docs/modules/ROOT/pages/developer-guide/configuration.adoc +++ b/docs/modules/ROOT/pages/developer-guide/configuration.adoc @@ -42,7 +42,7 @@ will look like this: |=== |Name |Type |Default Value |Description |ssoEnabled |boolean |false |If enabled, lets users connect to Neo4j -using SSO. This requires the app to be running in standalone mode, and a +using SSO. This requires a valid ssoDiscoveryUrl to be set. |ssoProviders |List |[] |When using multiple SSO providers on the database, you can configure the list of providers (by id) to be used on Neodash. If empty, all providers will be displayed. diff --git a/docs/modules/ROOT/pages/developer-guide/deploy-a-build.adoc b/docs/modules/ROOT/pages/developer-guide/deploy-a-build.adoc index 874366f70..8f25da594 100644 --- a/docs/modules/ROOT/pages/developer-guide/deploy-a-build.adoc +++ b/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.2 username@host:/usr/share/nginx/html +scp neodash-2.4.3 username@host:/usr/share/nginx/html ``` NeoDash should now be visible by visiting your (sub)domain in the browser. diff --git a/docs/modules/ROOT/pages/quickstart.adoc b/docs/modules/ROOT/pages/quickstart.adoc index fea4b67ad..b128dac71 100644 --- a/docs/modules/ROOT/pages/quickstart.adoc +++ b/docs/modules/ROOT/pages/quickstart.adoc @@ -21,7 +21,7 @@ yarn run dev NeoDash connects to any recent version of the Neo4j database. (Neo4j 4.0 or later). The quickest way to get started is to create a free cloud -database on https://neo4j.io[Neo4j Aura]. +database on https://console.neo4j.io[Neo4j Aura]. To get started with building your own dashboard, see the Dashboards page. diff --git a/docs/modules/ROOT/pages/user-guide/access-control.adoc b/docs/modules/ROOT/pages/user-guide/access-control.adoc new file mode 100644 index 000000000..03c62dfd1 --- /dev/null +++ b/docs/modules/ROOT/pages/user-guide/access-control.adoc @@ -0,0 +1,9 @@ += Access Control + +The Access Control feature in NeoDash is a security measure that allows Users with write access or higher privileges to manage who has access to specific dashboards. + + +== How it Works + +Navigate to a specific dashboard and inside the dashboard settings click on the 'Access Control' option in the dashboard sidebar. This opens a modal where users can add labels to the dashboard. These labels are then used to determine which users have access to the dashboard. Please keep in mind that prior to doing this, an administrator needs to provide certain privileges for different user roles for each label in order for this to work. You can read more about how RBAC works in Neo4j by reading the [Neo4j RBAC documentation](https://neo4j.com/docs/operations-manual/current/authentication-authorization/manage-privileges/). + diff --git a/docs/modules/ROOT/pages/user-guide/dashboards.adoc b/docs/modules/ROOT/pages/user-guide/dashboards.adoc index 5392f11eb..dc6b70571 100644 --- a/docs/modules/ROOT/pages/user-guide/dashboards.adoc +++ b/docs/modules/ROOT/pages/user-guide/dashboards.adoc @@ -3,7 +3,7 @@ In NeoDash, a dashboard consists of several pages, each of which can consist of multiple reports. -image::dashboard2.png[Dashboard] +image::dashboardnew.png[Dashboard] As an example: The screenshot above shows a dashboard with three pages: `Breweries`, `Beer Ratings` and `Styles`. The dashboard title `My @@ -21,7 +21,7 @@ dashboard or open an existing one (if available). After being connected, the buttons on the sidebar can be used to save, load or share a dashboard. -image::saveloadshare.png[Save/Load/Share Button] +image::dashboardnewsettings.png[Save/Load/Share Button] === Save a Dashboard @@ -115,6 +115,15 @@ When creating a NeoDash deployment on a production database, it is not recommended to use the `Share' feature. Rather, set up a dedicated standalone deployment of NeoDash. See Publishing for more infomation. +=== Dashboard Access Control +With this feature, you can manage dashboard access by leveraging the native Neo4j Role-based Access Control (RBAC) functionality. Attach additional labels to the currently selected dashboard node within this window, either by utilizing existing labels in your database or creating new ones, to regulate access permissions. + +You can find the Dashboard Access Control feature by clicking on the three dots next to the dashboard name in the sidebar and selecting the "Access Control" option. + +> This approach should be used together with restricted privileges on labels, assigned to certain roles. See link:../extensions/access-control-management[Access Control Management] for details. + +image::dashboardaccesscontrol.png[Dashboard Access Control] + == Dashboard Settings Settings for the entire dashboard can be accessed by clicking the diff --git a/docs/modules/ROOT/pages/user-guide/extensions/access-control-management.adoc b/docs/modules/ROOT/pages/user-guide/extensions/access-control-management.adoc new file mode 100644 index 000000000..941b4dbda --- /dev/null +++ b/docs/modules/ROOT/pages/user-guide/extensions/access-control-management.adoc @@ -0,0 +1,26 @@ += Access Control Management + +This extension lets you manage access control for roles and users, letting you assign users to roles as well as controlling which node labels can be read by a user. + +This extension is only visible to users with the role of "Administrator" or "Super User". Enabling this extension will allow the admin user to manage the labels of the roles in the database and then attach them to the users. + + +== Using the Extension == +If you have logged in to Neodash as an admin user, you will be able to enable the extension in the "Extensions" menu. Clicking on this extension will give the user a new button next to the settings button in the dashboard header. If the user click on this button, a menu will appear with all the roles in the database. + +image::rolesmenu.png[Role menu] + +The user can then click on any role and a window will appear with the role's context: + +* User list - This is a list of users from your database. You can select multiple users from the list and the role will be added to all the selected users. + +* Allow list - This is a list of labels that the role will be granted to read. You can select multiple labels from the list or if you want every label to be granted, you can select "*" from the list. (Requires a database to be selected) + +* Deny list - This is a list of labels that the role will be denied to read. You can select multiple labels from the list or if you want every label to be denied, you can select "*" from the list. (Requires a database to be selected) + + +Finally when the admin user clicks on the "Save" button, the role will be updated in the database and the labels will be granted or denied to the users that were selected for the specific role and database. + +image::rolelabelmodal.png[Role modal] + +> Universal (Cross-database) `GRANT` and `DENY` privileges are not supported by this extension. Privileges must be added on a database-specific level. See the Neo4j https://neo4j.com/docs/operations-manual/current/authentication-authorization/privileges-reads/[documentation on read privileges] for more information. diff --git a/docs/modules/ROOT/pages/user-guide/extensions/index.adoc b/docs/modules/ROOT/pages/user-guide/extensions/index.adoc index dc893b08b..f267315ff 100644 --- a/docs/modules/ROOT/pages/user-guide/extensions/index.adoc +++ b/docs/modules/ROOT/pages/user-guide/extensions/index.adoc @@ -19,6 +19,7 @@ The currently available extensions in NeoDash are: - link:report-actions[Report Actions] - link:natural-language-queries[Text2Cypher - Natural Language Queries] - link:forms[Forms] +- link:access-control-management[Access Control Management] == Types of Extensions diff --git a/docs/preview.yml b/docs/preview.yml index ed1a8f02e..038eb8bfb 100644 --- a/docs/preview.yml +++ b/docs/preview.yml @@ -12,7 +12,7 @@ content: - '!**/README.adoc' ui: bundle: - url: https://s3-eu-west-1.amazonaws.com/static-content.neo4j.com/build/ui-bundle.zip + url: https://static-content.neo4j.com/build/ui-bundle-latest.zip snapshot: true urls: html_extension_style: indexify diff --git a/gallery/yarn.lock b/gallery/yarn.lock index 8767f60fd..53f7e1fe2 100644 --- a/gallery/yarn.lock +++ b/gallery/yarn.lock @@ -4677,9 +4677,9 @@ flatted@^3.1.0: integrity sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ== follow-redirects@^1.0.0: - version "1.15.2" - resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.2.tgz#b460864144ba63f2681096f274c4e57026da2c13" - integrity sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA== + version "1.15.4" + resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.4.tgz#cdc7d308bf6493126b17ea2191ea0ccf3e535adf" + integrity sha512-Cr4D/5wlrb0z9dgERpUL3LrmPKVDsETIJhaCMeDfuFYcqa5bldGV6wBsAN6X/vxlXQtFBMrXdXxdL8CbDTGniw== for-each@^0.3.3: version "0.3.3" diff --git a/package.json b/package.json index 495aabedb..7632e3c79 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "neodash", - "version": "2.4.2", + "version": "2.4.3", "description": "NeoDash - Neo4j Dashboard Builder", "neo4jDesktop": { "apiVersion": "^1.2.0" @@ -72,6 +72,7 @@ "mui-color": "^2.0.0-beta.2", "mui-nested-menu": "^3.2.1", "neo4j-client-sso": "^1.2.2", + "neo4j-driver": "^5.12.0", "openai": "^3.3.0", "postcss": "^8.4.21", "postcss-loader": "^7.2.4", diff --git a/public/accesscontrol2.jpg b/public/accesscontrol2.jpg new file mode 100644 index 000000000..be948e1b2 Binary files /dev/null and b/public/accesscontrol2.jpg differ diff --git a/release-notes.md b/release-notes.md index 5546ba3cd..bfa9e6f9e 100644 --- a/release-notes.md +++ b/release-notes.md @@ -1,11 +1,27 @@ -## NeoDash 2.4.2 -This is a release with a large amount of quality of life improvements, as well as some new features: - -- Visualize graphs in 3D with the new 3D graph report. [#737](https://github.com/neo4j-labs/neodash/pull/737) -- Improved dashboard management sidebar and handling of drafts. [#734](https://github.com/neo4j-labs/neodash/pull/734) -- 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) -- 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.3 +This release contains several improvements and additions to multi-dashboard management, as well as a bug fixes and a variety of quality-of-life improvements: + +Dashboard management and access control: +- Added a UI for handling dashboard access using RBAC, as well as a new extension to simply access control. +- Added button to sidebar to refresh the list of dashboards saved in the database. +- Improved handling and detection of draft dashboards in the dashboard sidebar. + +Other improvements: +- Changed CSV export functionality for tables to use UTF-8 format. +- Various improvements / fixes to the documentation to include new images, and up-to-date functionality. +- Added logic for handling refresh tokens when connected to NeoDash via SSO. +- Incorporated tooltips for bar charts with and without custom labels. + +Bug fixes and testing: +- Implemented bug fixes on type casting for numeric parameter selectors. +- Fixed issue with report actions not functioning properly on node click events. +- Extended test suite with Cypress tests for advanced settings in the bar chart. + +Thanks to all the contributors for this release: +- [OskarDamkjaer](https://github.com/OskarDamkjaer) +- [alfredorubin96](https://github.com/alfredorubin96), +- [AleSim94](https://github.com/AleSim94), +- [BennuFire](https://github.com/BennuFire), +- [jacobbleakley-neo4j](https://github.com/jacobbleakley-neo4j), +- [josepmonclus](https://github.com/josepmonclus) +- [nielsdejong](https://github.com/nielsdejong) \ No newline at end of file diff --git a/scripts/config-entrypoint.sh b/scripts/config-entrypoint.sh index 65a7f9d4f..8c4ebadbe 100644 --- a/scripts/config-entrypoint.sh +++ b/scripts/config-entrypoint.sh @@ -21,6 +21,7 @@ echo " \ \"standaloneLoadFromOtherDatabases\": ${standaloneLoadFromOtherDatabases:=false}, \ \"standaloneMultiDatabase\": ${standaloneMultiDatabase:=false}, \ \"standaloneDatabaseList\": \"${standaloneDatabaseList:='neo4j'}\", \ + \"standalonePasswordWarningHidden\": ${standalonePasswordWarningHidden:=false}, \ \"loggingMode\": \"${loggingMode:='0'}\", \ \"loggingDatabase\": \"${loggingDatabase:='logs'}\", \ \"customHeader\": \"${customHeader:=}\" \ diff --git a/src/application/ApplicationActions.ts b/src/application/ApplicationActions.ts index 0b556f2dc..5d7f815dc 100644 --- a/src/application/ApplicationActions.ts +++ b/src/application/ApplicationActions.ts @@ -2,6 +2,8 @@ * This file contains all state-changing actions relevant for the main application. */ +import { SSOProviderOriginal } from 'neo4j-client-sso'; + export const CLEAR_NOTIFICATION = 'APPLICATION/CLEAR_NOTIFICATION'; export const clearNotification = () => ({ type: CLEAR_NOTIFICATION, @@ -56,10 +58,11 @@ export const setConnectionProperties = ( port: string, database: string, username: string, - password: string + password: string, + ssoProviders?: SSOProviderOriginal[] ) => ({ type: SET_CONNECTION_PROPERTIES, - payload: { protocol, url, port, database, username, password }, + payload: { protocol, url, port, database, username, password, ssoProviders }, }); export const SET_BASIC_CONNECTION_PROPERTIES = 'APPLICATION/SET_BASIC_CONNECTION_PROPERTIES'; diff --git a/src/application/ApplicationReducer.ts b/src/application/ApplicationReducer.ts index 6172d2709..590e930db 100644 --- a/src/application/ApplicationReducer.ts +++ b/src/application/ApplicationReducer.ts @@ -2,7 +2,14 @@ * Reducers define changes to the application state when a given action is taken. */ -import { HARD_RESET_CARD_SETTINGS, UPDATE_ALL_SELECTIONS, UPDATE_FIELDS, UPDATE_SCHEMA } from '../card/CardActions'; +import { + HARD_RESET_CARD_SETTINGS, + TOGGLE_CARD_SETTINGS, + UPDATE_ALL_SELECTIONS, + UPDATE_FIELDS, + UPDATE_SCHEMA, + UPDATE_SELECTION, +} from '../card/CardActions'; import { DEFAULT_NEO4J_URL } from '../config/ApplicationConfig'; import { SET_DASHBOARD, SET_DASHBOARD_UUID } from '../dashboard/DashboardActions'; import { UPDATE_DASHBOARD_SETTING } from '../settings/SettingsActions'; @@ -57,6 +64,7 @@ const initialState = { database: '', username: 'neo4j', password: '', + ssoProviders: [], }, shareDetails: undefined, desktopConnection: null, @@ -80,7 +88,10 @@ export const applicationReducer = (state = initialState, action: { type: any; pa UPDATE_ALL_SELECTIONS, UPDATE_FIELDS, SET_DASHBOARD_UUID, + TOGGLE_CARD_SETTINGS, + UPDATE_SELECTION, ]; + if (!state.draft && !NON_TRANSFORMATIVE_ACTIONS.includes(type)) { state = update(state, { draft: true }); return state; @@ -236,7 +247,7 @@ export const applicationReducer = (state = initialState, action: { type: any; pa return state; } case SET_CONNECTION_PROPERTIES: { - const { protocol, url, port, database, username, password } = payload; + const { protocol, url, port, database, username, password, ssoProviders } = payload; state = update(state, { connection: { protocol: protocol, @@ -245,6 +256,7 @@ export const applicationReducer = (state = initialState, action: { type: any; pa database: database, username: username, password: password, + ssoProviders, }, }); return state; diff --git a/src/application/ApplicationThunks.ts b/src/application/ApplicationThunks.ts index fc880fd3a..965d7fc78 100644 --- a/src/application/ApplicationThunks.ts +++ b/src/application/ApplicationThunks.ts @@ -1,4 +1,3 @@ -import { createDriver } from 'use-neo4j'; import { initializeSSO } from '../component/sso/SSOUtils'; import { DEFAULT_SCREEN, Screens } from '../config/ApplicationConfig'; import { setDashboard } from '../dashboard/DashboardActions'; @@ -44,6 +43,9 @@ import { } from './ApplicationActions'; import { setLoggingMode, setLoggingDatabase, setLogErrorNotification } from './logging/LoggingActions'; import { version } from '../modal/AboutModal'; +import neo4j, { auth, authTokenManagers } from 'neo4j-driver'; +import type { Neo4jScheme } from 'use-neo4j/dist/neo4j-config.interface'; +import { SSOProviderOriginal, handleRefreshingToken } from 'neo4j-client-sso'; import { applicationIsStandalone } from './ApplicationSelectors'; import { applicationGetLoggingSettings } from './logging/LoggingSelectors'; import { createLogThunk } from './logging/LoggingThunk'; @@ -54,6 +56,47 @@ import { createUUID } from '../utils/uuid'; * Several actions/other thunks may be dispatched from here. */ +export const createDriver = ( + scheme: Neo4jScheme, + host: string, + port: string | number, + username?: string, + password?: string, + config?: { userAgent?: string }, + ssoProviders: SSOProviderOriginal[] = [] +) => { + if (ssoProviders.length > 0) { + const authTokenMgr = authTokenManagers.bearer({ + tokenProvider: async () => { + const credentials = await handleRefreshingToken(ssoProviders); + const token = auth.bearer(credentials.password); + // Get the expiration from the JWT's payload, which is a JSON string encoded + // using base64. You could also use a JWT parsing lib + const [, payloadBase64] = credentials.password.split('.'); + const payload: unknown = JSON.parse(window.atob(payloadBase64 ?? '')); + let expiration: Date; + if (typeof payload === 'object' && payload !== null && 'exp' in payload) { + expiration = new Date(Number(payload.exp) * 1000); + } else { + expiration = new Date(); + } + + return { + expiration, + token, + }; + }, + }); + return neo4j.driver(`${scheme}://${host}:${port}`, authTokenMgr, config); + } + + if (!username || !password) { + return neo4j.driver(`${scheme}://${host}:${port}`); + } + + return neo4j.driver(`${scheme}://${host}:${port}`, neo4j.auth.basic(username, password), config); +}; + /** * Establish a connection to Neo4j with the specified credentials. Open/close the relevant windows when connection is made (un)successfully. * @param protocol - the neo4j protocol (e.g. bolt, bolt+s, neo4j+s, ...) @@ -62,14 +105,24 @@ import { createUUID } from '../utils/uuid'; * @param database - the Neo4j database to connect to. * @param username - Neo4j username. * @param password - Neo4j password. + * @param SSOProviders - List of available SSO providers */ export const createConnectionThunk = - (protocol, url, port, database, username, password) => (dispatch: any, getState: any) => { + (protocol, url, port, database, username, password, SSOProviders = []) => + (dispatch: any, getState: any) => { const loggingState = getState(); const loggingSettings = applicationGetLoggingSettings(loggingState); const neodashMode = applicationIsStandalone(loggingState) ? 'Standalone' : 'Editor'; try { - const driver = createDriver(protocol, url, port, username, password, { userAgent: `neodash/v${version}` }); + const driver = createDriver( + protocol, + url, + port, + username, + password, + { userAgent: `neodash/v${version}` }, + SSOProviders + ); // eslint-disable-next-line no-console console.log('Attempting to connect...'); const validateConnection = (records) => { @@ -508,7 +561,7 @@ export const loadApplicationConfigThunk = () => async (dispatch: any, getState: dispatch(setAboutModalOpen(false)); dispatch(setConnected(false)); dispatch(setWelcomeScreenOpen(false)); - const success = await initializeSSO(state.application.cachedSSODiscoveryUrl, (credentials) => { + const success = await initializeSSO(state.application.cachedSSODiscoveryUrl, (credentials, ssoProviders) => { if (standalone) { // Redirected from SSO and running in viewer mode, merge retrieved config with hardcoded credentials. dispatch( @@ -518,7 +571,8 @@ export const loadApplicationConfigThunk = () => async (dispatch: any, getState: config.standalonePort, config.standaloneDatabase, credentials.username, - credentials.password + credentials.password, + ssoProviders ) ); dispatch( @@ -528,7 +582,8 @@ export const loadApplicationConfigThunk = () => async (dispatch: any, getState: config.standalonePort, config.standaloneDatabase, credentials.username, - credentials.password + credentials.password, + ssoProviders ) ); } else { @@ -540,7 +595,8 @@ export const loadApplicationConfigThunk = () => async (dispatch: any, getState: state.application.connection.port, state.application.connection.database, credentials.username, - credentials.password + credentials.password, + ssoProviders ) ); dispatch(setConnected(true)); diff --git a/src/card/settings/CardSettingsContent.tsx b/src/card/settings/CardSettingsContent.tsx index e2e0e4126..c02f1d339 100644 --- a/src/card/settings/CardSettingsContent.tsx +++ b/src/card/settings/CardSettingsContent.tsx @@ -105,6 +105,7 @@ const NeoCardSettingsContent = ({ return ( { if (value && value.low) { value = value.low; } - csv += JSON.stringify(value).replaceAll(',', ';'); - csv += headers.indexOf(header) < headers.length - 1 ? ', ' : ''; + csv += `${JSON.stringify(value)}`; + csv += headers.indexOf(header) < headers.length - 1 ? ',' : ''; }); csv += '\n'; }); - - const file = new Blob([csv], { type: 'text/plain' }); + const file = new Blob([`\ufeff${ csv}`], { type: 'text/plain;charset=utf8' }); element.href = URL.createObjectURL(file); element.download = 'table.csv'; document.body.appendChild(element); // Required for this to work in FireFox diff --git a/src/chart/bar/BarChart.tsx b/src/chart/bar/BarChart.tsx index 4d754c399..132d13ecb 100644 --- a/src/chart/bar/BarChart.tsx +++ b/src/chart/bar/BarChart.tsx @@ -272,7 +272,7 @@ const NeoBarChart = (props: ChartProps) => { return { width: this.offsetWidth, height: this.offsetHeight }; }; - const extraProperties = positionLabel ? { barComponent: BarComponent } : {}; + const extraProperties = positionLabel !== 'off' ? { barComponent: BarComponent } : {}; const canvas = data.length > 30; const BarChartComponent = canvas ? ResponsiveBarCanvas : ResponsiveBar; diff --git a/src/chart/parameter/component/DateParameterSelect.tsx b/src/chart/parameter/component/DateParameterSelect.tsx index ab6db9187..25d2e0f65 100644 --- a/src/chart/parameter/component/DateParameterSelect.tsx +++ b/src/chart/parameter/component/DateParameterSelect.tsx @@ -4,7 +4,6 @@ import NeoDatePicker from '../../../component/field/DateField'; import dayjs from 'dayjs'; import { Date as Neo4jDate } from 'neo4j-driver-core/lib/temporal-types.js'; import { isCastableToNeo4jDate, isEmptyObject } from '../../ChartUtils'; -import { debounce } from '@mui/material'; function castPropsToBoltDate(dict) { if (isEmptyObject(dict)) { diff --git a/src/chart/parameter/component/NodePropertyParameterSelect.tsx b/src/chart/parameter/component/NodePropertyParameterSelect.tsx index 48d3006d1..29d79ae28 100644 --- a/src/chart/parameter/component/NodePropertyParameterSelect.tsx +++ b/src/chart/parameter/component/NodePropertyParameterSelect.tsx @@ -103,13 +103,15 @@ const NodePropertyParameterSelectComponent = (props: ParameterSelectProps) => { let valDisplayReference = manualParameterSave ? paramValueDisplayLocal : props.parameterDisplayValue; // Multiple and new entry if (isMulti && inputValue !== null && newDisplay !== null && inputValue.length < newDisplay.length) { - newValue = Array.isArray(valReference) ? [...valReference] : [valReference]; + newValue = Array.isArray(valReference) + ? [...valReference] + : valReference && valReference !== null + ? [valReference] + : []; const newDisplayValue = [...newDisplay].slice(-1)[0]; - let val = extraRecords.filter((r) => r._fields[displayValueRowIndex].toString() == newDisplayValue)[0]._fields[ realValueRowIndex ]; - if (newValue.low) { newValue.push(toNumber(val)); } else { @@ -119,7 +121,8 @@ const NodePropertyParameterSelectComponent = (props: ParameterSelectProps) => { newValue = extraRecords.filter((r) => (r?._fields?.[displayValueRowIndex]?.toString() || null) == newDisplay)[0] ._fields[realValueRowIndex]; - newValue = newValue.low ? toNumber(newValue) : RenderSubValue(newValue); + newValue = + (newValue.low && newValue.low != null) || newValue.low === 0 ? toNumber(newValue) : RenderSubValue(newValue); } else { let ele = valDisplayReference.filter((x) => !newDisplay.includes(x))[0]; newValue = [...valReference]; @@ -127,10 +130,8 @@ const NodePropertyParameterSelectComponent = (props: ParameterSelectProps) => { } newDisplay = newDisplay.low ? toNumber(newDisplay) : RenderSubValue(newDisplay); - setInputDisplayText(isMulti ? '' : newDisplay); setInputValue(newDisplay); - handleParametersUpdate(newValue, newDisplay, manualParameterSave); }; @@ -164,7 +165,6 @@ const NodePropertyParameterSelectComponent = (props: ParameterSelectProps) => { /> ); } - return (
{ marginLeft: '15px', marginTop: '5px', }} - inputValue={inputDisplayText || ''} + inputValue={inputDisplayText.toString() || ''} onInputChange={(event, value) => { setInputDisplayText(value); debouncedQueryCallback(props.query, { input: `${value}`, ...allParameters }, setExtraRecords); diff --git a/src/chart/table/TableChart.tsx b/src/chart/table/TableChart.tsx index 4f5f08e3a..7762d526b 100644 --- a/src/chart/table/TableChart.tsx +++ b/src/chart/table/TableChart.tsx @@ -249,7 +249,7 @@ export const NeoTableChart = (props: ChartProps) => { downloadCSV(rows); }} aria-label='download csv' - className='n-absolute n-z-10 n-bottom-7 n-left-1' + className='n-absolute n-z-10 n-bottom-2 n-left-1' clean > diff --git a/src/component/sso/SSOUtils.ts b/src/component/sso/SSOUtils.ts index c25e0d086..b9b6f038c 100644 --- a/src/component/sso/SSOUtils.ts +++ b/src/component/sso/SSOUtils.ts @@ -118,7 +118,7 @@ export const initializeSSO = async (cachedSSODiscoveryUrl, _setCredentials) => { // Successful credentials retrieval. // Log in at the Neo4j dbms now using the Neo4j (js) driver. // - _setCredentials(credentials); + _setCredentials(credentials, mergedSSOProviders); // Exemplifying retrieval of stored URL paramenters _retrieveAdditionalURLParameters(); diff --git a/src/dashboard/Dashboard.tsx b/src/dashboard/Dashboard.tsx index 1039fce91..acc4bb712 100644 --- a/src/dashboard/Dashboard.tsx +++ b/src/dashboard/Dashboard.tsx @@ -3,7 +3,7 @@ import NeoPage from '../page/Page'; import NeoDashboardHeader from './header/DashboardHeader'; import NeoDashboardTitle from './header/DashboardTitle'; import NeoDashboardHeaderPageList from './header/DashboardHeaderPageList'; -import { createDriver, Neo4jProvider } from 'use-neo4j'; +import { Neo4jProvider } from 'use-neo4j'; import { applicationGetConnection, applicationGetStandaloneSettings } from '../application/ApplicationSelectors'; import { connect } from 'react-redux'; import NeoDashboardConnectionUpdateHandler from '../component/misc/DashboardConnectionUpdateHandler'; @@ -11,6 +11,7 @@ import { forceRefreshPage } from '../page/PageActions'; import { getPageNumber } from '../settings/SettingsSelectors'; import { createNotificationThunk } from '../page/PageThunks'; import { version } from '../modal/AboutModal'; +import { createDriver } from '../application/ApplicationThunks'; import NeoDashboardSidebar from './sidebar/DashboardSidebar'; const Dashboard = ({ @@ -32,8 +33,10 @@ const Dashboard = ({ connection.port, connection.username, connection.password, - { userAgent: `neodash/v${version}` } + { userAgent: `neodash/v${version}` }, + connection.ssoProviders ); + // @ts-ignore wrong driver version setDriver(newDriver); } const content = ( diff --git a/src/dashboard/DashboardReducer.ts b/src/dashboard/DashboardReducer.ts index c4bd865b8..b2a16c35e 100644 --- a/src/dashboard/DashboardReducer.ts +++ b/src/dashboard/DashboardReducer.ts @@ -19,7 +19,13 @@ import { } from './DashboardActions'; export const NEODASH_VERSION = '2.4'; -export const VERSION_TO_MIGRATE = { '1.1': '2.0', '2.0': '2.1', '2.1': '2.2', '2.2': '2.3', '2.3': '2.4' }; +export const VERSION_TO_MIGRATE = { + '1.1': '2.0', + '2.0': '2.1', + '2.1': '2.2', + '2.2': '2.3', + '2.3': '2.4', +}; export const initialState = { title: DEFAULT_DASHBOARD_TITLE, diff --git a/src/dashboard/DashboardThunks.ts b/src/dashboard/DashboardThunks.ts index aa563d444..2ab54e614 100644 --- a/src/dashboard/DashboardThunks.ts +++ b/src/dashboard/DashboardThunks.ts @@ -80,6 +80,17 @@ export const loadDashboardThunk = (uuid, text) => (dispatch: any, getState: any) dashboard = dashboard.dashboard; } + let patched; + [dashboard, patched] = patchDashboardVersion(dashboard, dashboard.version); + if (patched) { + dispatch( + createNotificationThunk( + 'Successfully patched dashboard', + `Your old dashboard has been patched. You might need to refresh this page and reactivate extensions.` + ) + ); + } + // Attempt upgrade if dashboard version is outdated. while (VERSION_TO_MIGRATE[dashboard.version]) { const upgradedDashboard = upgradeDashboardVersion( @@ -540,6 +551,29 @@ export const assignDashboardUuidIfNotPresentThunk = () => (dispatch: any, getSta dispatch(setDashboardUuid(createUUID())); } }; +export function patchDashboardVersion(dashboard: any, version: any) { + let patched = false; + if (version == '2.4') { + dashboard.pages.forEach((p) => { + p.reports.forEach((r) => { + if (r.type == 'graph' || r.type == 'map' || r.type == 'graph3d') { + r.settings?.actionsRules?.forEach((rule) => { + if ( + rule?.field && + (rule?.condition === 'onNodeClick' || rule?.condition == 'Click') && + rule.value.includes('.') + ) { + let val = rule.value.split('.'); + rule.value = val[val.length - 1] || rule.value; + patched = true; + } + }); + } + }); + }); + } + return [dashboard, patched]; +} export function upgradeDashboardVersion(dashboard: any, origin: string, target: string) { if (origin == '2.3' && target == '2.4') { @@ -549,6 +583,19 @@ export function upgradeDashboardVersion(dashboard: any, origin: string, target: r.y *= 2; r.width *= 2; r.height *= 2; + + if (r.type == 'graph' || r.type == 'map' || r.type == 'graph3d') { + r.settings?.actionsRules?.forEach((rule) => { + if ( + rule?.field && + (rule?.condition === 'onNodeClick' || rule?.condition == 'Click') && + rule.value.includes('.') + ) { + let val = rule.value.split('.'); + rule.value = val[val.length - 1] || rule.value; + } + }); + } }); }); dashboard.version = '2.4'; diff --git a/src/dashboard/header/DashboardTitle.tsx b/src/dashboard/header/DashboardTitle.tsx index f6c67d242..476321135 100644 --- a/src/dashboard/header/DashboardTitle.tsx +++ b/src/dashboard/header/DashboardTitle.tsx @@ -149,10 +149,10 @@ export const NeoDashboardTitle = ({ {/* If the app is not running in standalone mode (i.e. in edit mode) always show dashboard settings. */} {!standaloneSettings.standalone ? (
+ {editable ? renderExtensionsButtons() : <>} {editable ? : <>} {editable ? : <>} - {editable ? renderExtensionsButtons() : <>}
) : ( <> diff --git a/src/dashboard/sidebar/DashboardSidebar.tsx b/src/dashboard/sidebar/DashboardSidebar.tsx index bfe580f10..50e6f25e4 100644 --- a/src/dashboard/sidebar/DashboardSidebar.tsx +++ b/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 { @@ -38,6 +44,7 @@ import NeoDashboardSidebarExportModal from './modal/DashboardSidebarExportModal' import NeoDashboardSidebarDeleteModal from './modal/DashboardSidebarDeleteModal'; import NeoDashboardSidebarInfoModal from './modal/DashboardSidebarInfoModal'; import NeoDashboardSidebarShareModal from './modal/DashboardSidebarShareModal'; +import NeoDashboardSidebarAccessModal from './modal/DashboardSidebarAccessModal'; import LegacyShareModal from './modal/legacy/LegacyShareModal'; import { NEODASH_VERSION } from '../DashboardReducer'; @@ -61,6 +68,7 @@ enum Modal { LOAD = 7, SAVE = 8, NONE = 9, + ACCESS = 10, } // We use "index = -1" to represent a non-saved draft dashboard in the sidebar's dashboard list. @@ -250,6 +258,16 @@ export const NeoDashboardSidebar = ({ }} /> + { + setModalOpen(Modal.NONE); + setCachedDashboard(''); + }} + /> + { + setMenuOpen(Menu.NONE); + setModalOpen(Modal.ACCESS); + }} handleDeleteClicked={() => { setMenuOpen(Menu.NONE); setModalOpen(Modal.DELETE); @@ -367,6 +389,33 @@ export const NeoDashboardSidebar = ({ Dashboards + + + {/* Only let users create dashboards and change database when running in editor mode. */} {!readonly || (readonly && standaloneSettings.standaloneLoadFromOtherDatabases) ? ( <> @@ -379,7 +428,7 @@ export const NeoDashboardSidebar = ({ style={{ float: 'right', marginLeft: '0px', - marginRight: '12px', + marginRight: '3px', paddingLeft: 0, paddingRight: '3px', }} diff --git a/src/dashboard/sidebar/menu/DashboardSidebarDashboardMenu.tsx b/src/dashboard/sidebar/menu/DashboardSidebarDashboardMenu.tsx index 67159dcc2..eea79efb4 100644 --- a/src/dashboard/sidebar/menu/DashboardSidebarDashboardMenu.tsx +++ b/src/dashboard/sidebar/menu/DashboardSidebarDashboardMenu.tsx @@ -8,6 +8,7 @@ import { DocumentTextIconOutline, InformationCircleIconOutline, ShareIconOutline, + FingerPrintIconOutline, TrashIconOutline, XMarkIconOutline, } from '@neo4j-ndl/react/icons'; @@ -25,6 +26,7 @@ export const NeoDashboardSidebarDashboardMenu = ({ handleLoadClicked, handleExportClicked, handleShareClicked, + handleAccessClicked, handleDeleteClicked, handleClose, }) => { @@ -49,6 +51,7 @@ export const NeoDashboardSidebarDashboardMenu = ({ } title='Load' /> {/* {}} icon={} title='Clone' /> */} } title='Export' /> + } title='Access' /> } title='Share' /> } title='Delete' /> diff --git a/src/dashboard/sidebar/modal/DashboardSidebarAccessModal.tsx b/src/dashboard/sidebar/modal/DashboardSidebarAccessModal.tsx new file mode 100644 index 000000000..0cb320b65 --- /dev/null +++ b/src/dashboard/sidebar/modal/DashboardSidebarAccessModal.tsx @@ -0,0 +1,215 @@ +import React, { useEffect, useState, useContext } from 'react'; +import { IconButton, Button, Dialog, TextInput } from '@neo4j-ndl/react'; +import { Menu, MenuItem, Chip } from '@mui/material'; +import { Neo4jContext, Neo4jContextState } from 'use-neo4j/dist/neo4j.context'; +import { PlusCircleIconOutline } from '@neo4j-ndl/react/icons'; +import { QueryStatus, runCypherQuery } from '../../../report/ReportQueryRunner'; +import { createNotificationThunk } from '../../../page/PageThunks'; +import { useDispatch } from 'react-redux'; +/** + * Configures setting the current Neo4j database connection for the dashboard. + * @param open - Whether the modal is open or not. + * @param database - The current Neo4j database. + * @param dashboard - The current dashboard. + * @param handleClose - The function to close the modal. + */ +export const NeoDashboardSidebarAccessModal = ({ open, database, dashboard, handleClose }) => { + const [anchorEl, setAnchorEl] = useState(null); + const [selectedLabels, setSelectedLabels] = useState([]); + const [allLabels, setAllLabels] = useState([]); + const [neo4jLabels, setNeo4jLabels] = useState([]); + const [newLabel, setNewLabel] = useState(''); + const INITIAL_LABEL = '_Neodash_Dashboard'; + const [feedback, setFeedback] = useState(''); + const { driver } = useContext(Neo4jContext); + const dispatch = useDispatch(); + + useEffect(() => { + if (!open) { + return; + } + runCypherQuery( + driver, + database, + 'CALL db.labels()', + {}, + 1000, + () => {}, + (records) => setNeo4jLabels(records.map((record) => record.get('label'))) + ); + + const query = ` + MATCH (d:${INITIAL_LABEL} {uuid: "${dashboard.uuid}"}) + RETURN labels(d) as labels + `; + runCypherQuery( + driver, + database, + query, + {}, + 1000, + (error) => { + console.error(error); + }, + (records) => { + // Set the selectedLabels state to the labels of the dashboard + setSelectedLabels(records[0].get('labels')); + setAllLabels(records[0].get('labels')); + } + ); + setFeedback(''); + setNewLabel(''); + }, [open]); + + useEffect(() => { + setAllLabels([INITIAL_LABEL]); + setSelectedLabels([INITIAL_LABEL]); + }, []); + + const handleOpenMenu = (event) => { + setAnchorEl(event.currentTarget); + }; + + const handleCloseMenu = () => { + setAnchorEl(null); + }; + + const handleLabelSelect = (label) => { + if (!selectedLabels.includes(label) && label !== INITIAL_LABEL) { + setSelectedLabels([...selectedLabels, label]); + } + handleCloseMenu(); + }; + + const handleDeleteLabel = (label) => { + if (label !== INITIAL_LABEL) { + const updatedLabels = selectedLabels.filter((selectedLabel) => selectedLabel !== label); + setSelectedLabels(updatedLabels); + } + }; + + const handleAddNewLabel = (e) => { + if (e.key === 'Enter' && newLabel.trim() !== '') { + if (selectedLabels.includes(newLabel)) { + setFeedback('Label already exists. Please enter a unique label.'); + handleCloseMenu(); + } else { + setSelectedLabels([...selectedLabels, newLabel]); + handleLabelSelect(newLabel); + setNewLabel(''); + handleCloseMenu(); + setFeedback(''); + } + } + }; + + const handleSave = () => { + // Finding the difference between what is stored and what has been selected in the UI + let toDelete = allLabels.filter((item) => selectedLabels.indexOf(item) < 0); + + const query = ` + MATCH (d:${INITIAL_LABEL} {uuid: "${dashboard.uuid}"}) + SET d:${selectedLabels.join(':')} + ${toDelete.length > 0 ? `REMOVE d:${toDelete.join(':')}` : ''} + RETURN 1; + `; + + runCypherQuery( + driver, + database, + query, + { selectedLabels: selectedLabels }, + 1000, + (status) => { + if (status == QueryStatus.COMPLETE) { + dispatch( + createNotificationThunk( + '🎉 Success!', + 'Selected Labels have successfully been added to the dashboard node.' + ) + ); + handleClose(); + } else { + dispatch( + createNotificationThunk( + 'Unable to save dashboard', + `Do you have write access to the '${database}' database?` + ) + ); + } + }, + () => {} + ); + }; + + return ( + + Dasboard Access Control - '{dashboard?.title}' + + Welcome to the Dashboard Access settings! +
+ In this modal, you can select the labels that you want to add to the current dashboard node. +
+ For more information, please refer to the{' '} + + documentation + + . + +
+ + {/* Fetch labels dynamically from Neo4j and map to menu items */} + {neo4jLabels + .filter((e) => !selectedLabels.includes(e)) + .map((label) => ( + handleLabelSelect(label)}> + {label} + + ))} + + setNewLabel(e.target.value)} + onKeyDown={(e: KeyboardEvent) => { + handleAddNewLabel(e); + e.stopPropagation(); + }} + errorText={feedback} + placeholder='Create New label' + autoComplete='off' + /> + + +
+ {selectedLabels.map((label) => ( + handleDeleteLabel(label)} + style={{ marginRight: '5px', marginBottom: '5px' }} + /> + ))} + + + +
+
+ + + + + + ); +}; + +export default NeoDashboardSidebarAccessModal; diff --git a/src/extensions/ExtensionConfig.tsx b/src/extensions/ExtensionConfig.tsx index a94053d2e..2ddfc0620 100644 --- a/src/extensions/ExtensionConfig.tsx +++ b/src/extensions/ExtensionConfig.tsx @@ -5,6 +5,7 @@ import NeoOverrideCardQueryEditor from './text2cypher/component/OverrideCardQuer import { translateQuery } from './text2cypher/util/Util'; import { GPT_LOADING_ICON } from './text2cypher/component/LoadingIcon'; import QueryTranslatorButton from './text2cypher/component/QueryTranslatorButton'; +import RBACManagementLabelButton from './rbac/RBACManagementLabelButton'; // TODO: continue documenting interface interface Extension { @@ -82,6 +83,17 @@ export const EXTENSIONS: Record = { 'Forms let you craft Cypher queries with multiple inputs, that are fired on demand. Using parameters from the dashboard, or form specific input, you will be able to trigger custom logic with forms.', link: 'https://neo4j.com/professional-services/', }, + 'access-control-management': { + name: 'access-control-management', + label: 'Access Control Management', + author: 'Neo4j Professional Services', + image: 'accesscontrol2.jpg', + enabled: true, + description: + 'This extension lets you manage access control, letting you assign users to roles, as well as controlling which node labels can be read by a user.', + link: 'https://neo4j.com/professional-services/', + settingsMenuButton: RBACManagementLabelButton, + }, }; /** diff --git a/src/extensions/actions/ActionsRuleCreationModal.tsx b/src/extensions/actions/ActionsRuleCreationModal.tsx index 38ebec995..48d6486ad 100644 --- a/src/extensions/actions/ActionsRuleCreationModal.tsx +++ b/src/extensions/actions/ActionsRuleCreationModal.tsx @@ -236,9 +236,9 @@ export const NeoCustomReportActionsModal = ({ return []; }; - const createFieldVariableSuggestionsFromRule = (rule, type) => { - let suggestions; - if (type) { + const createFieldVariableSuggestionsFromRule = (rule, skipRuleFieldCheck) => { + let suggestions: string[]; + if (skipRuleFieldCheck) { suggestions = createFieldVariableSuggestions(rule.condition, true, null).filter((e) => e.toLowerCase().startsWith(rule.field.toLowerCase()) ); @@ -249,13 +249,11 @@ export const NeoCustomReportActionsModal = ({ e.toLowerCase().startsWith(rule.value.toLowerCase()) ); } - // When we are accessing node properties (not page names), parse the node label + property pair to only show properties. // Fields for graph and map reports are structured differently than regular reports (table, bar, etc.), so we access suggestions differently. if (rule.customization !== 'set page' && (type == 'graph' || type == 'map' || type == 'graph3d')) { suggestions = suggestions.map((e) => e.split('.')[1] || e); } - return suggestions; }; diff --git a/src/extensions/rbac/RBACManagementLabelButton.tsx b/src/extensions/rbac/RBACManagementLabelButton.tsx new file mode 100644 index 000000000..80bf9e19e --- /dev/null +++ b/src/extensions/rbac/RBACManagementLabelButton.tsx @@ -0,0 +1,52 @@ +import React from 'react'; +import { connect } from 'react-redux'; +import { IconButton, MenuItem } from '@neo4j-ndl/react'; +import { UserCircleIconOutline } from '@neo4j-ndl/react/icons'; +import { RBACManagementMenu } from './RBACManagementMenu'; + +import Tooltip from '@mui/material/Tooltip/Tooltip'; +import { createNotificationThunk } from '../../page/PageThunks'; + +const RBACManagementLabelButton = ({ createNotification }) => { + const [MenuOpen, setMenuOpen] = React.useState(false); + const [anchorEl, setAnchorEl] = React.useState(null); + + const handleButtonClick = (event) => { + setMenuOpen(true); + setAnchorEl(event.currentTarget); + }; + + const handleClose = () => { + setMenuOpen(false); + }; + + const button = ( + + + + + + ); + + return ( +
+ {button} + +
+ ); +}; + +const mapStateToProps = () => ({}); + +const mapDispatchToProps = (dispatch) => ({ + createNotification: (title: any, message: any) => { + dispatch(createNotificationThunk(title, message)); + }, +}); + +export default connect(mapStateToProps, mapDispatchToProps)(RBACManagementLabelButton); diff --git a/src/extensions/rbac/RBACManagementMenu.tsx b/src/extensions/rbac/RBACManagementMenu.tsx new file mode 100644 index 000000000..264f84643 --- /dev/null +++ b/src/extensions/rbac/RBACManagementMenu.tsx @@ -0,0 +1,85 @@ +import React, { useEffect, useState, useContext } from 'react'; +import { Menu, MenuItem, MenuItems } from '@neo4j-ndl/react'; +import { UserIconOutline } from '@neo4j-ndl/react/icons'; +import { Neo4jContext, Neo4jContextState } from 'use-neo4j/dist/neo4j.context'; +import { QueryStatus, runCypherQuery } from '../../report/ReportQueryRunner'; +import RBACManagementModal from './RBACManagementModal'; + +/** + * Component for providing a menu of all the roles in the neo4j database to the user whenever they press on the + * RBACManagementLabelButton. + */ +export const RBACManagementMenu = ({ anchorEl, MenuOpen, handleClose, createNotification }) => { + const { driver } = useContext(Neo4jContext); + const [roles, setRoles] = useState([]); + const [selectedRole, setSelectedRole] = useState(null); + const [isModalOpen, setIsModalOpen] = useState(false); + + useEffect(() => { + if (!MenuOpen) { + return; + } + const query = `SHOW ROLES YIELD role WHERE role <> "PUBLIC" return role`; + runCypherQuery( + driver, + 'system', + query, + {}, + 1000, + () => {}, + (records) => { + if (records[0].error) { + createNotification('Unable to retrieve roles', records[0].error); + return; + } + setRoles(records.map((record) => record._fields[0])); + } + ); + }, [MenuOpen]); + + if (roles.length == 0) { + return <>; + } + + const handleRoleClicked = (role) => { + handleClose(); + setSelectedRole(role); + setIsModalOpen(true); + }; + + return ( + <> + + + {roles.map((role) => ( + handleRoleClicked(role)} icon={} title={role} /> + ))} + + + + { + setIsModalOpen(false); + }} + currentRole={selectedRole} + createNotification={createNotification} + /> + + ); +}; + +export default RBACManagementMenu; diff --git a/src/extensions/rbac/RBACManagementModal.tsx b/src/extensions/rbac/RBACManagementModal.tsx new file mode 100644 index 000000000..c19f5ea21 --- /dev/null +++ b/src/extensions/rbac/RBACManagementModal.tsx @@ -0,0 +1,179 @@ +import React, { useEffect, useState, useContext } from 'react'; +import { Button, Dialog, Dropdown } from '@neo4j-ndl/react'; +import { Neo4jContext, Neo4jContextState } from 'use-neo4j/dist/neo4j.context'; +import { + Operation, + retrieveAllowAndDenyLists, + retrieveDatabaseList, + retrieveLabelsList, + retrieveNeo4jUsers, + updatePrivileges, + updateUsers, +} from './RBACUtils'; +/** + * Configures RBAC Access Control Management for a certain role on certain labels and attaches the roles to specific users. + * @param open - Whether the modal is open or not. + * @param currentRole - The currently selected role. + * @param handleClose - The function to close the modal. + */ +export const RBACManagementModal = ({ open, handleClose, currentRole, createNotification }) => { + const { driver } = useContext(Neo4jContext); + const [neo4jUsers, setNeo4jUsers] = useState([]); + const [selectedUsers, setSelectedUsers] = useState([]); + const [selectedDatabase, setSelectedDatabase] = useState(''); + const [databases, setDatabases] = useState([]); + const [loaded, setLoaded] = useState(false); + const [labels, setLabels] = useState([]); + const [allowList, setAllowList] = useState([]); + const [denyList, setDenyList] = useState([]); + + useEffect(() => { + if (!open) { + setSelectedUsers([]); + setAllowList([]); + setDenyList([]); + setSelectedDatabase(''); + return; + } + retrieveDatabaseList(driver, setDatabases); + retrieveNeo4jUsers(driver, currentRole, setNeo4jUsers, setSelectedUsers); + }, [open]); + + const parseLabelsList = (database, records) => { + const allLabels = records.map((record) => record._fields[0]).filter((l) => l !== '_Neodash_Dashboard'); + retrieveAllowAndDenyLists( + driver, + database, + currentRole, + allLabels, + setLabels, + setAllowList, + setDenyList, + setLoaded + ); + }; + + const handleDatabaseSelect = (selectedOption) => { + setSelectedDatabase(selectedOption.value); + retrieveLabelsList(driver, selectedOption.value, (records) => parseLabelsList(selectedOption.value, records)); + }; + + const handleSave = () => { + updateUsers(driver, currentRole, neo4jUsers, selectedUsers); + if (selectedDatabase) { + createNotification('Updating', `Access for role '${currentRole}' is being updated, please wait...`); + updatePrivileges(driver, selectedDatabase, currentRole, labels, denyList, Operation.DENY, createNotification); + updatePrivileges(driver, selectedDatabase, currentRole, labels, allowList, Operation.GRANT, createNotification); + } else { + createNotification('Success', `Users have been updated for role '${currentRole}'.`); + } + + handleClose(); + }; + + return ( + + Access Control - '{currentRole}' + + This screen lets you handle user assignment and access control for a specific role. +
+ For more information, please refer to the{' '} + + documentation + + . +
+
+
+
Manage Users
+

Select a list of users to assign to the current role.

+ ({ value: user, label: user })), + options: neo4jUsers.map((user) => ({ value: user, label: user })), + isMulti: true, + onChange: (val) => setSelectedUsers(val.map((v) => v.value)), + }} + /> +
+
+
+
Label Access
+

For a given database, control what labels the role is or is not allowed to see.

+ database !== 'system') + .map((database) => ({ value: database, label: database })), + onChange: handleDatabaseSelect, + }} + /> +
+ {selectedDatabase && loaded && ( + <> +
+
+
+ i == '*') && + 'Selecting (*) grants access to all labels, overriding other selections.' + } + selectProps={{ + placeholder: 'Select labels', + isClearable: false, + value: allowList.map((nodelabel) => ({ value: nodelabel, label: nodelabel })), + options: labels.map((nodelabel) => ({ value: nodelabel, label: nodelabel })), + isMulti: true, + onChange: (val) => setAllowList(val.map((v) => v.value)), + }} + /> +
+
+ i == '*') && + 'Selecting (*) denies access to all labels, overriding other selections.' + } + selectProps={{ + placeholder: 'Select labels', + isClearable: false, + value: denyList.map((nodelabel) => ({ value: nodelabel, label: nodelabel })), + options: labels.map((nodelabel) => ({ value: nodelabel, label: nodelabel })), + isMulti: true, + onChange: (val) => setDenyList(val.map((v) => v.value)), + }} + /> +
+
+ + )} + + + + + + + ); +}; + +export default RBACManagementModal; diff --git a/src/extensions/rbac/RBACUtils.ts b/src/extensions/rbac/RBACUtils.ts new file mode 100644 index 000000000..0ed54781b --- /dev/null +++ b/src/extensions/rbac/RBACUtils.ts @@ -0,0 +1,250 @@ +import { QueryStatus, runCypherQuery } from '../../report/ReportQueryRunner'; + +export enum Operation { + GRANT, + DENY, +} + +/** + * Sets the privileges for a role to a new list provided by the user. + * This involves wiping old privileges, including a special case for '*' privileges. + * @param driver the Neo4j driver. + * @param database a database name for which Privileges must be changed. + * @param role role for which privileges are updated. + * @param allLabels list of all labels in the given database. + * @param newLabels list of new labels in the database, for which priveleges are changed. + * @param operation The operation, either 'GRANT' or 'DENY' + */ +export const updatePrivileges = ( + driver, + database, + role, + allLabels, + newLabels, + operation: Operation, + createNotification +) => { + // TODO - should we also drop cross-database DENYs (`ON GRAPH *`) to catch the true full set? + // TODO - there + // 1. Special case for '*'. Create it if needed to be there, otherwise revoke it. + runCypherQuery( + driver, + 'system', + buildAccessQuery(database, role, ['*'], operation, !newLabels.includes('*')), + {}, + 1000, + (status) => { + if (status == QueryStatus.NO_DATA || QueryStatus.COMPLETE) { + // 2. Build the query that revokes all possible priveleges, returning to a 'blank slate' + runCypherQuery( + driver, + 'system', + buildAccessQuery( + database, + role, + allLabels.filter((l) => l !== '*'), + operation, + true + ), + {}, + 1000, + (status) => { + if (status == QueryStatus.NO_DATA || QueryStatus.COMPLETE) { + // 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... + const timeout = setTimeout(() => { + // 3. Create the new privileges as specified in the `newLabels` list by the user. + if (newLabels.filter((l) => l !== '*').length > 0) { + runCypherQuery( + driver, + 'system', + buildAccessQuery( + database, + role, + newLabels.filter((l) => l !== '*'), + operation, + false + ), + {}, + 1000, + () => { + if (status == QueryStatus.NO_DATA || QueryStatus.COMPLETE) { + createNotification('Success', `Access for role '${role}' updated.`); + } + } + ); + } + }, 1000); + } + } + ); + } + } + ); +}; + +/** + * Generic query builder for adding/removing grants/denies for a list of labels. + * @param database the database to grant/deny on. + * @param role the role to create access rules for. + * @param labels a list of node labels + * @param access the access type. Can be "GRANT" or "DENY" + * @param revoke Whether to revoke access or not. + * @returns + */ +function buildAccessQuery(database, role, labels, operation: Operation, revoke: boolean): string { + const query = `${revoke ? 'REVOKE' : ''} + ${operation == Operation.DENY ? 'DENY' : 'GRANT'} + MATCH {*} ON GRAPH ${database} + NODES ${labels.join(',')} + ${revoke ? 'FROM' : 'TO'} ${role}`; + return query; +} + +/** + * Retrieve allow and deny lists for a selected role, and a given database. + * @param driver Neo4j driver object. + * @param database the user's selected database. + * @param currentRole the user's selected role. + * @param allLabels list of all labels in the database (retrieved seperately) + * @param setLabels callback to update the list of all labels with any more that may only exist in priveleges + * @param setAllowList callback to update the allow list retrieved from the database. + * @param setDenyList callback to update the deny list retrieved from the database. + * @param setLoaded callback to indicate the retrieval is completed. + */ +export const retrieveAllowAndDenyLists = ( + driver, + database, + currentRole, + allLabels, + setLabels, + setAllowList, + setDenyList, + setLoaded +) => { + runCypherQuery( + driver, + 'system', + `SHOW PRIVILEGES + YIELD graph, role, access, action, segment + WHERE (graph = $database OR graph = '*') + AND role = $rolename + AND action = 'match' + AND segment STARTS WITH 'NODE(' + RETURN access, collect(substring(segment, 5, size(segment)-6)) as nodes`, + { rolename: currentRole, database: database }, + 1000, + (status) => { + if (status == QueryStatus.NO_DATA) { + setLabels(['*'].concat(allLabels)); + setLoaded(true); + } + }, + (records) => { + // Extract granted and denied label list from the result of the SHOW PRIVILEGES query + const grants = records.filter((r) => r._fields[0] == 'GRANTED'); + const denies = records.filter((r) => r._fields[0] == 'DENIED'); + const grantedLabels = grants[0] ? [...new Set(grants[0]._fields[1])] : []; + const deniedLabels = denies[0] ? [...new Set(denies[0]._fields[1])] : []; + setAllowList(grantedLabels); + setDenyList(deniedLabels); + + // Here we build a set of all POSSIBLE labels, that includes the list in the database, plus those in denies and grants. + const possibleLabels = [...new Set(allLabels.concat(grantedLabels).concat(deniedLabels))]; + // Add '*' as an extra option. + setLabels(['*'].concat(possibleLabels)); + setLoaded(true); + } + ); +}; + +/** + * Retrieve the set of all users from the database. + * @param driver Neo4j driver object with active session. + * @param currentRole selected role. + * @param setNeo4jUsers callback to update the list of all users. + * @param setRoleUsers callback to update the list of role-specific users. + */ +export const retrieveNeo4jUsers = (driver, currentRole, setNeo4jUsers, setRoleUsers) => { + runCypherQuery( + driver, + 'system', + 'SHOW users yield user, roles return user, roles', + {}, + 1000, + () => {}, + (records) => { + const roleRecords = records.filter((r) => r._fields[1].includes(currentRole)); + setRoleUsers(roleRecords.map((record) => record._fields[0])); + setNeo4jUsers(records.map((record) => record._fields[0])); + } + ); +}; + +/** + * retrieve the list of labels in a given database from the dbms. + * @param driver Neo4j driver object. + * @param database selected database. + * @param setLabels callback to update the list of labels. + */ +export function retrieveLabelsList(driver, database: any, setLabels: (records: any) => void) { + runCypherQuery( + driver, + database.value, + 'CALL db.labels()', + {}, + 1000, + () => {}, + (records) => setLabels(records) + ); +} + +/** + * retrieve the list of databases in a DBMS. + * @param driver Neo4j driver with active session + * @param setDatabases callback to update the list of databases. + */ +export function retrieveDatabaseList(driver, setDatabases: React.Dispatch>) { + runCypherQuery( + driver, + 'system', + 'SHOW DATABASES yield name return distinct name', + {}, + 1000, + () => {}, + (records) => { + setDatabases(records.map((record) => record._fields[0])); + } + ); +} + +/** + * Updates the list of users for a given role. + * This is a two step operation: clear the users assigned to the role currently, and recreate them with a new list. + * @param driver Neo4j driver with active session. + * @param currentRole selected role + * @param allUsers list of all users. + * @param selectedUsers list of users to have the role after the operation completes. + */ +export const updateUsers = async (driver, currentRole, allUsers, selectedUsers) => { + // 1. Build the query that removes all users from the role. + await runCypherQuery( + driver, + 'system', + `REVOKE ROLE ${currentRole} FROM ${allUsers.join(',')}`, + {}, + 1000, + (status) => { + if (status == QueryStatus.NO_DATA || QueryStatus.COMPLETE) { + // 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... + const timeout = setTimeout(() => { + // 2. Re-assign only selected users to the role. + if (selectedUsers.length > 0) { + runCypherQuery(driver, 'system', `GRANT ROLE ${currentRole} TO ${selectedUsers.join(',')}`); + } + }, 1000); + } + } + ); +}; diff --git a/src/extensions/text2cypher/component/model-examples/ExampleDisplayTable.tsx b/src/extensions/text2cypher/component/model-examples/ExampleDisplayTable.tsx index e2e925f50..82115cbda 100644 --- a/src/extensions/text2cypher/component/model-examples/ExampleDisplayTable.tsx +++ b/src/extensions/text2cypher/component/model-examples/ExampleDisplayTable.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useEffect, useState } from 'react'; import { TrashIconOutline, PencilSquareIconOutline, @@ -7,6 +7,7 @@ import { ChevronDoubleRightIconOutline, ChevronRightIconOutline, } from '@neo4j-ndl/react/icons'; +import ShowMoreText from 'react-show-more-text'; import { createColumnHelper, flexRender, @@ -57,11 +58,15 @@ function ExampleDisplayTable({ examples, deleteModelExample, handleEdit }) { const columns = React.useMemo( () => [ columnHelper.accessor('question', { - cell: (info) => info.getValue(), + cell: (info) => {info.getValue()}, header: () => 'Question', }), columnHelper.accessor('answer', { - cell: (info) => info.getValue(), + cell: (info) => ( +
+ {info.getValue()} +
+ ), header: 'Answer', }), { @@ -87,19 +92,52 @@ function ExampleDisplayTable({ examples, deleteModelExample, handleEdit }) { }, }); + const [cellWidth, setCellWidth] = useState('600px'); + + // For screens with 1080 x pixels or less + useEffect(() => { + const updateCellWidth = () => { + if (window.innerWidth <= 1080) { + // Example breakpoint for smaller screens + setCellWidth('463px'); + } else { + setCellWidth('600px'); + } + }; + + window.addEventListener('resize', updateCellWidth); + updateCellWidth(); // Initialize on component mount + + return () => window.removeEventListener('resize', updateCellWidth); + }, []); + return (
-
+
{table.getHeaderGroups().map((headerGroup) => ( {headerGroup.headers.map((header) => ( - ))} @@ -110,11 +148,23 @@ function ExampleDisplayTable({ examples, deleteModelExample, handleEdit }) { {table.getRowModel().rows.map((row) => ( {row.getVisibleCells().map((cell) => ( - ))} diff --git a/src/index.pcss b/src/index.pcss index ad0fea17c..f1bd03ad2 100644 --- a/src/index.pcss +++ b/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; } diff --git a/src/modal/AboutModal.tsx b/src/modal/AboutModal.tsx index fd7af427c..1e40e9dab 100644 --- a/src/modal/AboutModal.tsx +++ b/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.2'; +export const version = '2.4.3'; export const NeoAboutModal = ({ open, handleClose, getDebugState }) => { const downloadDebugFile = () => { diff --git a/yarn.lock b/yarn.lock index fcb9b0188..c5dcfb1f6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1306,6 +1306,13 @@ dependencies: regenerator-runtime "^0.14.0" +"@babel/runtime@^7.23.9": + version "7.23.9" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.9.tgz#47791a15e4603bb5f905bc0753801cf21d6345f7" + integrity sha512-0CX6F+BI2s9dkUqr08KFrAIZgNFj75rdBU/DjCyYLIaV/quFjkk6T+EJ2LkZHyZTbEV4L5p97mNkUsHl2wLFAw== + dependencies: + regenerator-runtime "^0.14.0" + "@babel/template@^7.18.10", "@babel/template@^7.20.7": version "7.20.7" resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.20.7.tgz#a15090c2839a83b02aa996c0b4994005841fd5a8" @@ -1919,7 +1926,7 @@ "@emotion/weak-memoize" "^0.3.0" stylis "4.1.3" -"@emotion/cache@^11.10.8": +"@emotion/cache@^11.11.0": version "11.11.0" resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.11.0.tgz#809b33ee6b1cb1a625fef7a45bc568ccd9b8f3ff" integrity sha512-P34z9ssTCBi3e9EI1ZsWpNHcfY1r09ZO0rZbRO2ob3ZQMnFI35jB536qoXbkdesr5EUhYi22anuEJuyxifaqAQ== @@ -1935,6 +1942,11 @@ resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.9.0.tgz#c5153d50401ee3c027a57a177bc269b16d889cb7" integrity sha512-14FtKiHhy2QoPIzdTcvh//8OyBlknNs2nXRwIhG904opCby3l+9Xaf/wuPvICBF0rc1ZCNBd3nKe9cd2mecVkQ== +"@emotion/hash@^0.9.1": + version "0.9.1" + resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.9.1.tgz#4ffb0055f7ef676ebc3a5a91fb621393294e2f43" + integrity sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ== + "@emotion/is-prop-valid@^1.1.0", "@emotion/is-prop-valid@^1.2.0": version "1.2.0" resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.2.0.tgz#7f2d35c97891669f7e276eb71c83376a5dc44c83" @@ -2068,6 +2080,13 @@ minimatch "^3.1.2" strip-json-comments "^3.1.1" +"@floating-ui/core@^1.0.0": + version "1.6.0" + resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.6.0.tgz#fa41b87812a16bf123122bf945946bae3fdf7fc1" + integrity sha512-PcF++MykgmTj3CIyOQbKA/hDzOAiqI3mhuoN44WRCopIs1sgoDoU4oty4Jtqaj/y3oDU6fnVSm4QG0a3t5i0+g== + dependencies: + "@floating-ui/utils" "^0.2.1" + "@floating-ui/core@^1.2.4": version "1.2.5" resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.2.5.tgz#612f0d203e6f647490d572c7b798eebac9e3cf54" @@ -2092,6 +2111,14 @@ dependencies: "@floating-ui/core" "^1.3.0" +"@floating-ui/dom@^1.6.1": + version "1.6.3" + resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.6.3.tgz#954e46c1dd3ad48e49db9ada7218b0985cee75ef" + integrity sha512-RnDthu3mzPlQ31Ss/BTwQ1zjzIhr3lk1gZB1OC56h/1vEtaXkESrOqL5fQVMfXpwGtRwX+YsZBdyHtJMQnkArw== + dependencies: + "@floating-ui/core" "^1.0.0" + "@floating-ui/utils" "^0.2.0" + "@floating-ui/react-dom@^2.0.1": version "2.0.1" resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-2.0.1.tgz#7972a4fc488a8c746cded3cfe603b6057c308a91" @@ -2099,6 +2126,13 @@ dependencies: "@floating-ui/dom" "^1.3.0" +"@floating-ui/react-dom@^2.0.8": + version "2.0.8" + resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-2.0.8.tgz#afc24f9756d1b433e1fe0d047c24bd4d9cefaa5d" + integrity sha512-HOdqOt3R3OGeTKidaLvJKcgg75S6tibQ3Tif4eyd91QnIJWr0NLvoXFpJA/j8HqkFSL68GDca9AuyWEHlhyClw== + dependencies: + "@floating-ui/dom" "^1.6.1" + "@floating-ui/react@^0.24.2": version "0.24.3" resolved "https://registry.yarnpkg.com/@floating-ui/react/-/react-0.24.3.tgz#4f11f09c7245555724f5167dd6925133457db89c" @@ -2108,6 +2142,11 @@ aria-hidden "^1.1.3" tabbable "^6.0.1" +"@floating-ui/utils@^0.2.0", "@floating-ui/utils@^0.2.1": + version "0.2.1" + resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.1.tgz#16308cea045f0fc777b6ff20a9f25474dd8293d2" + integrity sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q== + "@formatjs/ecma402-abstract@1.17.0": version "1.17.0" resolved "https://registry.yarnpkg.com/@formatjs/ecma402-abstract/-/ecma402-abstract-1.17.0.tgz#2ce191a3bde4c65c6684e03fa247062a4a294b9e" @@ -2360,74 +2399,73 @@ "@lezer/common" "^1.0.0" "@lezer/highlight" "^1.0.0" -"@mui/base@5.0.0-alpha.128": - version "5.0.0-alpha.128" - resolved "https://registry.yarnpkg.com/@mui/base/-/base-5.0.0-alpha.128.tgz#8ce4beb971ac989df0b1d3b2bd3e9274dbfa604f" - integrity sha512-wub3wxNN+hUp8hzilMlXX3sZrPo75vsy1cXEQpqdTfIFlE9HprP1jlulFiPg5tfPst2OKmygXr2hhmgvAKRrzQ== +"@mui/base@5.0.0-beta.37": + version "5.0.0-beta.37" + resolved "https://registry.yarnpkg.com/@mui/base/-/base-5.0.0-beta.37.tgz#0e7e0f28402391fcfbb05476d5acc6c4f2d817b1" + integrity sha512-/o3anbb+DeCng8jNsd3704XtmmLDZju1Fo8R2o7ugrVtPQ/QpcqddwKNzKPZwa0J5T8YNW3ZVuHyQgbTnQLisQ== dependencies: - "@babel/runtime" "^7.21.0" - "@emotion/is-prop-valid" "^1.2.0" - "@mui/types" "^7.2.4" - "@mui/utils" "^5.12.3" - "@popperjs/core" "^2.11.7" - clsx "^1.2.1" + "@babel/runtime" "^7.23.9" + "@floating-ui/react-dom" "^2.0.8" + "@mui/types" "^7.2.13" + "@mui/utils" "^5.15.11" + "@popperjs/core" "^2.11.8" + clsx "^2.1.0" prop-types "^15.8.1" - react-is "^18.2.0" -"@mui/core-downloads-tracker@^5.12.3": - version "5.12.3" - resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-5.12.3.tgz#3dffe62dccc065ddd7338e97d7be4b917004287e" - integrity sha512-yiJZ+knaknPHuRKhRk4L6XiwppwkAahVal3LuYpvBH7GkA2g+D9WLEXOEnNYtVFUggyKf6fWGLGnx0iqzkU5YA== +"@mui/core-downloads-tracker@^5.15.11": + version "5.15.11" + resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-5.15.11.tgz#dcaf6156880e81e4547237fb781700485453e964" + integrity sha512-JVrJ9Jo4gyU707ujnRzmE8ABBWpXd6FwL9GYULmwZRtfPg89ggXs/S3MStQkpJ1JRWfdLL6S5syXmgQGq5EDAw== "@mui/material@^5.12.3": - version "5.12.3" - resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.12.3.tgz#398c1b123fb065763558bc1f9fc47d1f8cb87d0c" - integrity sha512-xNmKlrEN4HsTaKFNLZfc7ie7CXx2YqEeO//hsXZx2p3MGtDdeMr2sV3jC4hsFs57RhQlF79weY7uVvC8xSuVbg== - dependencies: - "@babel/runtime" "^7.21.0" - "@mui/base" "5.0.0-alpha.128" - "@mui/core-downloads-tracker" "^5.12.3" - "@mui/system" "^5.12.3" - "@mui/types" "^7.2.4" - "@mui/utils" "^5.12.3" - "@types/react-transition-group" "^4.4.5" - clsx "^1.2.1" - csstype "^3.1.2" + version "5.15.11" + resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.15.11.tgz#4f42ee30443699ffb5836029c6d8464154eca603" + integrity sha512-FA3eEuEZaDaxgN3CgfXezMWbCZ4VCeU/sv0F0/PK5n42qIgsPVD6q+j71qS7/62sp6wRFMHtDMpXRlN+tT/7NA== + dependencies: + "@babel/runtime" "^7.23.9" + "@mui/base" "5.0.0-beta.37" + "@mui/core-downloads-tracker" "^5.15.11" + "@mui/system" "^5.15.11" + "@mui/types" "^7.2.13" + "@mui/utils" "^5.15.11" + "@types/react-transition-group" "^4.4.10" + clsx "^2.1.0" + csstype "^3.1.3" prop-types "^15.8.1" react-is "^18.2.0" react-transition-group "^4.4.5" -"@mui/private-theming@^5.12.3": - version "5.12.3" - resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-5.12.3.tgz#f5e4704e25d9d91b906561cae573cda8f3801e10" - integrity sha512-o1e7Z1Bp27n4x2iUHhegV4/Jp6H3T6iBKHJdLivS5GbwsuAE/5l4SnZ+7+K+e5u9TuhwcAKZLkjvqzkDe8zqfA== +"@mui/private-theming@^5.15.11": + version "5.15.11" + resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-5.15.11.tgz#4b9289b56b1ae0beb84e47bc9952f927b6e175ae" + integrity sha512-jY/696SnSxSzO1u86Thym7ky5T9CgfidU3NFJjguldqK4f3Z5S97amZ6nffg8gTD0HBjY9scB+4ekqDEUmxZOA== dependencies: - "@babel/runtime" "^7.21.0" - "@mui/utils" "^5.12.3" + "@babel/runtime" "^7.23.9" + "@mui/utils" "^5.15.11" prop-types "^15.8.1" -"@mui/styled-engine@^5.12.3": - version "5.12.3" - resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-5.12.3.tgz#3307643d52c81947a624cdd0437536cc8109c4f0" - integrity sha512-AhZtiRyT8Bjr7fufxE/mLS+QJ3LxwX1kghIcM2B2dvJzSSg9rnIuXDXM959QfUVIM3C8U4x3mgVoPFMQJvc4/g== +"@mui/styled-engine@^5.15.11": + version "5.15.11" + resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-5.15.11.tgz#040181f31910e0f66d43a5c44fe89da06b34212b" + integrity sha512-So21AhAngqo07ces4S/JpX5UaMU2RHXpEA6hNzI6IQjd/1usMPxpgK8wkGgTe3JKmC2KDmH8cvoycq5H3Ii7/w== dependencies: - "@babel/runtime" "^7.21.0" - "@emotion/cache" "^11.10.8" - csstype "^3.1.2" + "@babel/runtime" "^7.23.9" + "@emotion/cache" "^11.11.0" + csstype "^3.1.3" prop-types "^15.8.1" "@mui/styles@^5.12.3": - version "5.12.3" - resolved "https://registry.yarnpkg.com/@mui/styles/-/styles-5.12.3.tgz#2856fea1002199155bca02d4188b3771539481c6" - integrity sha512-y0GN1kTYO2FF/0LH8a0PpVxwLotlcunFqdJpCL5gza0w5Fqz9wxlwauPZW0bDt0+sF79CrohzdzWkh+fxB+oww== - dependencies: - "@babel/runtime" "^7.21.0" - "@emotion/hash" "^0.9.0" - "@mui/private-theming" "^5.12.3" - "@mui/types" "^7.2.4" - "@mui/utils" "^5.12.3" - clsx "^1.2.1" - csstype "^3.1.2" + version "5.15.11" + resolved "https://registry.yarnpkg.com/@mui/styles/-/styles-5.15.11.tgz#2fc57a42eff47542924e1ba90fb188b733d295aa" + integrity sha512-7TCs+0AGCtNaqBHhj0ZODYLnQjVrY9nG4PrT2bzIGIh3zvJxF7zY6IRiPyBFsKY1OjdVHjjYuan4U81QbdBrew== + dependencies: + "@babel/runtime" "^7.23.9" + "@emotion/hash" "^0.9.1" + "@mui/private-theming" "^5.15.11" + "@mui/types" "^7.2.13" + "@mui/utils" "^5.15.11" + clsx "^2.1.0" + csstype "^3.1.3" hoist-non-react-statics "^3.3.2" jss "^10.10.0" jss-plugin-camel-case "^10.10.0" @@ -2439,24 +2477,24 @@ jss-plugin-vendor-prefixer "^10.10.0" prop-types "^15.8.1" -"@mui/system@^5.12.3": - version "5.12.3" - resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.12.3.tgz#306b3cdffa3046067640219c1e5dd7e3dae38ff9" - integrity sha512-JB/6sypHqeJCqwldWeQ1MKkijH829EcZAKKizxbU2MJdxGG5KSwZvTBa5D9qiJUA1hJFYYupjiuy9ZdJt6rV6w== - dependencies: - "@babel/runtime" "^7.21.0" - "@mui/private-theming" "^5.12.3" - "@mui/styled-engine" "^5.12.3" - "@mui/types" "^7.2.4" - "@mui/utils" "^5.12.3" - clsx "^1.2.1" - csstype "^3.1.2" +"@mui/system@^5.15.11": + version "5.15.11" + resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.15.11.tgz#19cf1974f82f1dd38be1f162034efecadd765733" + integrity sha512-9j35suLFq+MgJo5ktVSHPbkjDLRMBCV17NMBdEQurh6oWyGnLM4uhU4QGZZQ75o0vuhjJghOCA1jkO3+79wKsA== + dependencies: + "@babel/runtime" "^7.23.9" + "@mui/private-theming" "^5.15.11" + "@mui/styled-engine" "^5.15.11" + "@mui/types" "^7.2.13" + "@mui/utils" "^5.15.11" + clsx "^2.1.0" + csstype "^3.1.3" prop-types "^15.8.1" -"@mui/types@^7.2.4": - version "7.2.4" - resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.2.4.tgz#b6fade19323b754c5c6de679a38f068fd50b9328" - integrity sha512-LBcwa8rN84bKF+f5sDyku42w1NTxaPgPyYKODsh01U1fVstTClbUoSA96oyRBnSNyEiAVjKm6Gwx9vjR+xyqHA== +"@mui/types@^7.2.13": + version "7.2.13" + resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.2.13.tgz#d1584912942f9dc042441ecc2d1452be39c666b8" + integrity sha512-qP9OgacN62s+l8rdDhSFRe05HWtLLJ5TGclC9I1+tQngbssu0m2dmFZs+Px53AcOs9fD7TbYd4gc9AXzVqO/+g== "@mui/utils@^5.10.3": version "5.11.9" @@ -2469,14 +2507,13 @@ prop-types "^15.8.1" react-is "^18.2.0" -"@mui/utils@^5.12.3": - version "5.12.3" - resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.12.3.tgz#3fa3570dac7ec66bb9cc84ab7c16ab6e1b7200f2" - integrity sha512-D/Z4Ub3MRl7HiUccid7sQYclTr24TqUAQFFlxHQF8FR177BrCTQ0JJZom7EqYjZCdXhwnSkOj2ph685MSKNtIA== +"@mui/utils@^5.15.11": + version "5.15.11" + resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.15.11.tgz#a71804d6d6025783478fd1aca9afbf83d9b789c7" + integrity sha512-D6bwqprUa9Stf8ft0dcMqWyWDKEo7D+6pB1k8WajbqlYIRA8J8Kw9Ra7PSZKKePGBGWO+/xxrX1U8HpG/aXQCw== dependencies: - "@babel/runtime" "^7.21.0" - "@types/prop-types" "^15.7.5" - "@types/react-is" "^16.7.1 || ^17.0.0" + "@babel/runtime" "^7.23.9" + "@types/prop-types" "^15.7.11" prop-types "^15.8.1" react-is "^18.2.0" @@ -2922,11 +2959,6 @@ schema-utils "^3.0.0" source-map "^0.7.3" -"@popperjs/core@^2.11.7": - version "2.11.7" - resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.7.tgz#ccab5c8f7dc557a52ca3288c10075c9ccd37fff7" - integrity sha512-Cr4OjIkipTtcXKjAsm8agyleBuDHvxzeBoa1v543lbv1YaIwQjESsVcmjiWiPEbC1FIeHOG/Op9kdCmAmiS3Kw== - "@popperjs/core@^2.11.8": version "2.11.8" resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f" @@ -4617,6 +4649,11 @@ resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf" integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w== +"@types/prop-types@^15.7.11": + version "15.7.11" + resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.11.tgz#2596fb352ee96a1379c657734d4b913a613ad563" + integrity sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng== + "@types/qs@*": version "6.9.7" resolved "https://registry.yarnpkg.com/@types/qs/-/qs-6.9.7.tgz#63bb7d067db107cc1e457c303bc25d511febf6cb" @@ -4658,6 +4695,13 @@ dependencies: "@types/react" "*" +"@types/react-transition-group@^4.4.10": + version "4.4.10" + resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.10.tgz#6ee71127bdab1f18f11ad8fb3322c6da27c327ac" + integrity sha512-hT/+s0VQs2ojCX823m60m5f0sL5idt9SO6Tj6Dg+rdphGPIeJbJ6CxvBYkgkGKrYeDjvIpKTR38UzmtHJOGW3Q== + dependencies: + "@types/react" "*" + "@types/react@*": version "18.0.28" resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.28.tgz#accaeb8b86f4908057ad629a26635fe641480065" @@ -5925,6 +5969,11 @@ clsx@^1.1.1, clsx@^1.2.1: resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12" integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg== +clsx@^2.1.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.0.tgz#e851283bcb5c80ee7608db18487433f7b23f77cb" + integrity sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg== + color-convert@^1.9.0: version "1.9.3" resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8" @@ -6251,10 +6300,10 @@ csstype@^3.0.2, csstype@^3.0.6: resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.1.tgz#841b532c45c758ee546a11d5bd7b7b473c8c30b9" integrity sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw== -csstype@^3.1.2: - version "3.1.2" - resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b" - integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ== +csstype@^3.1.3: + version "3.1.3" + resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81" + integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw== cypress@^12.17.4: version "12.17.4" @@ -7927,9 +7976,9 @@ focus-lock@^0.11.6: tslib "^2.0.3" follow-redirects@^1.0.0, follow-redirects@^1.14.8: - version "1.15.2" - resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.2.tgz#b460864144ba63f2681096f274c4e57026da2c13" - integrity sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA== + version "1.15.4" + resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.4.tgz#cdc7d308bf6493126b17ea2191ea0ccf3e535adf" + integrity sha512-Cr4D/5wlrb0z9dgERpUL3LrmPKVDsETIJhaCMeDfuFYcqa5bldGV6wBsAN6X/vxlXQtFBMrXdXxdL8CbDTGniw== for-each@^0.3.3: version "0.3.3" @@ -10386,6 +10435,15 @@ neo4j-client-sso@^1.2.2: jwt-decode "^3.1.2" lodash.pick "^4.4.0" +neo4j-driver-bolt-connection@5.12.0: + version "5.12.0" + resolved "https://registry.yarnpkg.com/neo4j-driver-bolt-connection/-/neo4j-driver-bolt-connection-5.12.0.tgz#aff161367d287579d7bdd3ee4179eed324398210" + integrity sha512-dlYbFsfT0HopGItitG5uDK4nAkcqSPNtRqMz318qy//7fb/7OXVLGYikj57Ve1toJiJD8IIVErt/dVuEUHVxGA== + dependencies: + buffer "^6.0.3" + neo4j-driver-core "5.12.0" + string_decoder "^1.3.0" + neo4j-driver-bolt-connection@^4.4.10: version "4.4.10" resolved "https://registry.yarnpkg.com/neo4j-driver-bolt-connection/-/neo4j-driver-bolt-connection-4.4.10.tgz#a8b5b7f82b1d6f9a71a43eafcb0e21512ea24908" @@ -10395,6 +10453,11 @@ neo4j-driver-bolt-connection@^4.4.10: neo4j-driver-core "^4.4.10" string_decoder "^1.3.0" +neo4j-driver-core@5.12.0: + version "5.12.0" + resolved "https://registry.yarnpkg.com/neo4j-driver-core/-/neo4j-driver-core-5.12.0.tgz#1f8616da7e945921574811368a68f5d2501bfd35" + integrity sha512-xBRi5oezysDUvtvBiIgBchzumkDZxvR9ol9sUtA9PBgVENeSmPH3CncitY8S979CFELS6wH7kydcjPLB4QMOzA== + neo4j-driver-core@^4.4.10: version "4.4.10" resolved "https://registry.yarnpkg.com/neo4j-driver-core/-/neo4j-driver-core-4.4.10.tgz#6f4c1ccc1199f864b149bdcef5e50e45ff95c29e" @@ -10410,6 +10473,15 @@ neo4j-driver@^4.4.5: neo4j-driver-core "^4.4.10" rxjs "^6.6.3" +neo4j-driver@^5.12.0: + version "5.12.0" + resolved "https://registry.yarnpkg.com/neo4j-driver/-/neo4j-driver-5.12.0.tgz#1b2d7db1672ad224f0146542efee306a0a156a11" + integrity sha512-T2Vz63XDkL9TomM16dBusuXbo7d9SIGw2g3VR/rmrWTdbl1V1LYFx/u1P7AwBsFuX08oncKHfZwHGsWrCvdMyA== + dependencies: + neo4j-driver-bolt-connection "5.12.0" + neo4j-driver-core "5.12.0" + rxjs "^7.8.1" + next-tick@1, next-tick@^1.0.0, next-tick@^1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.1.0.tgz#1836ee30ad56d67ef281b22bd199f709449b35eb" @@ -12239,6 +12311,13 @@ rxjs@^7.5.1, rxjs@^7.5.5, rxjs@^7.8.0: dependencies: tslib "^2.1.0" +rxjs@^7.8.1: + version "7.8.1" + resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-7.8.1.tgz#6f6f3d99ea8044291efd92e7c7fcf562c4057543" + integrity sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg== + dependencies: + tslib "^2.1.0" + sade@^1.7.3: version "1.8.1" resolved "https://registry.yarnpkg.com/sade/-/sade-1.8.1.tgz#0a78e81d658d394887be57d2a409bf703a3b2701"
+ {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
+ {flexRender(cell.column.columnDef.cell, cell.getContext())}