Merge pull request #100 from ar-io/PE-7020-add-ui-to-view-release-notes

PE-7020: add-ui-to-view-release-notes

CHANGELOG.md

@@ -7,6 +7,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+
+* View Changelog in app by clicking version number in sidebar
+
+### Changed
+
+* Updated header style of cards
+
 ## [1.3.0] - 2024-10-21
 
 ### Added

package.json

@@ -39,6 +39,7 @@
     "fflate": "^0.8.2",
     "loglevel": "^1.9.1",
     "lottie-react": "^2.4.0",
+    "markdown-to-jsx": "^7.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hot-toast": "^2.4.1",
@@ -54,6 +55,7 @@
     "@commitlint/cli": "^17.6.7",
     "@commitlint/config-conventional": "^17.6.7",
     "@sentry/vite-plugin": "^0.7.2",
+    "@tailwindcss/typography": "^0.5.15",
     "@testing-library/jest-dom": "^6.1.5",
     "@testing-library/react": "^14.1.2",
     "@testing-library/user-event": "^14.5.1",

src/components/modals/MarkdownModal.tsx

@@ -0,0 +1,28 @@
+import Markdown from 'markdown-to-jsx';
+import BaseModal from './BaseModal';
+
+const MarkdownModal = ({
+  title,
+  markdownText,
+  onClose,
+}: {
+  title: string;
+  markdownText: string;
+  onClose: () => void;
+}) => {
+  return (
+    <BaseModal onClose={onClose} useDefaultPadding={false}>
+      <div className="h-[32rem] w-[28.4375rem] text-left">
+        <div className="flex  size-full flex-col px-8 pb-4 pt-6">
+          <div className="text-lg text-high">{title}</div>
+
+          <div className="prose my-2 grow overflow-y-auto text-sm text-mid scrollbar prose-headings:text-high prose-h2:text-base prose-h3:text-sm">
+            <Markdown>{markdownText}</Markdown>
+          </div>
+        </div>
+      </div>
+    </BaseModal>
+  );
+};
+
+export default MarkdownModal;

src/layout/Sidebar.tsx

@@ -3,6 +3,9 @@ import { useEffect, useState } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 
 import Button from '@src/components/Button';
+import MarkdownModal from '@src/components/modals/MarkdownModal';
+import changeLog from '../../CHANGELOG.md?raw';
+
 import {
   ArioLogoIcon,
   BinocularsIcon,
@@ -48,6 +51,14 @@ const ROUTES_SECONDARY = [
   },
 ];
 
+const FORMATTED_CHANGELOG = changeLog
+  .substring(changeLog.indexOf('## [Unreleased]') + 16)
+  .trim()
+  .replace(/\[([\w.]+)\]/g, (match, text) => {
+    console.log(match, text);
+    return `v${text}`;
+  });
+
 const Sidebar = () => {
   const location = useLocation();
   const navigate = useNavigate();
@@ -56,6 +67,8 @@ const Sidebar = () => {
     return storedValue == null ? true : JSON.parse(storedValue);
   });
 
+  const [showChangLogModal, setShowChangeLogModal] = useState(false);
+
   useEffect(() => {
     localStorage.setItem('sidebarOpen', JSON.stringify(sidebarOpen));
   }, [sidebarOpen]);
