From de804cd44dc526148378410ba9cb580c3198e993 Mon Sep 17 00:00:00 2001
From: sophia-massie <smassie@tacc.utexas.edu>
Date: Mon, 17 Feb 2025 17:56:15 -0600
Subject: [PATCH] fix/create-modal-flex

---
 .../CreateMapModal/CreateMapModal.tsx         | 192 +++++++++---------
 1 file changed, 95 insertions(+), 97 deletions(-)

diff --git a/react/src/components/CreateMapModal/CreateMapModal.tsx b/react/src/components/CreateMapModal/CreateMapModal.tsx
index 7bd1ebee..3c28199f 100644
--- a/react/src/components/CreateMapModal/CreateMapModal.tsx
+++ b/react/src/components/CreateMapModal/CreateMapModal.tsx
@@ -1,9 +1,17 @@
 import React, { useEffect, useState, useRef } from 'react';
-import { Section, SectionTableWrapper } from '@tacc/core-components';
 import { FormItem } from 'react-hook-form-antd';
 import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { Button, Form, Input, Checkbox, Modal, Layout, Flex } from 'antd';
+import {
+  Button,
+  Form,
+  Input,
+  Checkbox,
+  Splitter,
+  Modal,
+  Layout,
+  Flex,
+} from 'antd';
 import { useNavigate } from 'react-router-dom';
 import { z } from 'zod';
 import { useAuthenticatedUser, useCreateProject } from '@hazmapper/hooks';
@@ -164,109 +172,99 @@ const CreateMapModal = ({ isOpen, closeModal }: CreateMapModalProps) => {
         </Flex>,
       ]}
     >
-      <Section
-        bodyClassName="has-loaded-dashboard"
-        contentLayoutName={'twoColumn'}
-        className={`${styles['section']}`}
-        content={
-          <>
-            <SectionTableWrapper
-              className={`${styles['section-table-wrapper']}`}
+      <Splitter style={{ height: '100%' }}>
+        <>
+          <Splitter.Panel style={{ padding: 10 }} resizable={false}>
+            <Form
+              form={form}
+              name="createLayerForm"
+              onFinish={handleSubmit(handleSubmitCallback, console.error)}
+              layout="vertical"
+              className={`${styles['formRoot']}`}
             >
-              <Form
-                form={form}
-                name="createLayerForm"
-                onFinish={handleSubmit(handleSubmitCallback, console.error)}
-                layout="vertical"
-                className={`${styles['formRoot']}`}
+              <FormItem
+                control={control}
+                name="name"
+                label="Name"
+                required
+                data-testid="name-input"
               >
-                <FormItem
-                  control={control}
-                  name="name"
-                  label="Name"
-                  required
-                  data-testid="name-input"
-                >
-                  <Input />
-                </FormItem>
-                <FormItem
-                  control={control}
-                  name="description"
-                  label="Description"
-                  required
-                >
-                  <Input.TextArea />
-                </FormItem>
-                <FormItem
-                  control={control}
-                  name="systemFile"
-                  label="Custom File Name"
-                  required
-                >
-                  <Input
-                    addonAfter={
-                      <span className={`${styles['hazmapper-suffix']}`}>
-                        .hazmapper
-                      </span>
-                    }
-                  />
-                </FormItem>
-                <div className={`${styles['field-wrapper-alt']}`}>
-                  <FormItem
-                    control={control}
-                    name="saveLocationDisplay"
-                    label="Save Location"
-                    data-testid="name-input"
-                  >
-                    <span title={watch('saveLocationDisplay')}>
-                      {truncateMiddle(watch('saveLocationDisplay'), 78)}
+                <Input />
+              </FormItem>
+              <FormItem
+                control={control}
+                name="description"
+                label="Description"
+                required
+              >
+                <Input.TextArea />
+              </FormItem>
+              <FormItem
+                control={control}
+                name="systemFile"
+                label="Custom File Name"
+                required
+              >
+                <Input
+                  addonAfter={
+                    <span className={`${styles['hazmapper-suffix']}`}>
+                      .hazmapper
                     </span>
-                  </FormItem>
-                </div>
+                  }
+                />
+              </FormItem>
+              <div className={`${styles['field-wrapper-alt']}`}>
                 <FormItem
                   control={control}
-                  name="syncFolder"
-                  label="Sync Folder"
-                  className={`${styles['checkboxWrapper']}`}
+                  name="saveLocationDisplay"
+                  label="Save Location"
+                  data-testid="name-input"
                 >
-                  <Checkbox />
-                  <br />
-                  <span className={`${styles['checkbox-label']}`}>
-                    When enabled, files in this folder are automatically synced
-                    into the map periodically.
+                  <span title={watch('saveLocationDisplay')}>
+                    {truncateMiddle(watch('saveLocationDisplay'), 78)}
                   </span>
                 </FormItem>
-                {errorMessage && (
-                  <div className="c-form__errors">{errorMessage}</div>
-                )}
-              </Form>
-            </SectionTableWrapper>
-            <SectionTableWrapper
-              className={`${styles['section-table-wrapper']}`}
-              manualHeader={
-                <>
-                  <h2 className={`${styles['link-heading']}`}>
-                    Select Link Save Location
-                  </h2>
-                  <h4 className={`${styles['link-subheading']}`}>
-                    If no folder is selected, the link file will be saved to the
-                    root of the selected system.If you select a project, you can
-                    link the current map to the project.
-                  </h4>
-                </>
-              }
-              manualContent={
-                <FileListing
-                  disableSelection={false}
-                  onFolderSelect={handleDirectoryChange}
-                  showPublicSystems={false}
-                  onSystemSelect={handleSystemChange}
-                />
-              }
-            />
-          </>
-        }
-      />
+              </div>
+              <FormItem
+                control={control}
+                name="syncFolder"
+                label="Sync Folder"
+                className={`${styles['checkboxWrapper']}`}
+              >
+                <Checkbox />
+                <br />
+                <span className={`${styles['checkbox-label']}`}>
+                  When enabled, files in this folder are automatically synced
+                  into the map periodically.
+                </span>
+              </FormItem>
+              {errorMessage && (
+                <div className="c-form__errors">{errorMessage}</div>
+              )}
+            </Form>
+          </Splitter.Panel>
+
+          <Splitter.Panel resizable={false} style={{ padding: 10 }}>
+            <h2 className={`${styles['link-heading']}`}>
+              Select Link Save Location
+            </h2>
+            <h4 className={`${styles['link-subheading']}`}>
+              If no folder is selected, the link file will be saved to the root
+              of the selected system.If you select a project, you can link the
+              current map to the project.
+            </h4>
+            manualContent=
+            {
+              <FileListing
+                disableSelection={false}
+                onFolderSelect={handleDirectoryChange}
+                showPublicSystems={false}
+                onSystemSelect={handleSystemChange}
+              />
+            }
+          </Splitter.Panel>
+        </>
+      </Splitter>
     </Modal>
   );
 };