webui: Refactor database page

Rewrite the database page to use React instead of AngularJS. While doing
so this cleans up the existing code, especially on the frontend side, a
lot. The looks of the page change slightly but the functionality is
mostly untouched. Only resizing of the table columns is added.

Note that this adds jQuery as a dependency. This is just temporarily.
Please do not start using it.

This also changes how NULL values are passed from the server to the
frontend. This means that the memcache has to be cleared for NULL values
to show up correctly in the frontend.

Author: MKleusberg

.gitignore

@@ -52,6 +52,7 @@ node_modules
 webui/js/dbhub.js*
 webui/js/auth.js
 webui/js/branches.js
+webui/js/database-view.js
 webui/js/db-header.js
 webui/js/markdown-editor.js
 

common/postgresql.go

@@ -585,7 +585,7 @@ func DBDetails(DB *SQLiteDBinfo, loggedInUser, dbOwner, dbName, commitID string)
 	dbQuery := `
 			SELECT db.date_created, db.last_modified, db.watchers, db.stars, db.discussions, db.merge_requests,
 				$3::text AS commit_id, db.commit_list->$3::text->'tree'->'entries'->0 AS db_entry, db.branches,
-				db.release_count, db.contributors, coalesce(db.one_line_description, 'No description'),
+				db.release_count, db.contributors, coalesce(db.one_line_description, ''),
 				coalesce(db.full_description, 'No full description'), coalesce(db.default_table, ''), db.public,
 				coalesce(db.source_url, ''), db.tags, coalesce(db.default_branch, ''), db.live_db,
 				coalesce(db.live_node, '')
@@ -1329,8 +1329,8 @@ func DiscussionComments(dbOwner, dbName string, discID, comID int) (list []Discu
 // FlushViewCount periodically flushes the database view count from Memcache to PostgreSQL
 func FlushViewCount() {
 	type dbEntry struct {
-		Owner  string
-		Name   string
+		Owner string
+		Name  string
 	}
 
 	// Log the start of the loop
@@ -2970,7 +2970,7 @@ func RenameDatabase(userName, dbName, newName string) error {
 
 	// Log the rename
 	log.Printf("Database renamed from '%s/%s' to '%s/%s'\n", SanitiseLogString(userName), SanitiseLogString(dbName),
-		   SanitiseLogString(userName),SanitiseLogString(newName))
+		SanitiseLogString(userName), SanitiseLogString(newName))
 	return nil
 }
 

common/sqlite.go

@@ -748,7 +748,7 @@ func ReadSQLiteDBCols(sdb *sqlite.Conn, dbTable, sortCol, sortDir string, ignore
 	}
 
 	// Execute the query and retrieve the data
-	_, _, dataRows, err = SQLiteRunQuery(sdb, QuerySourceWebUI, dbQuery, ignoreBinary, ignoreNull)
+	_, _, dataRows, err = SQLiteRunQuery(sdb, QuerySourceAPI, dbQuery, ignoreBinary, ignoreNull)
 	if err != nil {
 		return dataRows, err
 	}

common/types.go

@@ -64,8 +64,7 @@ const MinioFolderChars = 6
 type QuerySource int
 
 const (
-	QuerySourceWebUI QuerySource = iota
-	QuerySourceDB4S
+	QuerySourceDB4S QuerySource = iota
 	QuerySourceVisualisation
 	QuerySourceAPI
 	QuerySourceInternal

cypress/e2e/1-webui/database.cy.js

@@ -123,17 +123,17 @@ describe('database page', () => {
 
   // Table/view dropdown
   it('Table/view dropdown', () => {
-    cy.get('[data-cy="tabledropdown"]').click()
-    cy.get('[data-cy="row-Constituency_Turnout_Information"]').click()
-    cy.get('[data-cy="col-Constituency_Name"]').should('contain', 'Constituency_Name')
+    cy.get('[name="viewtable"]').parent('.react-dropdown-select').click()
+    cy.get('[name="viewtable"]').siblings('.react-dropdown-select-dropdown').find('.react-dropdown-select-item').contains('Constituency_Turnout_Information').click()
+    cy.get('[name="viewtable"]').should('have.value', 'Constituency_Turnout_Information')
   })
 
   // Branch dropdown
   it('Branch dropdown', () => {
-    cy.get('[data-cy="branchname"]').should('contain.text', 'main')
-    cy.get('[data-cy="branchdropdown"]').click()
-    cy.get('[data-cy="branch-stuff"]').click()
-    cy.get('[data-cy="branchname"]').should('contain.text', 'stuff')
+    cy.get('[name="viewbranch"]').should('have.value', 'main')
+    cy.get('[name="viewbranch"]').parent('.react-dropdown-select').click()
+    cy.get('[name="viewbranch"]').siblings('.react-dropdown-select-dropdown').find('.react-dropdown-select-item').contains('stuff').click()
+    cy.get('[name="viewbranch"]').should('have.value', 'stuff')
   })
 
   // New Merge Request button
@@ -207,57 +207,57 @@ describe('database page', () => {
 
   // Click on column header (sort ascending)
   it('Click on column header - 1st time', () => {
-    cy.get('[data-cy="col-Candidate_First_Pref_Votes"]').click()
-    cy.get('[data-cy="datarow-Candidate_First_Pref_Votes"]').should('contain', '27')
+    cy.get('.rdg-header-row').find('span').contains('Candidate_First_Pref_Votes').click()
+    cy.get('.rdg-row').first().find('.rdg-cell').first().should('contain', '27')
   })
 
   // Click on column header twice (sort descending)
   it('Click on column header - 2nd time', () => {
-    cy.get('[data-cy="col-Candidate_First_Pref_Votes"]').click()
-    cy.get('[data-cy="col-Candidate_First_Pref_Votes"]').click()
-    cy.get('[data-cy="datarow-Candidate_First_Pref_Votes"]').should('contain', '10258')
+    cy.get('.rdg-header-row').find('span').contains('Candidate_First_Pref_Votes').click()
+    cy.get('.rdg-header-row').find('span').contains('Candidate_First_Pref_Votes').click()
+    cy.get('.rdg-row').first().find('.rdg-cell').first().should('contain', '10258')
   })
 
   // Click on page down button
   it('Page down button', () => {
     // Initial sort to guarantee a stable order
-    cy.get('[data-cy="col-Candidate_First_Pref_Votes"]').click()
+    cy.get('.rdg-header-row').find('span').contains('Candidate_First_Pref_Votes').click()
 
     // Click the button we're testing
     cy.get('[data-cy="pgdnbtn"]').click()
-    cy.get('[data-cy="datarow-Candidate_First_Pref_Votes"]').should('contain', '85')
+    cy.get('.rdg-row').first().find('.rdg-cell').first().should('contain', '85')
   })
 
   // Click on "go to the last page" button
   it('Last page button', () => {
     // Initial sort to guarantee a stable order
-    cy.get('[data-cy="col-Candidate_First_Pref_Votes"]').click()
+    cy.get('.rdg-header-row').find('span').contains('Candidate_First_Pref_Votes').click()
 
     // Click the button we're testing
     cy.get('[data-cy="lastpgbtn"]').click()
-    cy.get('[data-cy="datarow-Candidate_First_Pref_Votes"]').should('contain', '8881')
+    cy.get('.rdg-row').first().find('.rdg-cell').first().should('contain', '8881')
   })
 
   // Click on page up button
   it('Page up button', () => {
     // Initial sort to guarantee a stable order
-    cy.get('[data-cy="col-Candidate_First_Pref_Votes"]').click()
+    cy.get('.rdg-header-row').find('span').contains('Candidate_First_Pref_Votes').click()
 
     // Click the button we're testing
     cy.get('[data-cy="lastpgbtn"]').click()
     cy.get('[data-cy="pgupbtn"]').click()
-    cy.get('[data-cy="datarow-Candidate_First_Pref_Votes"]').should('contain', '7786')
+    cy.get('.rdg-row').first().find('.rdg-cell').first().should('contain', '7786')
   })
 
   // Click on "go to the first page" button
   it('First page button', () => {
     // Initial sort to guarantee a stable order
-    cy.get('[data-cy="col-Candidate_First_Pref_Votes"]').click()
+    cy.get('.rdg-header-row').find('span').contains('Candidate_First_Pref_Votes').click()
 
     // Click the button we're testing
     cy.get('[data-cy="lastpgbtn"]').click()
     cy.get('[data-cy="firstpgbtn"]').click()
-    cy.get('[data-cy="datarow-Candidate_First_Pref_Votes"]').should('contain', '27')
+    cy.get('.rdg-row').first().find('.rdg-cell').first().should('contain', '27')
   })
 
   // Readme contents

cypress/e2e/1-webui/database_sharing.cy.js

@@ -1,3 +1,5 @@
+let waitTime = 250;
+
 describe('database sharing', () => {
   before(() => {
     // Seed data
@@ -16,6 +18,7 @@ describe('database sharing', () => {
     cy.get('[data-cy="sharedropdown-third"]').click()
     cy.get('[data-cy="sharerw-third"]').click({force: true})
     cy.get('[data-cy="savebtn"]').click()
+    cy.wait(waitTime)
 
     // Upload the test database to the user "first", plus setup some useful database sharing
     cy.request("/x/test/switchfirst")
@@ -35,6 +38,7 @@ describe('database sharing', () => {
     cy.get('[data-cy="sharedropdown-third"]').click()
     cy.get('[data-cy="sharero-third"]').click()
     cy.get('[data-cy="savebtn"]').click()
+    cy.wait(waitTime)
 
     // Upload the test database to the user "second", plus setup some useful database sharing
     cy.request("/x/test/switchsecond")
@@ -54,6 +58,7 @@ describe('database sharing', () => {
     cy.get('[data-cy="sharedropdown-first"]').click()
     cy.get('[data-cy="sharero-first"]').click()
     cy.get('[data-cy="savebtn"]').click()
+    cy.wait(waitTime)
 
     // Upload the test database to the user "third", plus setup some useful database sharing
     cy.request("/x/test/switchthird")
@@ -73,6 +78,7 @@ describe('database sharing', () => {
     cy.get('[data-cy="sharedropdown-second"]').click()
     cy.get('[data-cy="sharero-second"]').click()
     cy.get('[data-cy="savebtn"]').click()
+    cy.wait(waitTime)
 
     // Switch back to the default user
     cy.request("/x/test/switchdefault")

cypress/e2e/1-webui/live_execute_sql.cy.js

@@ -94,8 +94,8 @@ describe('live execute', () => {
   it('"Execute SQL" button', () => {
     // Load the data view page, and ensure the view we're about to remove is present
     cy.visit('/default/Join Testing with index.sqlite')
-    cy.get('[data-cy="tabledropdown"]').click()
-    cy.get('[data-cy="row-joinedView"]').should('exist')
+    cy.get('[name="viewtable"]').parent('.react-dropdown-select').click()
+    cy.get('[name="viewtable"]').siblings('.react-dropdown-select-dropdown').find('.react-dropdown-select-item').contains('joinedView').should('exist')
 
     // Remove the view using the Execute SQL button
     cy.visit('/exec/default/Join Testing with index.sqlite')
@@ -106,8 +106,8 @@ describe('live execute', () => {
 
     // Verify the view has been removed
     cy.visit('/default/Join Testing with index.sqlite')
-    cy.get('[data-cy="tabledropdown"]').click()
-    cy.get('[data-cy="row-joinedView"]').should('not.exist')
+    cy.get('[name="viewtable"]').parent('.react-dropdown-select').click()
+    cy.get('[name="viewtable"]').siblings('.react-dropdown-select-dropdown').find('.react-dropdown-select-item').contains('joinedView').should('not.exist')
   })
 
   // "Delete" button
@@ -137,4 +137,4 @@ describe('live execute', () => {
     // Switch back to the default user
     cy.request('/x/test/switchdefault')
   })
-})
+})

cypress/e2e/1-webui/settings.cy.js

@@ -1,3 +1,5 @@
+let waitTime = 250;
+
 describe('settings', () => {
   before(() => {
     // Seed data
@@ -27,7 +29,7 @@ describe('settings', () => {
    // One line description
    it('one line description', () => {
      cy.visit('settings/default/Assembly%20Election%202017.sqlite')
-     cy.get('[data-cy="onelinedescinput"]').should('have.value', 'No description')
+     cy.get('[data-cy="onelinedescinput"]').should('have.value', '')
      cy.get('[data-cy="onelinedescinput"]').type('{selectall}{backspace}Some new description')
      cy.get('[data-cy="savebtn"]').click()
      cy.get('[data-cy="settingslink"]').click()
@@ -111,6 +113,7 @@ describe('settings', () => {
     // Set the database to Private
     cy.get('[data-cy="private"]').click()
     cy.get('[data-cy="savebtn"]').click()
+    cy.wait(waitTime)
 
     // Ensure the database cannot be seen by the other users
     cy.request("/x/test/switchfirst")

package.json

@@ -4,7 +4,9 @@
     "babel-preset-react-app": "^10.0.1",
     "cypress": "^12.3.0",
     "react": "^18.2.0",
+    "react-data-grid": "^7.0.0-beta.28",
     "react-dom": "^18.2.0",
+    "react-dropdown-select": "^4.9.3",
     "react-modal-image": "^2.6.0",
     "react-tabs": "^6.0.0",
     "yarn": "^1.22.19"

webui/js/app.js

@@ -5,6 +5,7 @@ import ModalImage from "react-modal-image";
 
 import Auth from "./auth";
 import BranchesTable from "./branches";
+import DatabaseView from "./database-view";
 import DbHeader from "./db-header";
 import MarkdownEditor from "./markdown-editor";
 
@@ -32,6 +33,14 @@ import MarkdownEditor from "./markdown-editor";
 	}
 }
 
+{
+	const rootNode = document.getElementById("database-view");
+	if (rootNode) {
+		const root = ReactDOM.createRoot(rootNode);
+		root.render(React.createElement(DatabaseView));
+	}
+}
+
 {
 	document.querySelectorAll(".markdown-editor").forEach((rootNode) => {
 		const editorId = rootNode.dataset.id;