release notes url. update detailed changes modal start

NiceNode · Jun 24, 2024 · 5d4e1fb · 5d4e1fb
1 parent 25c572a
commit 5d4e1fb
Show file tree

Hide file tree

Showing 13 changed files with 178 additions and 20 deletions.
diff --git a/assets/locales/en/genericComponents.json b/assets/locales/en/genericComponents.json
@@ -101,6 +101,8 @@
   "InstallUpdate": "Install Update",
   "Skip": "Skip",
   "ViewReleaseNotes": "View release notes",
+  "ViewNamedReleaseNotes": "View {{name}} release notes",
+  "ViewDetailedChanges": "View detailed changes...",
   "InitialSyncInProgress": "Initial sync in progress...",
   "NodeSettings": "Node Settings...",
   "RemoveNode": "Remove Node...",

diff --git a/src/common/nodeSpec.ts b/src/common/nodeSpec.ts
@@ -105,7 +105,7 @@ export type NodeSpecification = {
   //  (ex. peers, syncing, latest block num, etc.)
   iconUrl?: string;
   category?: string;
-  documentation?: { default?: string; docker?: string; binary?: string };
+  documentation?: { default?: string; docker?: string; binary?: string, releaseNotesUrl?: string };
   resources?: LabelValuesSectionItemsProps[];
 };
 
