added tutorial tool, still need to integrate with metadatatool

1 files changed, 48 insertions, 4 deletions

diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx
index 437888ef2..8ed3e8e30 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx
@@ -5,6 +5,7 @@ import * as React from 'react';
 import { SettingsManager } from '../../../util/SettingsManager';
 import { ObservableReactComponent } from '../../ObservableReactComponent';
 import './CollectionFreeFormView.scss';
+import { Button } from '../../../util/CurrentUserUtils';
 
 /**
  * An Fsa Arc.  The first array element is a test condition function that will be observed.
@@ -17,16 +18,26 @@ export type infoArc = [() => unknown, (res?: unknown) => infoState];
 export const StateMessage = Symbol('StateMessage');
 export const StateMessageGIF = Symbol('StateMessageGIF');
 export const StateEntryFunc = Symbol('StateEntryFunc');
+export const StateMessageButton = Symbol('StateMessageButton');
 export class infoState {
     [StateMessage]: string = '';
     [StateMessageGIF]?: string = '';
+    [StateMessageButton]?: Button[]; 
     [StateEntryFunc]?: () => unknown;
     [key: string]: infoArc;
-    constructor(message: string, arcs: { [key: string]: infoArc }, messageGif?: string, entryFunc?: () => unknown) {
+
+    constructor(
+        message: string, 
+        arcs: { [key: string]: infoArc }, 
+        messageGif?: string, 
+        buttons?: Button[], 
+        entryFunc?: () => unknown
+    ) {
         this[StateMessage] = message;
         Object.assign(this, arcs);
         this[StateMessageGIF] = messageGif;
         this[StateEntryFunc] = entryFunc;
+        this[StateMessageButton] = buttons;
     }
 }
 
@@ -44,14 +55,15 @@ export function InfoState(
     msg: string, //
     arcs: { [key: string]: infoArc },
     gif?: string,
+    button?: Button[],
     entryFunc?: () => unknown
 ) {
-    return new infoState(msg, arcs, gif, entryFunc);
+    return new infoState(msg, arcs, gif, button, entryFunc);
 }
 
 export interface CollectionFreeFormInfoStateProps {
     infoState: infoState;
-    next: (state: infoState) => unknown;
+    next: (state: infoState) => unknown;  // Ensure it's properly defined
     close: () => void;
 }
 
@@ -68,6 +80,10 @@ export class CollectionFreeFormInfoState extends ObservableReactComponent<Collec
     get State() {
         return this._props.infoState;
     }
+
+    set State(value: infoState) {
+        this._props.infoState = value;
+    }
     get Arcs() {
         return Object.keys(this.State ?? []).map(key => this.State?.[key]);
     }
@@ -97,6 +113,9 @@ export class CollectionFreeFormInfoState extends ObservableReactComponent<Collec
 
     render() {
         const gif = this.State?.[StateMessageGIF];
+        const buttons = this.State?.[StateMessageButton];
+        console.log("Rendering CollectionFreeFormInfoState with state:", this.props.infoState);
+        console.log(buttons)
         return (
             <div className="collectionFreeform-infoUI">
                 <p className="collectionFreeform-infoUI-msg">
@@ -110,11 +129,36 @@ export class CollectionFreeFormInfoState extends ObservableReactComponent<Collec
                         {this._expanded ? 'Less...' : 'More...'}
                     </button>
                 </p>
+                
                 <div className={'collectionFreeform-' + (!this._expanded || !gif ? 'hidden' : 'infoUI-gif-container')}>
                     <img src={`/assets/${gif}`} alt="state message gif" />
                 </div>
+    
+                {/* Render the buttons for skipping */}
+                <div className={'collectionFreeform-' + (!buttons || buttons.length === 0 ? 'hidden' : 'infoUI-button-container')}>
+                    {buttons?.map((button, index) => (
+                        <button
+                            key={index}
+                            type="button"
+                            className="collectionFreeform-infoUI-skip-button"
+                            onClick={action(() => {
+                                console.log("Attempting transition to:", button.targetState);
+                                this.props.next(button.targetState as infoState); // ✅ Use the prop instead
+                              })}>
+                            {button.title}
+                        </button>
+                    ))}
+                </div>
+    
                 <div className="collectionFreeform-infoUI-close">
-                    <IconButton icon="x" color={SettingsManager.userColor} size={Size.XSMALL} type={Type.TERT} background={SettingsManager.userBackgroundColor} onClick={action(() => this.props.close())} />
+                    <IconButton
+                        icon="x"
+                        color={SettingsManager.userColor}
+                        size={Size.XSMALL}
+                        type={Type.TERT}
+                        background={SettingsManager.userBackgroundColor}
+                        onClick={action(() => this.props.close())}
+                    />
                 </div>
             </div>
         );