put s3 fields under a cover

ui/components/PeerForms/ClickhouseConfig.tsx

@@ -1,18 +1,22 @@
 'use client';
 import { PeerSetter } from '@/app/dto/PeersDTO';
 import { PeerSetting } from '@/app/peers/create/[peerType]/helpers/common';
+import { Button } from '@/lib/Button/Button';
+import { Icon } from '@/lib/Icon/Icon';
 import { Label } from '@/lib/Label';
 import { RowWithSwitch, RowWithTextField } from '@/lib/Layout';
 import { Switch } from '@/lib/Switch';
 import { TextField } from '@/lib/TextField';
 import { Tooltip } from '@/lib/Tooltip';
+import { useState } from 'react';
 import { InfoPopover } from '../InfoPopover';
 interface ConfigProps {
   settings: PeerSetting[];
   setter: PeerSetter;
 }
 
 export default function ClickhouseForm({ settings, setter }: ConfigProps) {
+  const [show, setShow] = useState(false);
   const S3Labels = [
     'S3 Path',
     'Access Key ID',
@@ -108,40 +112,64 @@ export default function ClickhouseForm({ settings, setter }: ConfigProps) {
             />
           );
         })}
-      <Label
-        as='label'
-        style={{ marginTop: '1rem' }}
-        variant='subheadline'
-        colorName='lowContrast'
-      >
-        Transient S3 Stage
+
+      <Label variant='subheadline' as='label' style={{ marginTop: '2rem' }}>
+        Transient S3 Stage (Optional)
       </Label>
-      {settings
-        .filter((setting) => S3Labels.includes(setting.label))
-        .map((setting, id) => (
-          <RowWithTextField
-            key={id}
-            label={<Label>{setting.label}</Label>}
-            action={
-              <div
-                style={{
-                  display: 'flex',
-                  flexDirection: 'row',
-                  alignItems: 'center',
-                }}
-              >
-                <TextField
-                  variant='simple'
-                  onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                    handleChange(e.target.value, setting)
-                  }
-                  type={setting.type}
-                />
-                {setting.tips && <InfoPopover tips={setting.tips} />}
-              </div>
-            }
-          />
-        ))}
+      <Label as='label' style={{ display: 'block' }}>
+        PeerDB loads rows as files in an internal staging environment during
+        CDC, under the covers.
+        <br></br>
+        If you want this stage to belong to you, you can configure a bucket
+        below.
+      </Label>
+      <Button
+        className='IconButton'
+        aria-label='collapse'
+        onClick={() => {
+          setShow((prev) => !prev);
+        }}
+        style={{
+          height: '2em',
+          marginTop: '0.5rem',
+          marginBottom: '1rem',
+        }}
+      >
+        <div style={{ display: 'flex', alignItems: 'center' }}>
+          <h3 style={{ marginRight: '10px', fontSize: 15 }}>
+            Configure a stage
+          </h3>
+          <Icon name={`keyboard_double_arrow_${show ? 'up' : 'down'}`} />
+        </div>
+      </Button>
+
+      {show &&
+        settings
+          .filter((setting) => S3Labels.includes(setting.label))
+          .map((setting, id) => (
+            <RowWithTextField
+              key={id}
+              label={<Label>{setting.label}</Label>}
+              action={
+                <div
+                  style={{
+                    display: 'flex',
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                  }}
+                >
+                  <TextField
+                    variant='simple'
+                    onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                      handleChange(e.target.value, setting)
+                    }
+                    type={setting.type}
+                  />
+                  {setting.tips && <InfoPopover tips={setting.tips} />}
+                </div>
+              }
+            />
+          ))}
     </>
   );
 }