Closes # 2936 - Fix window close issue

web-ui/src/App.jsx

@@ -46,7 +46,7 @@ function SchemeToggle() {
 
 const theme = createTheme({
   cssVariables: {
-    colorSchemeSelector: 'data',
+    colorSchemeSelector: 'data'
   },
   colorSchemes: {
     light: {

web-ui/src/components/expand-more/ExpandMore.jsx

@@ -9,24 +9,20 @@ const ExpandMore = styled(props => {
       {props.children ? props.children : <ExpandMoreIcon />}
     </IconButton>
   );
-})(({
-  theme
-}) => ({
+})(({ theme }) => ({
   transform: 'rotate(180deg)',
   marginLeft: 'auto',
   transition: theme.transitions.create('transform', {
     duration: theme.transitions.duration.shortest
   }),
-  variants: [{
-    props: (
-      {
-        expand
+  variants: [
+    {
+      props: ({ expand }) => !expand,
+      style: {
+        transform: 'rotate(0deg)'
       }
-    ) => !expand,
-    style: {
-      transform: 'rotate(0deg)'
     }
-  }]
+  ]
 }));
 
 export default ExpandMore;

web-ui/src/components/notes/Note.jsx

@@ -100,7 +100,7 @@ const Notes = props => {
     }
 
     setNote(note => {
-        const newNote = { ...note, description: content };
+      const newNote = { ...note, description: content };
       updateNote(newNote, csrf);
       return newNote;
     });
@@ -125,32 +125,39 @@ const Notes = props => {
           </div>
         ) : (
           <>
-          <div style={{display:"none"}} data-testid="tiny-mce-checkin-notes" />
-          <Editor
-            apiKey="246ojmsp6c7qtnr9aoivktvi3mi5t7ywuf0vevn6wllfcn9e"
-            id="tiny-mce-checkin-notes"
-            value={note && note.description ? note.description : ''}
-            onEditorChange={handleNoteChange}
-            readOnly={
-              currentCheckin?.completed ||
-              note === undefined ||
-              Object.keys(note) === 0
-            }
-            init={{
-              promotion: false,
-              plugins: 'lists',
-              toolbar:
-                'undo redo | blocks | ' +
-                'bold italic underline strikethrough forecolor | alignleft aligncenter ' +
-                'alignright alignjustify | bullist numlist outdent indent | ' +
-                'removeformat | help',
-              skin: document.querySelector('[data-dark]') ? 'oxide-dark' : 'oxide',
-              content_css: document.querySelector('[data-dark]') ? 'dark' : 'default'
-            }}
-            tinymceScriptSrc={
-              import.meta.env.VITE_APP_API_URL + '/js/tinymce/tinymce.min.js'
-            }
-          />
+            <div
+              style={{ display: 'none' }}
+              data-testid="tiny-mce-checkin-notes"
+            />
+            <Editor
+              apiKey="246ojmsp6c7qtnr9aoivktvi3mi5t7ywuf0vevn6wllfcn9e"
+              id="tiny-mce-checkin-notes"
+              value={note && note.description ? note.description : ''}
+              onEditorChange={handleNoteChange}
+              readOnly={
+                currentCheckin?.completed ||
+                note === undefined ||
+                Object.keys(note) === 0
+              }
+              init={{
+                promotion: false,
+                plugins: 'lists',
+                toolbar:
+                  'undo redo | blocks | ' +
+                  'bold italic underline strikethrough forecolor | alignleft aligncenter ' +
+                  'alignright alignjustify | bullist numlist outdent indent | ' +
+                  'removeformat | help',
+                skin: document.querySelector('[data-dark]')
+                  ? 'oxide-dark'
+                  : 'oxide',
+                content_css: document.querySelector('[data-dark]')
+                  ? 'dark'
+                  : 'default'
+              }}
+              tinymceScriptSrc={
+                import.meta.env.VITE_APP_API_URL + '/js/tinymce/tinymce.min.js'
+              }
+            />
           </>
         )}
       </CardContent>

web-ui/src/components/notes/Note.test.jsx

@@ -65,17 +65,21 @@ const notes = [
 ];
 
 const server = setupServer(
-  http.get(`http://localhost:8080/services/checkin-notes?checkinid=${checkin.id}`, () => {
-    return HttpResponse.json(notes);
-  }),
+  http.get(
+    `http://localhost:8080/services/checkin-notes?checkinid=${checkin.id}`,
+    () => {
+      return HttpResponse.json(notes);
+    }
+  )
 );
 
 beforeAll(() => server.listen({ onUnhandledRequest(request, print) {} }));
 afterEach(() => server.resetHandlers());
 afterAll(() => server.close());
 
 it('renders correctly', async () => {
-  await waitForSnapshot('tiny-mce-checkin-notes',
+  await waitForSnapshot(
+    'tiny-mce-checkin-notes',
     <Router history={history}>
       <AppContextProvider value={initialState}>
         <Notes

web-ui/src/components/private-note/PrivateNote.jsx

@@ -163,38 +163,46 @@ const PrivateNote = () => {
             </div>
           ) : (
             <>
-            <div style={{ display: "none" }} data-testid="tiny-mce-checkin-private-notes" />
-            <Editor
-              apiKey="246ojmsp6c7qtnr9aoivktvi3mi5t7ywuf0vevn6wllfcn9e"
-              id="tiny-mce-checkin-private-notes"
-              value={note && note.description ? note.description : ''}
-              onEditorChange={handleNoteChange}
-              readOnly={
-                currentCheckin?.completed ||
-                note === undefined ||
-                Object.keys(note) === 0
-              }
-              init={{
-                promotion: false,
-                plugins: 'lists',
-                toolbar:
-                  'undo redo | blocks | ' +
-                  'bold italic underline strikethrough forecolor | alignleft aligncenter ' +
-                  'alignright alignjustify | bullist numlist outdent indent | ' +
-                  'removeformat | help',
-                skin: document.querySelector('[data-dark]') ? 'oxide-dark' : 'oxide',
-                content_css: document.querySelector('[data-dark]') ? 'dark' : 'default'
-              }}
-              tinymceScriptSrc={
-                import.meta.env.VITE_APP_API_URL + '/js/tinymce/tinymce.min.js'
-              }
-            />
+              <div
+                style={{ display: 'none' }}
+                data-testid="tiny-mce-checkin-private-notes"
+              />
+              <Editor
+                apiKey="246ojmsp6c7qtnr9aoivktvi3mi5t7ywuf0vevn6wllfcn9e"
+                id="tiny-mce-checkin-private-notes"
+                value={note && note.description ? note.description : ''}
+                onEditorChange={handleNoteChange}
+                readOnly={
+                  currentCheckin?.completed ||
+                  note === undefined ||
+                  Object.keys(note) === 0
+                }
+                init={{
+                  promotion: false,
+                  plugins: 'lists',
+                  toolbar:
+                    'undo redo | blocks | ' +
+                    'bold italic underline strikethrough forecolor | alignleft aligncenter ' +
+                    'alignright alignjustify | bullist numlist outdent indent | ' +
+                    'removeformat | help',
+                  skin: document.querySelector('[data-dark]')
+                    ? 'oxide-dark'
+                    : 'oxide',
+                  content_css: document.querySelector('[data-dark]')
+                    ? 'dark'
+                    : 'default'
+                }}
+                tinymceScriptSrc={
+                  import.meta.env.VITE_APP_API_URL +
+                  '/js/tinymce/tinymce.min.js'
+                }
+              />
             </>
-            )}
-            </CardContent>
-            </Card>
-            )
-            );
-          };
+          )}
+        </CardContent>
+      </Card>
+    )
+  );
+};
 
-          export default PrivateNote;
+export default PrivateNote;

web-ui/src/components/private-note/PrivateNote.test.jsx

@@ -75,17 +75,21 @@ const notes = [
 ];
 
 const server = setupServer(
-  http.get(`http://localhost:8080/services/private-notes?checkinid=${checkin.id}`, () => {
-    return HttpResponse.json(notes);
-  }),
+  http.get(
+    `http://localhost:8080/services/private-notes?checkinid=${checkin.id}`,
+    () => {
+      return HttpResponse.json(notes);
+    }
+  )
 );
 
 beforeAll(() => server.listen({ onUnhandledRequest(request, print) {} }));
 afterEach(() => server.resetHandlers());
 afterAll(() => server.close());
 
 it('renders correctly', async () => {
-  await waitForSnapshot('tiny-mce-checkin-private-notes',
+  await waitForSnapshot(
+    'tiny-mce-checkin-private-notes',
     <Router history={history}>
       <AppContextProvider value={initialState}>
         <PrivateNote

web-ui/src/components/reviews/periods/ReviewPeriods.jsx

@@ -514,4 +514,4 @@ const ReviewPeriods = ({ onPeriodSelected, mode }) => {
 };
 ReviewPeriods.propTypes = propTypes;
 ReviewPeriods.displayName = displayName;
-export default ReviewPeriods;
+export default ReviewPeriods;

web-ui/src/pages/CheckinsPage.test.jsx

@@ -81,9 +81,12 @@ const server = setupServer(
   http.get('http://localhost:8080/services/document/1', () => {
     return HttpResponse.json(mockuments);
   }),
-  http.get(`http://localhost:8080/services/checkin-notes?checkinid=${mockCheckinId}`, () => {
-    return HttpResponse.json(notes);
-  }),
+  http.get(
+    `http://localhost:8080/services/checkin-notes?checkinid=${mockCheckinId}`,
+    () => {
+      return HttpResponse.json(notes);
+    }
+  )
 );
 
 beforeAll(() => server.listen({ onUnhandledRequest(request, print) {} }));

web-ui/src/pages/CloseWindow.jsx

@@ -1,5 +1,9 @@
-window.close();
+import React from 'react';
+import { useEffect } from 'react';
 
 export default function CloseWindow() {
+  useEffect(() => {
+    window.close();
+  }, []);
   return <></>;
 }

web-ui/src/pages/EmailPage.css

@@ -25,15 +25,16 @@
 
 .email-page .email-format-container .email-format-button-selected {
   color: #313131;
-  background-color: rgba(var(--mui-palette-primary-mainChannel) / var(--mui-palette-action-selectedOpacity));;
+  background-color: rgba(
+    var(--mui-palette-primary-mainChannel) /
+      var(--mui-palette-action-selectedOpacity)
+  );
   border: 2px solid green;
   text-align: center;
   margin: 0.5rem 3rem;
 }
 
-.email-page
-  .email-format-container
-  .email-format-button-content {
+.email-page .email-format-container .email-format-button-content {
   width: 250px;
   color: var(--mui-palette-primary-text);
   height: 250px;

web-ui/src/pages/EmailPage.jsx

@@ -71,7 +71,11 @@ const ChooseEmailFormatStep = ({
     <>
       <div className="email-format-container">
         <Button
-          className={emailFormat === 'file' ? "email-format-button-selected" : "email-format-button"}
+          className={
+            emailFormat === 'file'
+              ? 'email-format-button-selected'
+              : 'email-format-button'
+          }
           disabled={emailSent}
           onClick={() => handleFormatButtonClick('file')}
         >
@@ -96,7 +100,11 @@ const ChooseEmailFormatStep = ({
           </div>
         </Button>
         <Button
-          className={emailFormat === 'text' ? "email-format-button-selected" : "email-format-button"}
+          className={
+            emailFormat === 'text'
+              ? 'email-format-button-selected'
+              : 'email-format-button'
+          }
           disabled={emailSent}
           onClick={() => handleFormatButtonClick('text')}
         >

web-ui/src/pages/FeedbackSubmitPage.jsx

@@ -170,7 +170,11 @@ const FeedbackSubmitPage = () => {
   return (
     <Root data-testid={requestQuery} className="feedback-submit-page">
       {requestCanceled ? (
-        <Typography data-testid={requestQuery+"-canceled"} className={classes.announcement} variant="h3">
+        <Typography
+          data-testid={requestQuery + '-canceled'}
+          className={classes.announcement}
+          variant="h3"
+        >
           This feedback request has been canceled.
         </Typography>
       ) : tabs || requestSubmitted || selfReviewRequest ? (

web-ui/src/pages/KudosPage.jsx

@@ -131,7 +131,10 @@ const KudosPage = () => {
   const loadPublicKudos = useCallback(async () => {
     setPublicKudosLoading(true);
     const oldestDate = getOldestDate();
-    const res = await getPublicKudos(csrf, oldestDate === true ? undefined : oldestDate?.toISOString().split('T')[0]);
+    const res = await getPublicKudos(
+      csrf,
+      oldestDate === true ? undefined : oldestDate?.toISOString().split('T')[0]
+    );
     if (res?.payload?.data && !res.error) {
       setPublicKudosLoading(false);
       return res.payload.data;