feat(shared): Edit existing patterns and save/saveAs

sites/shared/components/workbench/header.mjs

@@ -8,7 +8,8 @@ import {
   CutIcon,
   OptionsIcon,
   PrintIcon,
-  UploadIcon,
+  SaveIcon,
+  SaveAsIcon,
   RightIcon,
   LeftIcon,
   DocsIcon,
@@ -30,7 +31,8 @@ const icons = {
   cut: CutIcon,
   draft: OptionsIcon,
   print: PrintIcon,
-  save: UploadIcon,
+  save: SaveIcon,
+  saveas: SaveAsIcon,
   logs: CodeIcon,
   inspect: XrayIcon,
   measies: MeasieIcon,
@@ -62,7 +64,7 @@ export const NavButton = ({
   )
 }
 
-const NavIcons = ({ setView, setDense, dense, view }) => {
+const NavIcons = ({ setView, setDense, dense, view, saveAs = false }) => {
   const { t } = useTranslation(['header'])
   const iconSize = 'h-6 w-6 grow-0'
 
@@ -121,10 +123,10 @@ const NavIcons = ({ setView, setDense, dense, view }) => {
       )*/}
       <NavButton
         onClick={() => setView('save')}
-        label={t('workbench:savePattern')}
+        label={t(`workbench:${saveAs ? 'savePattern' : 'savePatternAsHellip'}`)}
         active={view === 'save'}
       >
-        <UploadIcon className={iconSize} />
+        {saveAs ? <SaveIcon className={iconSize} /> : <SaveAsIcon className={iconSize} />}
       </NavButton>
       <NavButton
         onClick={() => setView('export')}
@@ -161,7 +163,7 @@ const NavIcons = ({ setView, setDense, dense, view }) => {
   )
 }
 
-export const WorkbenchHeader = ({ view, setView }) => {
+export const WorkbenchHeader = ({ view, setView, saveAs = false }) => {
   const [dense, setDense] = useState(true)
   return (
     <MenuWrapper
@@ -188,7 +190,7 @@ export const WorkbenchHeader = ({ view, setView }) => {
         flex flex-col
         items-center w-full `}
         >
-          <NavIcons {...{ setView, setDense, dense, view }} />
+          <NavIcons {...{ setView, setDense, dense, view, saveAs }} />
         </div>
       </header>
     </MenuWrapper>