@@ -141,7 +141,7 @@ export type NodePackageSpecification = {
   //  (ex. peers, syncing, latest block num, etc.)
   iconUrl?: string;
   category?: string;
-  documentation?: { default?: string; docker?: string; binary?: string };
+  documentation?: { default?: string; docker?: string; binary?: string; releaseNotesUrl?: string };
   addNodeDescription?: string;
   description?: string;
   resources?: LabelValuesSectionItemsProps[];

diff --git a/src/main/nodeLibraryManager.ts b/src/main/nodeLibraryManager.ts
@@ -57,11 +57,11 @@ export const initialize = async () => {
 
 // todo: use user defined url if available
 const getCartridgePackages = async (): Promise<NodeSpecification[]> => {
-  // const cartridgePackagesApiURL = 'http://localhost:3000/api/cartridgePackage'
-  // const isHttp = true;
-  const cartridgePackagesApiURL =
-    'https://api.nicenode.xyz/api/cartridgePackage';
-  const isHttp = false;
+  const cartridgePackagesApiURL = 'http://localhost:3000/api/cartridgePackage'
+  const isHttp = true;
+  // const cartridgePackagesApiURL =
+  //   'https://api.nicenode.xyz/api/cartridgePackage';
+  // const isHttp = false;
   const cartridgePackages: NodeSpecification[] = (
     await httpGetJson(cartridgePackagesApiURL, isHttp)
   ).data;
@@ -76,10 +76,10 @@ const getCartridgePackages = async (): Promise<NodeSpecification[]> => {
 };
 
 const getCartridges = async (): Promise<NodeSpecification[]> => {
-  // const cartridgesApiURL = 'http://localhost:3000/api/cartridge'
-  // const isHttp = true;
-  const cartridgesApiURL = 'https://api.nicenode.xyz/api/cartridge';
-  const isHttp = false;
+  const cartridgesApiURL = 'http://localhost:3000/api/cartridge'
+  const isHttp = true;
+  // const cartridgesApiURL = 'https://api.nicenode.xyz/api/cartridge';
+  // const isHttp = false;
   const cartridges: NodeSpecification[] = (
     await httpGetJson(cartridgesApiURL, isHttp)
   ).data;

diff --git a/src/renderer/Generics/redesign/Header/Header.tsx b/src/renderer/Generics/redesign/Header/Header.tsx
@@ -41,6 +41,7 @@ export const Header = ({ nodeOverview, isPodmanRunning }: HeaderProps) => {
     status,
     version,
     onAction,
+    documentation,
   } = nodeOverview;
 
   const [isCalloutDisplayed, setIsCalloutDisplayed] = useState<boolean>(false);
@@ -128,6 +129,13 @@ export const Header = ({ nodeOverview, isPodmanRunning }: HeaderProps) => {
               // biome-ignore lint/a11y/noNoninteractiveTabindex: <explanation>
               <div className={popupContainer} tabIndex={0}>
                 <UpdateCallout
+                  // todo: pass http link to container release notes
+                  // todo: pass modal link for cartridge changes
+                  serviceName={displayName || name}
+                  releaseNotesUrl={documentation?.releaseNotesUrl}
+                  onClickShowChanges={() => {
+                    console.log('show change modal');
+                  }}
                   onClick={() => {
                     setIsCalloutDisplayed(false);
                     console.log('clicked!');

diff --git a/src/renderer/Generics/redesign/UpdateCallout/UpdateCallout.tsx b/src/renderer/Generics/redesign/UpdateCallout/UpdateCallout.tsx
@@ -9,31 +9,53 @@ import {
 
 import Button from '../Button/Button';
 import ExternalLink from '../Link/ExternalLink';
+import InternalLink from '../Link/InternalLink.js';
 
 export interface UpdateCalloutProps {
   onClick: () => void;
+  serviceName: string;
+  releaseNotesUrl?: string;
+  onClickShowChanges?: () => void;
 }
 
-export const UpdateCallout = ({ onClick }: UpdateCalloutProps) => {
+export const UpdateCallout = ({
+  onClick,
+  serviceName,
+  releaseNotesUrl,
+  onClickShowChanges,
+}: UpdateCalloutProps) => {
   const { t: g } = useTranslation('genericComponents');
   const onInstallClick = () => {
     onClick();
     console.log('install action!');
   };
+  console.log('UpdateCallout releaseNotesUrl', releaseNotesUrl);
   return (
     <div className={container}>
-      <div className={title}>{g('UpdateClientDescription')}</div>
+      <div className={title}>{g('UpdateClient')}</div>
       <div className={description}>
         {g('UpdateClientDescription', {
-          client: 'test',
+          client: serviceName,
         })}
       </div>
-      <div className={link}>
-        <ExternalLink
-          text={g('ViewReleaseNotes')}
-          url="https://docs.docker.com/desktop/#download-and-install"
-        />
-      </div>
+      {releaseNotesUrl && (
+        <div className={link}>
+          <ExternalLink
+            text={g('ViewNamedReleaseNotes', {
+              name: serviceName,
+            })}
+            url={releaseNotesUrl}
+          />
+        </div>
+      )}
+      {onClickShowChanges && (
+        <div className={link}>
+          <InternalLink
+            text={g('ViewDetailedChanges')}
+            onClick={onClickShowChanges}
+          />
+        </div>
+      )}
       <div className={buttonContainer}>
         <Button
           type="primary"

diff --git a/src/renderer/Generics/redesign/consts.ts b/src/renderer/Generics/redesign/consts.ts
@@ -56,6 +56,7 @@ export interface NodeOverviewProps {
   stats: ClientStatsProps;
   onAction?: (action: NodeAction) => void;
   description?: string;
+  documentation?: { default?: string; docker?: string; binary?: string; releaseNotesUrl?: string };
 }
 
 export interface SyncStatusProps {

diff --git a/src/renderer/Presentational/CartridgeUpdate/CartridgeUpdate.tsx b/src/renderer/Presentational/CartridgeUpdate/CartridgeUpdate.tsx
@@ -0,0 +1,38 @@
+import { useTranslation } from 'react-i18next';
+import Linking from '../../Generics/redesign/Link/Linking';
+import alphaBanner from '../../assets/images/artwork/alphaBanner.svg';
+import {
+  container,
+  contentContainer,
+  contentMajorTitle,
+  contentSection,
+  contentTitle,
+  topBanner,
+} from './cartridgeUpdate.css';
+
+const CartridgeUpdate = ({ message }: { message: string }) => {
+  const { t } = useTranslation();
+  return (
+    <div className={container}>
+      <div className={contentContainer}>
+        <div className={contentSection}>
+          <span className={contentMajorTitle}>
+            {t('Detailed Changes in the Update')}
+          </span>
+          <p>{message}</p>
+        </div>
+        {/* <div className={contentSection}>
+          <span className={contentTitle}>{t('ExpectHiccups')}</span>
+          <p>{t('WorkInProgress')}</p>
+          <Linking url="#" text={t('JoinDiscord')} underline={false} />
+        </div>
+        <div className={contentSection}>
+          <span className={contentTitle}>{t('ErrorReportingOn')}</span>
+          <p>{t('ReportingErrors')}</p>
+        </div> */}
+      </div>
+    </div>
+  );
+};
+
+export default AlphaBuild;
diff --git a/src/renderer/Presentational/CartridgeUpdate/cartridgeUpdate.css.ts b/src/renderer/Presentational/CartridgeUpdate/cartridgeUpdate.css.ts
@@ -0,0 +1,45 @@
+import { style } from '@vanilla-extract/css';
+import { common } from '../../Generics/redesign/theme.css';
+
+export const container = style({
+  display: 'flex',
+  flexDirection: 'column',
+  width: 380,
+});
+
+export const topBanner = style({
+  height: 92,
+  backgroundColor: common.color.pink100,
+  borderTopLeftRadius: 14,
+  borderTopRightRadius: 14,
+  display: 'flex',
+  justifyContent: 'center',
+});
+
+export const contentContainer = style({
+  padding: '24px 24px 0px 24px',
+  gap: 24,
+  display: 'flex',
+  flexDirection: 'column',
+});
+
+export const contentSection = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 8,
+  fontSize: 13,
+  fontWeight: 400,
+  lineHeight: '18px',
+  letterSpacing: '-0.08px',
+});
+
+export const contentMajorTitle = style({
+  fontWeight: 590,
+  fontSize: 20,
+  lineHeight: '24px',
+  letterSpacing: '-0.4px',
+});
+
+export const contentTitle = style({
+  fontWeight: 590,
+});
diff --git a/src/renderer/Presentational/ContentMultipleClients/ContentMultipleClients.tsx b/src/renderer/Presentational/ContentMultipleClients/ContentMultipleClients.tsx
@@ -197,6 +197,7 @@ const ContentMultipleClients = (props: {
       description: nodeContent.description ?? '',
       onAction,
       rpcTranslation: 'eth-l1', // todo
+      releaseNotesUrl: nodeContent.documentation?.releaseNotesUrl,
     };
     return nodeOverview;
   }, [JSON.stringify(nodeContent?.status), JSON.stringify(nodeContent?.stats)]);

diff --git a/src/renderer/Presentational/ContentSingleClient/ContentSingleClient.tsx b/src/renderer/Presentational/ContentSingleClient/ContentSingleClient.tsx
@@ -59,6 +59,12 @@ export type SingleNodeContent = {
   onAction?: (action: NodeAction) => void;
   description?: string;
   resources?: LabelValuesSectionItemsProps[];
+  documentation?: {
+    default?: string;
+    docker?: string;
+    binary?: string;
+    releaseNotesUrl?: string;
+  };
 };
 
 type ContentSingleClientProps = {
@@ -90,6 +96,7 @@ const ContentSingleClient = ({
   const { tabsData, name } = nodeOverview;
   const { t } = useTranslation();
 
+  console.log('singleclient documentation', nodeOverview.documentation);
   return (
     <>
       {/* todo: fix temp type casting */}

diff --git a/src/renderer/Presentational/ModalManager/CartridgeUpdateModal.tsx b/src/renderer/Presentational/ModalManager/CartridgeUpdateModal.tsx
@@ -0,0 +1,32 @@
+import { Modal } from '../../Generics/redesign/Modal/Modal';
+import electron from '../../electronGlobal';
+import CartridgeUpdate from '../CartridgeUpdate/CartridgeUpdate.js';
+import { modalRoutes } from './modalUtils';
+
+type Props = {
+  modalOnClose: () => void;
+};
+
+export const CartridgeUpdateModal = ({ modalOnClose }: Props) => {
+  const buttonSaveLabel = 'I Understand';
+
+  const modalOnSaveConfig = async () => {
+    // await electron.getSetHasSeenAlphaModal(true);
+    console.log('close update changes!');
+    modalOnClose();
+  };
+
+  return (
+    <Modal
+      route={modalRoutes.cartridgeUpdate}
+      modalType="info"
+      backButtonEnabled={false}
+      buttonSaveLabel={buttonSaveLabel}
+      modalOnSaveConfig={modalOnSaveConfig}
+      modalOnClose={modalOnClose}
+      modalOnCancel={modalOnClose}
+    >
+      <CartridgeUpdate />
+    </Modal>
+  );
+};
diff --git a/src/renderer/Presentational/NodePackageScreen/NodePackageScreen.tsx b/src/renderer/Presentational/NodePackageScreen/NodePackageScreen.tsx
@@ -379,6 +379,7 @@ const NodePackageScreen = () => {
     onAction: onNodeAction,
     description: spec.description,
     resources: spec.resources,
+    documentation: spec.documentation,
   };
 
   /**

diff --git a/src/renderer/Presentational/NodeScreen/NodeScreen.tsx b/src/renderer/Presentational/NodeScreen/NodeScreen.tsx
@@ -367,6 +367,7 @@ const NodeScreen = () => {
       diskTotal: sTotalDiskSize,
     },
     onAction: onNodeAction,
+    documentation: spec.documentation,
   };
 
   return (