Update tooltip for setup re-run

apps/circuit-compiler/src/app/components/container.tsx

@@ -121,7 +121,13 @@ export function Container () {
               <CompilerFeedback feedback={circuitApp.appState.compilerFeedback} filePathToId={circuitApp.appState.filePathToId} openErrorLocation={handleOpenErrorLocation} hideWarnings={circuitApp.appState.hideWarnings} askGPT={askGPT} />
             </RenderIf>
             <RenderIf condition={circuitApp.appState.signalInputs.length > 0}>
-              <Toggler title='circuit.setupExports' dataId='setup_exports_toggler' show={!circuitApp.appState.setupExportStatus} icon={ circuitApp.appState.setupExportStatus === 'done' ? 'fas fa-check-circle text-success' : circuitApp.appState.setupExportStatus === 'update' ? 'fas fa-exclamation-triangle text-warning' : null }>
+              <Toggler
+                title='circuit.setupExports'
+                dataId='setup_exports_toggler'
+                show={!circuitApp.appState.setupExportStatus}
+                icon={ circuitApp.appState.setupExportStatus === 'done' ? 'fas fa-check-circle text-success' : circuitApp.appState.setupExportStatus === 'update' ? 'fas fa-exclamation-triangle text-warning' : null }
+                iconTooltip={ circuitApp.appState.setupExportStatus === 'update' ? 'Circom file content changed. Please compile and re-run setup to update exported keys.' : null }
+              >
                 <>
                   <SetupExports />
                   <RenderIf condition={circuitApp.appState.status !== 'exporting'}>

apps/circuit-compiler/src/app/components/toggler.tsx

@@ -1,8 +1,8 @@
 import { useEffect, useState } from "react"
 import { FormattedMessage } from "react-intl"
-import { RenderIf, RenderIfNot } from "@remix-ui/helper"
+import { CustomTooltip, RenderIf, RenderIfNot } from "@remix-ui/helper"
 
-export function Toggler ({ children, title, dataId, show = false, icon }: { children: JSX.Element, title: string, dataId: string, show?: boolean, icon?: string }) {
+export function Toggler ({ children, title, dataId, show = false, icon, iconTooltip }: { children: JSX.Element, title: string, dataId: string, show?: boolean, icon?: string, iconTooltip?: string }) {
   const [toggleExpander, setToggleExpander] = useState<boolean>(show)
 
   useEffect(() => {
@@ -19,7 +19,16 @@ export function Toggler ({ children, title, dataId, show = false, icon }: { chil
         <div className="d-flex">
           <label className="mt-1 circuit_config_section">
             <FormattedMessage id={title} />
-            { icon && <span className={`${icon} border-0 p-0 ml-2`} aria-hidden="true"></span> }
+            { icon ? iconTooltip ? (
+              <CustomTooltip
+                placement="auto"
+                tooltipId="rerunSetupWarningTooltip"
+                tooltipClasses="text-nowrap"
+                tooltipText={iconTooltip}
+              >
+                <span className={`${icon} border-0 p-0 ml-2`} aria-hidden="true"></span>
+              </CustomTooltip>) :
+              <span className={`${icon} border-0 p-0 ml-2`} aria-hidden="true"></span> : null }
           </label>
         </div>
         <div>