Remove writing to SQLite in Experiment Tracking (Frontend) (#1581)

* Remove writing to SQLite in Experiment Tracking in frontend * Test modified as per changes * Rebuild for canvas node error * Rebuild for canvas node error * Rebuild for canvas node error * Build lint error fix * Rebuild for canvas node error * Build lint error fix * Build lint error fix * Cypress tests fix * Code review suggestions added * Code review suggestions added * select bookmarked run on first load * Reset modal values on close. * Add Read the Docs configuration Signed-off-by: Juan Luis Cano Rodríguez <[email protected]> * Circle CI build error fix --------- Signed-off-by: Juan Luis Cano Rodríguez <[email protected]> Co-authored-by: Tynan DeBold <[email protected]> Co-authored-by: Juan Luis Cano Rodríguez <[email protected]>
kedro-org · Oct 20, 2023 · cbcc1e7 · cbcc1e7
1 parent 08a4562
commit cbcc1e7
Show file tree

Hide file tree

Showing 24 changed files with 410 additions and 299 deletions.
diff --git a/cypress/tests/ui/experiment-tracking/experiment-tracking.cy.js b/cypress/tests/ui/experiment-tracking/experiment-tracking.cy.js
@@ -7,9 +7,6 @@ describe('Experiment Tracking', () => {
     it('verifies that users can edit the run name, apply changes, and see the changes reflected from the overview page. #TC-43', () => {
       const modifiedRunTitleText = '2022-12-25T21.05.59.296Z';
 
-      // Mutations
-      cy.__interceptGql__('updateRunDetails', 'updateRunTitle');
-
       // Alias
       cy.get('.details-metadata__title').first().as('metadataTitle');
       cy.get('[data-test="Apply changes and close in Run Details Modal"]').as(
@@ -34,7 +31,6 @@ describe('Experiment Tracking', () => {
       });
 
       cy.get('.modal--visible').should('not.exist');
-      cy.wait('@updateRunTitle').its('response.statusCode').should('eq', 200);
       cy.get('.runs-list-card__title')
         .first()
         .should('have.text', modifiedRunTitleText);
@@ -44,9 +40,6 @@ describe('Experiment Tracking', () => {
     it('verifies that users can add notes to the run, apply changes, and see the changes reflected from the overview page. #TC-44', () => {
       const modifiedRunNotesText = 'Test';
 
-      // Mutations
-      cy.__interceptGql__('updateRunDetails', 'updateRunNotes');
-
       // Alias
       cy.get('.details-metadata__notes').as('metadataNotes');
       cy.get('[data-test="Apply changes and close in Run Details Modal"]').as(
@@ -71,7 +64,6 @@ describe('Experiment Tracking', () => {
       });
 
       cy.get('.modal--visible').should('not.exist');
-      cy.wait('@updateRunNotes').its('response.statusCode').should('eq', 200);
       cy.get('@metadataNotes').should('have.text', modifiedRunNotesText);
     });
   });

diff --git a/cypress/tests/ui/experiment-tracking/menu.cy.js b/cypress/tests/ui/experiment-tracking/menu.cy.js
@@ -17,8 +17,6 @@ describe('Experiment Tracking Menu', () => {
   });
 
   it('verifies that users can bookmark a run. #TC-35', () => {
-    // Mutations
-    cy.__interceptGql__('updateRunDetails', 'updateBookmark');
 
     // Alias
     cy.get('.runs-list__accordion-header > .accordion__title').as(
@@ -34,7 +32,6 @@ describe('Experiment Tracking Menu', () => {
     cy.get('.runs-list-card__bookmark').first().click();
 
     // Assert after action
-    cy.wait('@updateBookmark').its('response.statusCode').should('eq', 200);
     cy.get('@accordionTitle').first().should('contains.text', 'Bookmarked');
     cy.get('@accordionTitle').should('have.length', 2);
     cy.get('.runs-list-card__bookmark--solid').should('exist');

diff --git a/cypress/tests/ui/experiment-tracking/panel.cy.js b/cypress/tests/ui/experiment-tracking/panel.cy.js
@@ -21,9 +21,6 @@ describe('Experiment Tracking Primary Toolbar', () => {
   it('verifies that users can bookmark a run using the bookmark button in the options panel. #TC-39', () => {
     const runGitShaText = '5f81cb5';
 
-    // Mutations
-    cy.__interceptGql__('updateRunDetails', 'updateBookmark');
-
     // Alias
     cy.get('[data-test="btnToggleBookmark"]').as('btnToggleBookmark');
     cy.get('.runs-list__accordion-header > .accordion__title').as(
@@ -41,7 +38,6 @@ describe('Experiment Tracking Primary Toolbar', () => {
     cy.get('@btnToggleBookmark').click();
 
     // Assert after action
-    cy.wait('@updateBookmark').its('response.statusCode').should('eq', 200);
     cy.get('@accordionTitle').first().should('contains.text', 'Bookmarked');
     cy.get('@accordionTitle').should('have.length', 2);
     cy.get('@btnToggleBookmark').should(
@@ -60,9 +56,6 @@ describe('Experiment Tracking Primary Toolbar', () => {
     const modifiedRunTitleText = '2022-12-25T21.05.59.296Z';
     const modifiedRunNotesText = 'Test';
 
-    // Mutations
-    cy.__interceptGql__('updateRunDetails', 'updateRunContent');
-
     // Alias
     cy.get('[data-test="btnEditRunDetails"]').as('btnEditRunDetails');
     cy.get('[data-test="Apply changes and close in Run Details Modal"]').as(
@@ -100,7 +93,6 @@ describe('Experiment Tracking Primary Toolbar', () => {
     });
 
     cy.get('.modal--visible').should('not.exist');
-    cy.wait('@updateRunContent').its('response.statusCode').should('eq', 200);
     cy.get('.runs-list-card__title')
       .first()
       .should('have.text', modifiedRunTitleText);

diff --git a/package-lock.json b/package-lock.json
diff --git a/src/actions/index.js b/src/actions/index.js
@@ -273,3 +273,48 @@ export function toggleHoveredFocusMode(hoveredFocusMode) {
     hoveredFocusMode,
   };
 }
+
+export const TOGGLE_BOOKMARK = 'TOGGLE_BOOKMARK';
+
+/**
+ * Toggle bookmark of Run
+ * @param {boolean} bookmark
+ * @param {string} runId
+ */
+export function toggleBookmark(bookmark, runId) {
+  return {
+    type: TOGGLE_BOOKMARK,
+    bookmark,
+    runId,
+  };
+}
+
+export const UPDATE_RUN_TITLE = 'UPDATE_RUN_TITLE';
+
+/**
+ * Update Run title
+ * @param {String} title
+ * @param {string} runId
+ */
+export function updateRunTitle(title, runId) {
+  return {
+    type: UPDATE_RUN_TITLE,
+    title,
+    runId,
+  };
+}
+
+export const UPDATE_RUN_NOTES = 'UPDATE_RUN_NOTES';
+
+/**
+ * Update Run Notes
+ * @param {String} notes
+ * @param {string} runId
+ */
+export function updateRunNotes(notes, runId) {
+  return {
+    type: UPDATE_RUN_NOTES,
+    notes,
+    runId,
+  };
+}
diff --git a/src/apollo/mutations.js b/src/apollo/mutations.js
diff --git a/src/apollo/queries.js b/src/apollo/queries.js
@@ -4,11 +4,8 @@ import gql from 'graphql-tag';
 export const GET_RUNS = gql`
   query getRunsList {
     runsList {
-      bookmark
       gitSha
       id
-      title
-      notes
     }
   }
 `;
@@ -19,12 +16,9 @@ export const GET_RUN_DATA = gql`
     runMetadata(runIds: $runIds) {
       id
       author
-      bookmark
       gitBranch
       gitSha
-      notes
       runCommand
-      title
     }
     plots: runTrackingData(runIds: $runIds, showDiff: $showDiff, group: PLOT) {
       ...trackingDatasetFields

diff --git a/src/components/experiment-tracking/experiment-primary-toolbar/experiment-primary-toolbar.js b/src/components/experiment-tracking/experiment-primary-toolbar/experiment-primary-toolbar.js
@@ -1,12 +1,13 @@
 import React from 'react';
-import { useUpdateRunDetails } from '../../../apollo/mutations';
+import { connect } from 'react-redux';
 import IconButton from '../../ui/icon-button';
 import PencilIcon from '../../icons/pencil';
 import BookmarkIcon from '../../icons/bookmark';
 import ExportIcon from '../../icons/export';
 import BookmarkStrokeIcon from '../../icons/bookmark-stroke';
 import PrimaryToolbar from '../../primary-toolbar';
 import ShowChangesIcon from '../../icons/show-changes';
+import { toggleBookmark } from '../../../actions';
 
 import {
   SlideFromLeftToRight,
@@ -26,14 +27,13 @@ export const ExperimentPrimaryToolbar = ({
   showRunDetailsModal,
   sidebarVisible,
   setShowRunExportModal,
+  onToggleBookmark,
+  runsMetadata,
 }) => {
-  const { updateRunDetails } = useUpdateRunDetails();
+  const bookmark = runsMetadata[selectedRunData?.id]?.bookmark;
 
   const toggleBookmark = () => {
-    updateRunDetails({
-      runId: selectedRunData.id,
-      runInput: { bookmark: !selectedRunData?.bookmark },
-    });
+    onToggleBookmark(!bookmark, selectedRunData?.id);
   };
 
   return (
@@ -73,16 +73,12 @@ export const ExperimentPrimaryToolbar = ({
         {!enableComparisonView && (
           <>
             <IconButton
-              active={selectedRunData?.bookmark}
+              active={bookmark}
               ariaLabel="Toggle run bookmark"
               className={'pipeline-menu-button--labels'}
               dataTest="btnToggleBookmark"
-              icon={
-                selectedRunData?.bookmark ? BookmarkIcon : BookmarkStrokeIcon
-              }
-              labelText={`${
-                selectedRunData?.bookmark ? 'Unbookmark' : 'Bookmark'
-              }`}
+              icon={bookmark ? BookmarkIcon : BookmarkStrokeIcon}
+              labelText={`${bookmark ? 'Unbookmark' : 'Bookmark'}`}
               onClick={() => toggleBookmark()}
             />
             <IconButton
@@ -108,4 +104,17 @@ export const ExperimentPrimaryToolbar = ({
   );
 };
 
-export default ExperimentPrimaryToolbar;
+export const mapStateToProps = (state) => ({
+  runsMetadata: state.runsMetadata,
+});
+
+export const mapDispatchToProps = (dispatch) => ({
+  onToggleBookmark: (bookmark, runId) => {
+    dispatch(toggleBookmark(bookmark, runId));
+  },
+});
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(ExperimentPrimaryToolbar);