Merge pull request #547 from samvera-labs/search-flex

Use flexbox instead of grid to arrange transcript menu
samvera-labs · Jul 3, 2024 · c7367fd · c7367fd
2 parents ccb8109 + bfffed6
commit c7367fd
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 67 deletions.
diff --git a/src/components/Transcript/Transcript.test.js b/src/components/Transcript/Transcript.test.js
@@ -93,7 +93,7 @@ describe('Transcript component', () => {
           expect(screen.queryAllByTestId('transcript_text')[0]).toHaveTextContent(
             '[music]'
           );
-          const transcriptItem = screen.queryAllByTestId('transcript_item')[0];
+          expect(screen.queryByTestId('transcript-machinegen-msg')).not.toBeInTheDocument();
         });
       });
 
@@ -175,6 +175,7 @@ describe('Transcript component', () => {
           expect(screen.queryByTestId('transcript_content_1')).toBeInTheDocument();
           expect(screen.queryAllByTestId('transcript_time')).toHaveLength(3);
           expect(screen.queryAllByTestId('transcript_text')).toHaveLength(3);
+          expect(screen.queryByTestId('transcript-machinegen-msg')).not.toBeInTheDocument();
         });
       });
 
@@ -255,6 +256,7 @@ describe('Transcript component', () => {
           expect(screen.queryByTestId('transcript_content_1')).toBeInTheDocument();
           expect(screen.queryAllByTestId('transcript_time')).toHaveLength(3);
           expect(screen.queryAllByTestId('transcript_text')).toHaveLength(4);
+          expect(screen.queryByTestId('transcript-machinegen-msg')).not.toBeInTheDocument();
         });
       });
 
@@ -366,7 +368,7 @@ describe('Transcript component', () => {
               canvasId: 0,
               items: [
                 {
-                  title: 'MS doc transcript',
+                  title: 'MS doc transcript (machine-generated)',
                   url: 'http://example.com/transcript.doc',
                 },
               ],
@@ -405,6 +407,10 @@ describe('Transcript component', () => {
           expect(parseTranscriptMock).toHaveBeenCalled();
           expect(screen.queryByTestId('transcript_nav')).toBeInTheDocument();
           expect(screen.queryByTestId('transcript_content_3')).toBeInTheDocument();
+          expect(screen.queryByTestId('transcript-machinegen-msg')).toBeInTheDocument();
+          expect(screen.getByTestId('transcript-machinegen-msg')).toHaveTextContent(
+            "Machine-generated transcript may contain errors."
+          );
           console.error = originalError;
         });
       });
@@ -417,7 +423,7 @@ describe('Transcript component', () => {
               canvasId: 0,
               items: [
                 {
-                  title: 'Plain text transcript',
+                  title: 'Plain text transcript (Machine Generated)',
                   url: 'http://example.com/transcript.txt',
                 },
               ],
@@ -454,6 +460,10 @@ describe('Transcript component', () => {
           expect(parseTranscriptMock).toHaveBeenCalled();
           expect(screen.queryByTestId('transcript_nav')).toBeInTheDocument();
           expect(screen.queryByTestId('transcript_content_2')).toBeInTheDocument();
+          expect(screen.queryByTestId('transcript-machinegen-msg')).toBeInTheDocument();
+          expect(screen.getByTestId('transcript-machinegen-msg')).toHaveTextContent(
+            "Machine-generated transcript may contain errors."
+          );
         });
       });
     });
@@ -938,6 +948,7 @@ describe('Transcript component', () => {
         expect(screen.queryAllByTestId('transcript_text')[0]).toHaveTextContent(
           '[music]'
         );
+        expect(screen.queryByTestId('transcript-machinegen-msg')).not.toBeInTheDocument();
       });
     });
 

diff --git a/src/components/Transcript/TranscriptMenu/TranscriptMenu.js b/src/components/Transcript/TranscriptMenu/TranscriptMenu.js
@@ -5,6 +5,8 @@ import TranscriptSearch from './TranscriptSearch';
 import { TRANSCRIPT_TYPES } from '@Services/transcript-parser';
 import './TranscriptMenu.scss';
 
