[KED-2997] Create rename run and edit notes UI behavior

src/apollo/queries.js

@@ -20,6 +20,7 @@ export const GET_RUN_METADATA = gql`
       author
       gitBranch
       gitSha
+      id
       notes
       runCommand
       timestamp

src/components/experiment-tracking/details/index.js

@@ -1,16 +1,26 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { useApolloQuery } from '../../../apollo/utils';
 import classnames from 'classnames';
 import RunMetadata from '../run-metadata';
 import RunDataset from '../run-dataset';
+import RunDetailsModal from '../run-details-modal';
 import {
   GET_RUN_METADATA,
   GET_RUN_TRACKING_DATA,
 } from '../../../apollo/queries';
 
 import './details.css';
 
-const Details = ({ selectedRuns, sidebarVisible }) => {
+const Details = ({
+  enableComparisonView,
+  selectedRuns,
+  setShowRunDetailsModal,
+  showRunDetailsModal,
+  sidebarVisible,
+  theme,
+}) => {
+  const [selectedRunMetadata, setSelectedRunMetadata] = useState(null);
+  const [selectedMetadataRunId, setSelectedMetadataRunId] = useState(null);
   const { data: { runMetadata } = [], error } = useApolloQuery(
     GET_RUN_METADATA,
     {
@@ -25,20 +35,50 @@ const Details = ({ selectedRuns, sidebarVisible }) => {
       variables: { runIds: selectedRuns, showDiff: false },
     });
 
+  useEffect(() => {
+    if (!runMetadata) {
+      return;
+    }
+
+    if (!enableComparisonView) {
+      const metadata = runMetadata.find((run) => run.id === selectedRuns[0]);
+
+      setSelectedRunMetadata(metadata);
+    } else {
+      const metadata = runMetadata.find(
+        (run) => run.id === selectedMetadataRunId
+      );
+
+      setSelectedRunMetadata(metadata);
+    }
+  }, [enableComparisonView, runMetadata, selectedMetadataRunId, selectedRuns]);
+
+  const isSingleRun = runMetadata?.length === 1 ? true : false;
+
   if (error || trackingError) {
     return null;
   }
 
-  const isSingleRun = runMetadata && runMetadata.length === 1 ? true : false;
-
   return (
     <>
+      <RunDetailsModal
+        onClose={setShowRunDetailsModal}
+        runs={runMetadata}
+        selectedRunMetadata={selectedRunMetadata}
+        theme={theme}
+        visible={showRunDetailsModal}
+      />
       <div
         className={classnames('kedro', 'details-mainframe', {
           'details-mainframe--sidebar-visible': sidebarVisible,
         })}
       >
-        <RunMetadata isSingleRun={isSingleRun} runs={runMetadata} />
+        <RunMetadata
+          isSingleRun={isSingleRun}
+          runs={runMetadata}
+          setSelectedMetadataRunId={setSelectedMetadataRunId}
+          setShowRunDetailsModal={setShowRunDetailsModal}
+        />
         <RunDataset isSingleRun={isSingleRun} trackingData={runTrackingData} />
       </div>
     </>

src/components/experiment-tracking/experiment-primary-toolbar/index.js

@@ -1,15 +1,27 @@
 import React from 'react';
+import IconButton from '../../icon-button';
+import PencilIcon from '../../icons/pencil';
+
 import PrimaryToolbar from '../../primary-toolbar';
 
 export const ExperimentPrimaryToolbar = ({
   sidebarVisible,
   setSidebarVisible,
+  showRunDetailsModal,
 }) => {
   return (
     <PrimaryToolbar
       visible={{ sidebar: sidebarVisible }}
       onToggleSidebar={setSidebarVisible}
-    />
+    >
+      <IconButton
+        ariaLive="Edit run details"
+        className={'pipeline-menu-button--labels'}
+        icon={PencilIcon}
+        labelText={`Edit details`}
+        onClick={() => showRunDetailsModal(true)}
+      />
+    </PrimaryToolbar>
   );
 };
 

src/components/experiment-tracking/run-details-modal/index.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import Button from '@quantumblack/kedro-ui/lib/components/button';
+import Modal from '@quantumblack/kedro-ui/lib/components/modal';
+import TextArea from '../../ui/input';
+
+import '../../settings-modal/settings-modal.css';
+import './run-details-modal.css';
+
+const RunDetailsModal = ({ onClose, selectedRunMetadata, theme, visible }) => {
+  return (
+    <div className="pipeline-settings-modal pipeline-settings-modal--experiment-tracking">
+      <Modal
+        onClose={() => onClose(false)}
+        theme={theme}
+        title="Edit run details"
+        visible={visible}
+      >
+        <div className="pipeline-settings-modal__content pipeline-settings-modal__content--short">
+          <div className="pipeline-settings-modal__header">
+            <div className="pipeline-settings-modal__name">Run name</div>
+          </div>
+          <TextArea defaultValue={selectedRunMetadata?.title} size="large" />
+        </div>
+        <div className="pipeline-settings-modal__content pipeline-settings-modal__content--short">
+          <div className="pipeline-settings-modal__header">
+            <div className="pipeline-settings-modal__name">
+              Notes (this is searchable)
+            </div>
+          </div>
+          <TextArea
+            characterLimit={500}
+            defaultValue={selectedRunMetadata?.notes || 'Add here'}
+            size="small"
+          />
+        </div>
+        <div className="run-details-modal-button-wrapper">
+          <Button
+            mode="secondary"
+            onClick={() => onClose(false)}
+            size="small"
+            theme={theme}
+          >
+            Cancel
+          </Button>
+          <Button size="small" theme={theme}>
+            Apply changes
+          </Button>
+        </div>
+      </Modal>
+    </div>
+  );
+};
+
+export default RunDetailsModal;

src/components/experiment-tracking/run-details-modal/run-details-modal.scss

@@ -0,0 +1,14 @@
+.pipeline-settings-modal--experiment-tracking .pipeline-settings-modal__name {
+  margin-top: 0;
+}
+
+.run-details-modal-button-wrapper {
+  align-items: baseline;
+  display: flex;
+  justify-content: flex-end;
+  width: 100%;
+
+  .kui-button:first-of-type {
+    margin-right: 20px;
+  }
+}

src/components/experiment-tracking/run-details-modal/run-details-modal.test.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import RunDetailsModal from './index';
+import Adapter from 'enzyme-adapter-react-16';
+import { configure, mount, shallow } from 'enzyme';
+
+configure({ adapter: new Adapter() });
+
+describe('SettingsModal', () => {
+  it('renders without crashing', () => {
+    const wrapper = shallow(<RunDetailsModal visible />);
+
+    expect(
+      wrapper.find('.pipeline-settings-modal--experiment-tracking').length
+    ).toBe(1);
+  });
+
+  it('modal closes when X button is clicked', () => {
+    const setVisible = jest.fn();
+    const wrapper = mount(<RunDetailsModal onClose={() => setVisible(true)} />);
+    const onClick = jest.spyOn(React, 'useState');
+
+    onClick.mockImplementation((visible) => [visible, setVisible]);
+    const closeButton = wrapper.find(
+      '.pipeline-settings-modal--experiment-tracking .kui-icon--close'
+    );
+    closeButton.simulate('click');
+    expect(
+      wrapper.find(
+        '.pipeline-settings-modal--experiment-tracking .kui-modal--visible'
+      ).length
+    ).toBe(0);
+  });
+});

src/components/experiment-tracking/run-metadata/index.js

@@ -8,7 +8,12 @@ import './run-metadata.css';
 // returned by the graphql endpoint for empty values ( not null or undefined )
 const sanitiseEmptyValue = (value) => (value !== '' ? value : '-');
 
-const RunMetadata = ({ isSingleRun, runs = [] }) => {
+const RunMetadata = ({
+  isSingleRun,
+  runs = [],
+  setSelectedMetadataRunId,
+  setShowRunDetailsModal,
+}) => {
   let initialState = {};
   for (let i = 0; i < runs.length; i++) {
     initialState[i] = false;
@@ -20,6 +25,11 @@ const RunMetadata = ({ isSingleRun, runs = [] }) => {
     setToggleNotes({ ...toggleNotes, [index]: !toggleNotes[index] });
   };
 
+  const onTitleOrNoteClick = (id) => {
+    setSelectedMetadataRunId(id);
+    setShowRunDetailsModal(true);
+  };
+
   return (
     <div
       className={classnames('details-metadata', {
@@ -34,20 +44,27 @@ const RunMetadata = ({ isSingleRun, runs = [] }) => {
             className={classnames('details-metadata__run', {
               'details-metadata__run--single': isSingleRun,
             })}
-            key={run.title + i} // note: this should revert back to use gitSha once the BE returns the actual value
+            key={run.title + i} // Note: change to gitSha once BE returns the value
           >
             <table className="details-metadata__table">
               <tbody>
                 {isSingleRun ? (
                   <tr>
-                    <td className="details-metadata__title" colSpan="2">
+                    <td
+                      className="details-metadata__title"
+                      colSpan="2"
+                      onClick={() => onTitleOrNoteClick(run.id)}
+                    >
                       {sanitiseEmptyValue(run.title)}
                     </td>
                   </tr>
                 ) : (
                   <tr>
                     {i === 0 ? <td></td> : null}
-                    <td className="details-metadata__title">
+                    <td
+                      className="details-metadata__title"
+                      onClick={() => onTitleOrNoteClick(run.id)}
+                    >
                       {sanitiseEmptyValue(run.title)}
                     </td>
                   </tr>
@@ -79,9 +96,12 @@ const RunMetadata = ({ isSingleRun, runs = [] }) => {
                   <td>
                     <p
                       className="details-metadata__notes"
+                      onClick={() => onTitleOrNoteClick(run.id)}
                       style={toggleNotes[i] ? { display: 'block' } : null}
                     >
-                      {sanitiseEmptyValue(run.notes)}
+                      {run.notes !== ''
+                        ? run.notes
+                        : '- Add notes here (Notes are searchable)'}
                     </p>
                     {run.notes.length > 100 ? (
                       <button

src/components/experiment-tracking/run-metadata/run-metadata.scss

@@ -32,7 +32,7 @@
   font-size: 1.4em;
   padding-bottom: 16px;
   vertical-align: top;
-  word-wrap: break-word; // For breaking potential long text, such as as git branch, title, etc
+  word-wrap: break-word; // For breaking potential long text, such as as git branch, title, etc.
 
   &:first-of-type {
     width: 230px;
@@ -56,17 +56,33 @@
 }
 
 td.details-metadata__title {
+  cursor: pointer;
   font-weight: 600;
   font-size: 2em;
+  text-decoration-color: transparent;
+  transition: text-decoration-color 0.2s ease;
+
+  &:hover {
+    text-decoration: underline;
+    text-decoration-color: var(--color-text);
+  }
 }
 
 .details-metadata__notes {
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
+  cursor: pointer;
   display: -webkit-box;
   margin: 0;
   overflow: hidden;
   text-overflow: ellipsis;
+  text-decoration-color: transparent;
+  transition: text-decoration-color 0.2s ease;
+
+  &:hover {
+    text-decoration: underline;
+    text-decoration-color: var(--color-text);
+  }
 }
 
 .details-metadata__show-more.kedro {

src/components/experiment-tracking/runs-list-card/runs-list-card.scss

@@ -9,7 +9,7 @@
 
   &--active {
     background: var(--color-run-list-hover);
-    box-shadow: -1px 0px 0px inset #{$color-accent-blue};
+    box-shadow: -1px 0px 0px inset $color-accent-blue;
   }
 
   &--disabled {
@@ -48,7 +48,7 @@
   }
 
   &--active {
-    fill: #{$color-accent-blue};
+    fill: $color-accent-blue;
   }
 }