Improve release notes dialog (#3497)

* Fix multiple release notes
* Improve release notes dialog
* Hide release notes dialog after setup

ui/v2.5/src/App.tsx

@@ -207,7 +207,7 @@ export const App: React.FC = () => {
 
     return (
       <ReleaseNotesDialog
-        notes={notes.map((n) => n.content)}
+        notes={notes}
         onClose={() => {
           saveUI({
             variables: {

ui/v2.5/src/components/Dialogs/ReleaseNotesDialog.tsx

@@ -1,12 +1,12 @@
 import React from "react";
-import { Form } from "react-bootstrap";
 import { ModalComponent } from "../Shared/Modal";
 import { faCogs } from "@fortawesome/free-solid-svg-icons";
 import { useIntl } from "react-intl";
 import { MarkdownPage } from "../Shared/MarkdownPage";
+import { IReleaseNotes } from "src/docs/en/ReleaseNotes";
 
 interface IReleaseNotesDialog {
-  notes: string[];
+  notes: IReleaseNotes[];
   onClose: () => void;
 }
 
@@ -26,11 +26,22 @@ export const ReleaseNotesDialog: React.FC<IReleaseNotesDialog> = ({
         text: intl.formatMessage({ id: "actions.close" }),
       }}
     >
-      <Form>
-        {notes.map((n, i) => (
-          <MarkdownPage page={n} key={i} />
-        ))}
-      </Form>
+      <div className="m-n3">
+        {notes
+          .map((n, i) => (
+            <div key={i} className="m-3">
+              <h3>{n.version}</h3>
+              <MarkdownPage page={n.content} />
+            </div>
+          ))
+          .reduce((accu, curr) => (
+            <>
+              {accu}
+              <hr />
+              {curr}
+            </>
+          ))}
+      </div>
     </ModalComponent>
   );
 };

ui/v2.5/src/components/Setup/Setup.tsx

@@ -9,7 +9,11 @@ import {
   InputGroup,
 } from "react-bootstrap";
 import * as GQL from "src/core/generated-graphql";
-import { mutateSetup, useSystemStatus } from "src/core/StashService";
+import {
+  mutateSetup,
+  useConfigureUI,
+  useSystemStatus,
+} from "src/core/StashService";
 import { Link } from "react-router-dom";
 import { ConfigurationContext } from "src/hooks/Config";
 import StashConfiguration from "../Settings/StashConfiguration";
@@ -22,10 +26,12 @@ import {
   faExclamationTriangle,
   faQuestionCircle,
 } from "@fortawesome/free-solid-svg-icons";
+import { releaseNotes } from "src/docs/en/ReleaseNotes";
 
 export const Setup: React.FC = () => {
   const { configuration, loading: configLoading } =
     useContext(ConfigurationContext);
+  const [saveUI] = useConfigureUI();
 
   const [step, setStep] = useState(0);
   const [configLocation, setConfigLocation] = useState("");
@@ -400,6 +406,15 @@ export const Setup: React.FC = () => {
         generatedLocation,
         stashes,
       });
+      // Set lastNoteSeen to hide release notes dialog
+      await saveUI({
+        variables: {
+          input: {
+            ...configuration?.ui,
+            lastNoteSeen: releaseNotes[0].date,
+          },
+        },
+      });
     } catch (e) {
       if (e instanceof Error) setSetupError(e.message ?? e.toString());
     } finally {

ui/v2.5/src/docs/en/ReleaseNotes/index.ts

@@ -1,19 +1,22 @@
 import v0170 from "./v0170.md";
 import v0200 from "./v0200.md";
 
-interface IReleaseNotes {
+export interface IReleaseNotes {
   // handle should be in the form of YYYYMMDD
   date: number;
+  version: string;
   content: string;
 }
 
 export const releaseNotes: IReleaseNotes[] = [
-  {
-    date: 20220906,
-    content: v0170,
-  },
   {
     date: 20230224,
+    version: "v0.20.0",
     content: v0200,
   },
+  {
+    date: 20220906,
+    version: "v0.17.0",
+    content: v0170,
+  },
 ];

ui/v2.5/src/docs/en/ReleaseNotes/v0170.md

@@ -1,7 +1,7 @@
 After migrating, please run a scan on your entire library to populate missing data, and to ingest identical files which were previously ignored.
 
-### Other changes:
+##### Other changes:
 * Import/export schema has changed and is incompatible with the previous version.
 * Changelog has been moved from the stats page to a section in the Settings page.
 * Object titles are now displayed as the file basename if the title is not explicitly set. The `Don't include file extension as part of the title` scan flag is no longer supported.
-* `Set name, date, details from embedded file metadata` scan flag is no longer supported. This functionality may be implemented as a built-in scraper in the future.
+* `Set name, date, details from embedded file metadata` scan flag is no longer supported. This functionality may be implemented as a built-in scraper in the future.