+const MACHINE_GEN_MESSAGE = 'Machine-generated transcript may contain errors.';
+
 export const TranscriptMenu = ({
   showSearch,
   setAutoScrollEnabled,
@@ -17,7 +19,7 @@ export const TranscriptMenu = ({
   ...selectorProps
 }) => {
   const { transcriptInfo } = selectorProps;
-  const { tType } = transcriptInfo;
+  const { tType, isMachineGen } = transcriptInfo;
 
   return (
     <div className="ramp--transcript_menu">
@@ -31,37 +33,50 @@ export const TranscriptMenu = ({
         />
       )}
       <TranscriptSelector {...selectorProps} />
-      {tType === TRANSCRIPT_TYPES.timedText && (
-        <div
-          className="ramp--transcript_auto_scroll_check"
-          data-testid="transcript-auto-scroll-check"
-        >
-          <input
-            type="checkbox"
-            id="auto-scroll-check"
-            name="autoscrollcheck"
-            aria-checked={autoScrollEnabled}
-            title={searchQuery !== null
-              ? 'Auto-scroll is disabled when searching'
-              : ''
-            }
-            checked={autoScrollEnabled}
-            disabled={searchQuery !== null}
-            onChange={() => {
-              setAutoScrollEnabled(!autoScrollEnabled);
-            }}
-          />
-          <label
-            htmlFor="auto-scroll-check"
-            title={searchQuery !== null
-              ? 'Auto-scroll is disabled when searching'
-              : ''
-            }
+      <div className="ramp--transcript_menu-info">
+        {isMachineGen && (
+          <p
+            key="machine-gen-msg"
+            className="ramp--transcript_machine_generated"
+            data-testid="transcript-machinegen-msg"
           >
-            Auto-scroll with media
-          </label>
-        </div>
-      )}
+            {MACHINE_GEN_MESSAGE}
+          </p>
+        )
+        }
+        {tType === TRANSCRIPT_TYPES.timedText && (
+          <div
+            className="ramp--transcript_auto_scroll_check"
+            data-testid="transcript-auto-scroll-check"
+          >
+            <input
+              type="checkbox"
+              id="auto-scroll-check"
+              name="autoscrollcheck"
+              aria-checked={autoScrollEnabled}
+              title={searchQuery !== null
+                ? 'Auto-scroll is disabled when searching'
+                : ''
+              }
+              checked={autoScrollEnabled}
+              disabled={searchQuery !== null}
+              onChange={() => {
+                setAutoScrollEnabled(!autoScrollEnabled);
+              }}
+            />
+            <label
+              htmlFor="auto-scroll-check"
+              title={searchQuery !== null
+                ? 'Auto-scroll is disabled when searching'
+                : ''
+              }
+            >
+              Auto-scroll with media
+            </label>
+          </div>
+        )}
+
+      </div>
     </div>
   );
 };
@@ -74,4 +89,4 @@ TranscriptMenu.propTypes = {
   setAutoScrollEnabled: PropTypes.func.isRequired,
   ...TranscriptSelector.propTypes,
   ...TranscriptMenu.propTypes
-};
+};
diff --git a/src/components/Transcript/TranscriptMenu/TranscriptMenu.scss b/src/components/Transcript/TranscriptMenu/TranscriptMenu.scss
@@ -13,27 +13,20 @@
   padding: 0.5rem;
   border-color: $primaryLight;
   border-radius: 3px;
-  display: grid;
-  gap: 0.5rem 0.5rem;
-  grid-template-columns: 2fr minmax(max-content, 1fr);
-  grid-template-rows: auto;
-}
-
-
-.ramp--transcript_search_input {
-  grid-column: 1/2;
+  row-gap: 0.5em;
+  display: flex;
+  flex-direction: column;
 }
 
 .ramp--transcript_selector {
-  grid-column: 1 / 3;
   display: flex;
   gap: 0.5rem;
 }
 
-.ramp--transcript_search_navigator,
-.ramp--transcript_downloader,
-.ramp--transcript_auto_scroll_check {
-  grid-column: 2 / 3;
+.ramp--transcript_menu-info {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
 }
 
 .ramp--transcript_search_input input,

diff --git a/src/components/Transcript/TranscriptMenu/TranscriptSelector.js b/src/components/Transcript/TranscriptMenu/TranscriptSelector.js
@@ -2,8 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import TranscriptDownloader from './TranscriptDownloader';
 
-const MACHINE_GEN_MESSAGE = 'Machine-generated transcript may contain errors.';
-
 const TranscriptSelector = ({
   selectTranscript,
   transcriptData,
@@ -50,18 +48,6 @@ const TranscriptSelector = ({
         )}
       </div>
     ];
-
-    if (isMachineGen) {
-      result.push(
-        <p
-          key="machine-gen-msg"
-          className="ramp--transcript_machine_generated"
-          data-testid="transcript-machinegen-msg"
-        >
-          {MACHINE_GEN_MESSAGE}
-        </p>
-      );
-    }
     return result;
   } else {
     return null;

diff --git a/src/components/Transcript/TranscriptMenu/TranscriptSelector.test.js b/src/components/Transcript/TranscriptMenu/TranscriptSelector.test.js
@@ -65,7 +65,6 @@ describe('TranscriptSelector component', () => {
         screen.getByTestId('transcript-select-option')
       ).toBeInTheDocument();
       expect(screen.getByText('Transcript 1')).toBeInTheDocument();
-      expect(screen.queryByTestId('transcript-machinegen-msg')).not.toBeInTheDocument();
     });
 
     test('changes transcript on select', () => {
@@ -93,9 +92,6 @@ describe('TranscriptSelector component', () => {
     render(<TranscriptSelector {...updatedProps} />);
     expect(screen.getByTestId('transcript-selector')).toBeInTheDocument();
     expect(screen.getByTestId('transcript-downloader')).toBeInTheDocument();
-    expect(screen.getByTestId('transcript-machinegen-msg')).toHaveTextContent(
-      "Machine-generated transcript may contain errors."
-    );
   });
 
   test('with time synced transcript content', () => {