Refactor the EditPresetForm component by moving the save and discard buttons to a new EditPresetFormFooter component and removing unnecessary dependencies

Author: robertpiosik

packages/ui/src/components/editor/panel/Page/Page.module.scss

@@ -23,14 +23,6 @@
     font-size: var(--font-size-14px);
     white-space: nowrap;
   }
-
-  &__right {
-    display: flex;
-
-    &__slot {
-      padding-right: var(--padding-3px);
-    }
-  }
 }
 
 .footer {

packages/ui/src/components/editor/panel/Page/Page.tsx

@@ -5,7 +5,6 @@ import { IconButton } from '../IconButton'
 type Props = {
   title?: string
   on_back_click?: () => void
-  on_close_click?: () => void
   header_slot?: React.ReactNode
   footer_slot?: React.ReactNode
   children: React.ReactNode
@@ -27,16 +26,7 @@ export const Page: React.FC<Props> = (props) => {
             />
           )}
         </div>
-        <div className={styles.header__right}>
-          <div className={styles.header__right__slot}>{props.header_slot}</div>
-          {props.on_close_click && (
-            <IconButton
-              codicon_icon="chrome-close"
-              on_click={props.on_close_click}
-              title="Close"
-            />
-          )}
-        </div>
+        <div>{props.header_slot}</div>
       </div>
       <Scrollable>{props.children}</Scrollable>
       {props.footer_slot && (

packages/vscode/package.json

@@ -1667,7 +1667,6 @@
     "marked": "^15.0.12",
     "path-browserify": "^1.0.1",
     "react": "^18.2.0",
-    "react-autosize-textarea": "^7.1.0",
     "react-dom": "^18.2.0",
     "react-textarea-autosize": "^8.5.9",
     "rimraf": "^6.0.1",

packages/vscode/src/views/panel/frontend/Panel.tsx

@@ -1,6 +1,6 @@
 import { Main } from './Main'
 import { Page as UiPage } from '@ui/components/editor/panel/Page'
-import { EditPresetForm } from '@/views/panel/frontend/EditPresetForm'
+import { EditPresetForm } from '@/views/panel/frontend/components/edit-preset-form/EditPresetForm'
 import { TextButton as UiTextButton } from '@ui/components/editor/panel/TextButton'
 import { HOME_VIEW_TYPES } from '../types/home-view-type'
 import { Home } from './Home'
@@ -17,6 +17,7 @@ import { FileInPreview } from '@shared/types/file-in-preview'
 import { LayoutContext } from './contexts/LayoutContext'
 import { Layout } from './components/Layout/Layout'
 import { ResponsePreviewFooter as UiResponsePreviewFooter } from '@ui/components/editor/panel/ResponsePreviewFooter'
+import { EditPresetFormFooter } from './components/edit-preset-form/EditPresetFormFooter'
 
 const vscode = acquireVsCodeApi()
 
@@ -250,6 +251,12 @@ export const Panel = () => {
           <div className={styles.slot}>
             <UiPage
               on_back_click={edit_preset_back_click_handler}
+              footer_slot={
+                <EditPresetFormFooter
+                  on_discard={edit_preset_back_click_handler}
+                  on_save={edit_preset_save_handler}
+                />
+              }
               title={`Edit ${!updated_preset?.chatbot ? 'Group' : 'Preset'}`}
               header_slot={
                 updated_preset?.chatbot && (
@@ -278,7 +285,6 @@ export const Panel = () => {
               <EditPresetForm
                 preset={updating_preset}
                 on_update={set_updated_preset}
-                on_save={edit_preset_save_handler}
                 pick_open_router_model={() => {
                   post_message(vscode, { command: 'PICK_OPEN_ROUTER_MODEL' })
                 }}
@@ -330,6 +336,7 @@ export const Panel = () => {
                   }
                 />
               }
+              header_slot={<></>}
             >
               <UiResponsePreview
                 items={items_to_review}

…ditPresetForm/EditPresetForm.module.scss …ditPresetForm/EditPresetForm.module.scsspackages/vscode/src/views/panel/frontend/EditPresetForm/EditPresetForm.module.scss renamed to packages/vscode/src/views/panel/frontend/components/edit-preset-form/EditPresetForm/EditPresetForm.module.scss packages/vscode/src/views/panel/frontend/EditPresetForm/EditPresetForm.module.scss renamed to packages/vscode/src/views/panel/frontend/components/edit-preset-form/EditPresetForm/EditPresetForm.module.scss

@@ -5,15 +5,13 @@ import { CHATBOTS } from '@shared/constants/chatbots'
 import TextareaAutosize from 'react-textarea-autosize'
 import { Field } from '@ui/components/editor/panel/Field'
 import { Slider } from '@ui/components/editor/panel/Slider'
-import { Button } from '@ui/components/editor/panel/Button'
 import { Checkbox } from '@ui/components/editor/common/Checkbox'
 import { Input } from '@ui/components/editor/common/Input'
 import { BackendMessage } from '@/views/panel/types/messages'
 
 type Props = {
   preset: Preset
   on_update: (updated_preset: Preset) => void
-  on_save: () => void
   pick_open_router_model: () => void
   pick_chatbot: (chatbot_id?: keyof typeof CHATBOTS) => void
   on_at_sign_in_affix: () => void
@@ -448,7 +446,6 @@ export const EditPresetForm: React.FC<Props> = (props) => {
           />
         </Field>
       </>
-      <Button on_click={props.on_save}>Save</Button>
     </div>
   )
 }

…ontend/EditPresetForm/EditPresetForm.tsx …t-form/EditPresetForm/EditPresetForm.tsxpackages/vscode/src/views/panel/frontend/EditPresetForm/EditPresetForm.tsx renamed to packages/vscode/src/views/panel/frontend/components/edit-preset-form/EditPresetForm/EditPresetForm.tsx packages/vscode/src/views/panel/frontend/EditPresetForm/EditPresetForm.tsx renamed to packages/vscode/src/views/panel/frontend/components/edit-preset-form/EditPresetForm/EditPresetForm.tsx

@@ -0,0 +1,8 @@
+.container {
+  display: flex;
+  gap: var(--padding-8px);
+
+  > button {
+    flex: 1;
+  }
+}

…s/panel/frontend/EditPresetForm/index.ts …edit-preset-form/EditPresetForm/index.tspackages/vscode/src/views/panel/frontend/EditPresetForm/index.ts renamed to packages/vscode/src/views/panel/frontend/components/edit-preset-form/EditPresetForm/index.ts packages/vscode/src/views/panel/frontend/EditPresetForm/index.ts renamed to packages/vscode/src/views/panel/frontend/components/edit-preset-form/EditPresetForm/index.ts

@@ -0,0 +1,21 @@
+import { Button as UiButton } from '@ui/components/editor/panel/Button'
+import styles from './EditPresetFormFooter.module.scss'
+
+type Props = {
+  on_discard: () => void
+  on_save: () => void
+}
+
+export const EditPresetFormFooter: React.FC<Props> = ({
+  on_discard,
+  on_save
+}) => {
+  return (
+    <div className={styles.container}>
+      <UiButton on_click={on_discard} is_secondary>
+        Discard
+      </UiButton>
+      <UiButton on_click={on_save}>Save</UiButton>
+    </div>
+  )
+}

packages/vscode/src/views/panel/frontend/components/edit-preset-form/EditPresetFormFooter/EditPresetFormFooter.module.scss

@@ -0,0 +1 @@
+export * from './EditPresetFormFooter'