@@ -118,10 +131,13 @@ const Sidebar = () => {
           }
         >
           {sidebarOpen && (
-            <div className="grow pl-3 text-xs text-low/50">
+            <button
+              className="grow pl-3 text-xs text-low/50 text-left"
+              onClick={() => setShowChangeLogModal(true)}
+            >
               v{process.env.npm_package_version}-
               {process.env.VITE_GITHUB_HASH?.slice(0, 6)}
-            </div>
+            </button>
           )}
           <button onClick={() => setSidebarOpen(!sidebarOpen)}>
             {sidebarOpen ? (
@@ -132,6 +148,13 @@ const Sidebar = () => {
           </button>
         </div>
       </div>
+      {showChangLogModal && (
+        <MarkdownModal
+          onClose={() => setShowChangeLogModal(false)}
+          title="Changelog"
+          markdownText={FORMATTED_CHANGELOG}
+        />
+      )}
     </aside>
   );
 };

src/pages/Observe/ObservationsTable.tsx

@@ -93,7 +93,7 @@ const ObservationsTable = ({
 
   return (
     <div>
-      <div className="flex w-full items-center rounded-t-xl border border-grey-600 py-[0.9375rem] pl-6 pr-[0.8125rem] bg-containerL3">
+      <div className="flex w-full items-center rounded-t-xl border border-grey-600 bg-containerL3 py-[0.9375rem] pl-6 pr-[0.8125rem]">
         <div className="grow text-sm text-mid">Reports</div>
       </div>
       <TableView

tailwind.config.js

@@ -43,5 +43,9 @@ export default {
       'text-red': '#DB4354',
     },
   },
-  plugins: [require('tailwind-scrollbar'), require('tailwindcss-animate')],
+  plugins: [
+    require('@tailwindcss/typography'),
+    require('tailwind-scrollbar'),
+    require('tailwindcss-animate'),
+  ],
 };

yarn.lock

@@ -3128,6 +3128,16 @@
   dependencies:
     "@swc/counter" "^0.1.3"
 
+"@tailwindcss/typography@^0.5.15":
+  version "0.5.15"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/typography/-/typography-0.5.15.tgz#007ab9870c86082a1c76e5b3feda9392c7c8d648"
+  integrity sha512-AqhlCXl+8grUz8uqExv5OTtgpjuVIwFTSXTrh8y9/pw6q2ek7fJ+Y8ZEVw7EB2DCcuCOtEjf9w3+J3rzts01uA==
+  dependencies:
+    lodash.castarray "^4.4.0"
+    lodash.isplainobject "^4.0.6"
+    lodash.merge "^4.6.2"
+    postcss-selector-parser "6.0.10"
+
 "@tanstack/[email protected]":
   version "5.36.1"
   resolved "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.36.1.tgz"
@@ -8140,6 +8150,11 @@ lodash.camelcase@^4.3.0:
   resolved "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz"
   integrity sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==
 
+lodash.castarray@^4.4.0:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/lodash.castarray/-/lodash.castarray-4.4.0.tgz#c02513515e309daddd4c24c60cfddcf5976d9115"
+  integrity sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==
+
 lodash.debounce@^4.0.8:
   version "4.0.8"
   resolved "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz"
@@ -8361,6 +8376,11 @@ map-obj@^4.0.0:
   resolved "https://registry.npmjs.org/map-obj/-/map-obj-4.3.0.tgz"
   integrity sha512-hdN1wVrZbb29eBGiGjJbeP8JbKjq1urkHJ/LIP/NY48MZ1QVXUsQBV1G1zvYFHn1XE06cwjBsOI2K3Ulnj1YXQ==
 
+markdown-to-jsx@^7.5.0:
+  version "7.5.0"
+  resolved "https://registry.yarnpkg.com/markdown-to-jsx/-/markdown-to-jsx-7.5.0.tgz#42ece0c71e842560a7d8bd9f81e7a34515c72150"
+  integrity sha512-RrBNcMHiFPcz/iqIj0n3wclzHXjwS7mzjBNWecKKVhNTIxQepIix6Il/wZCn2Cg5Y1ow2Qi84+eJrryFRWBEWw==
+
 mathjax-full@^3.2.2:
   version "3.2.2"
   resolved "https://registry.npmjs.org/mathjax-full/-/mathjax-full-3.2.2.tgz"
@@ -9231,6 +9251,14 @@ postcss-nested@^6.0.1:
   dependencies:
     postcss-selector-parser "^6.0.11"
 
+[email protected]:
+  version "6.0.10"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz#79b61e2c0d1bfc2602d549e11d0876256f8df88d"
+  integrity sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==
+  dependencies:
+    cssesc "^3.0.0"
+    util-deprecate "^1.0.2"
+
 postcss-selector-parser@^6.0.11:
   version "6.1.0"
   resolved "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.0.tgz"