From 519b9d0a27b9786df8a9eb7e5abff5e3becf4eea Mon Sep 17 00:00:00 2001
From: 1ilit <lilitmousheghyan@gmail.com>
Date: Tue, 19 Sep 2023 15:48:09 +0300
Subject: [PATCH] add search table functionality

---
 src/components/editor_panel.jsx   |  38 --
 src/components/table_overview.jsx | 905 +++++++++++++++++-------------
 src/index.css                     |   4 -
 3 files changed, 503 insertions(+), 444 deletions(-)

diff --git a/src/components/editor_panel.jsx b/src/components/editor_panel.jsx
index dfe987f..09fbe9e 100644
--- a/src/components/editor_panel.jsx
+++ b/src/components/editor_panel.jsx
@@ -105,44 +105,6 @@ export default function EditorPanel(props) {
           add area
         </button>
         <br />
-        <button
-          onClick={() => {
-            const newTable = {
-              id: props.tables.length,
-              name: `table_${props.tables.length}`,
-              x: 0,
-              y: 0,
-              fields: [
-                {
-                  name: "id",
-                  type: "UUID",
-                  default: "",
-                  check: "",
-                  primary: true,
-                  unique: true,
-                  notNull: true,
-                  increment: true,
-                  comment: "",
-                },
-              ],
-              comment: "",
-              indices: [],
-              color: defaultTableTheme,
-            };
-            props.setTables((prev) => {
-              const updatedTables = [...prev, newTable];
-              return updatedTables;
-            });
-            props.setCode((prev) =>
-              prev === ""
-                ? `CREATE TABLE \`${newTable.name}\`;`
-                : `${prev}\n\nCREATE TABLE \`${newTable.name}\`;`
-            );
-          }}
-        >
-          add
-        </button>
-        <br />
         <button
           onClick={() => {
             const blob = new Blob([props.code], {
diff --git a/src/components/table_overview.jsx b/src/components/table_overview.jsx
index a60aeaf..8d1e19a 100644
--- a/src/components/table_overview.jsx
+++ b/src/components/table_overview.jsx
@@ -11,6 +11,7 @@ import {
   Popover,
   Checkbox,
   Select,
+  AutoComplete,
 } from "@douyinfe/semi-ui";
 import {
   IconMore,
@@ -18,10 +19,13 @@ import {
   IconColorPalette,
   IconDeleteStroked,
   IconCheckboxTick,
+  IconPlus,
+  IconSearch,
 } from "@douyinfe/semi-icons";
 
 export default function TableOverview(props) {
   const [indexActiveKey, setIndexActiveKey] = useState("");
+  const [indexActiveKeyTable, setIndexActiveKeyTable] = useState("");
 
   const updateColor = (id, c) => {
     const updatedTables = [...props.tables];
@@ -29,266 +33,274 @@ export default function TableOverview(props) {
     props.setTables(updatedTables);
   };
 
+  const [value, setValue] = useState("");
+  const [filteredResult, setFilteredResult] = useState(
+    props.tables.map((t) => {
+      return t.name;
+    })
+  );
+
+  const handleStringSearch = (value) => {
+    setFilteredResult(
+      props.tables
+        .map((t) => {
+          return t.name;
+        })
+        .filter((i) => i.includes(value))
+    );
+  };
+
+  const handleChange = (value) => {
+    setValue(value);
+  };
+
   return (
-    <Collapse>
-      {props.tables.map((t, i) => (
-        <Collapse.Panel
-          key={i}
-          header={
-            <div>
-              <Input defaultValue={t.name} borderless />
-            </div>
-          }
-          itemKey={`${i}`}
-        >
-          {t.fields.map((f, j) => (
-            <Form
-              key={j}
-              onChange={(value) => {
-                const updatedTables = [...props.tables];
-                updatedTables[i].fields = updatedTables[i].fields.map(
-                  (field, index) =>
-                    index === j ? { ...field, ...value.values } : field
-                );
-                props.setTables(updatedTables);
+    <>
+      <div className="p-2">
+        <Row gutter={6}>
+          <Col span={16}>
+            <AutoComplete
+              data={filteredResult}
+              value={value}
+              showClear
+              prefix={<IconSearch />}
+              placeholder="Search..."
+              emptyContent={<div className="p-3">No tables found</div>}
+              onSearch={(v) => handleStringSearch(v)}
+              onChange={(v) => handleChange(v)}
+              onSelect={(v) => {
+                const { id, name } = props.tables.find((t) => t.name === v);
+                setIndexActiveKeyTable(`${id}`);
+                document
+                  .getElementById(`${name}_scroll_id`)
+                  .scrollIntoView({ behavior: "smooth" });
+              }}
+              className="w-full"
+            />
+          </Col>
+          <Col span={8}>
+            <Button
+              icon={<IconPlus />}
+              block
+              onClick={() => {
+                const newTable = {
+                  id: props.tables.length,
+                  name: `table_${props.tables.length}`,
+                  x: 0,
+                  y: 0,
+                  fields: [
+                    {
+                      name: "id",
+                      type: "UUID",
+                      default: "",
+                      check: "",
+                      primary: true,
+                      unique: true,
+                      notNull: true,
+                      increment: true,
+                      comment: "",
+                    },
+                  ],
+                  comment: "",
+                  indices: [],
+                  color: defaultTableTheme,
+                };
+                props.setTables((prev) => {
+                  const updatedTables = [...prev, newTable];
+                  return updatedTables;
+                });
               }}
             >
-              <Row
-                type="flex"
-                justify="start"
-                align="middle"
-                gutter={6}
-                className="hover:bg-slate-100"
-              >
-                <Col span={7}>
-                  <Form.Input
-                    field="name"
-                    noLabel={true}
-                    initValue={f.name}
-                    className="m-0"
-                    placeholder="Name"
-                  />
-                </Col>
-                <Col span={8}>
-                  <Form.Select
-                    className="w-full"
-                    field="type"
-                    noLabel={true}
-                    optionList={sqlDataTypes.map((value, index) => {
-                      return {
-                        label: value,
-                        value: value,
-                      };
-                    })}
-                    filter
-                    initValue={f.type}
-                  ></Form.Select>
-                </Col>
-                <Col span={3}>
-                  <Button
-                    type={f.notNull ? "primary" : "tertiary"}
-                    title="Nullable"
-                    theme={f.notNull ? "solid" : "light"}
-                    onClick={() => {
-                      const updatedTables = [...props.tables];
-                      updatedTables[i].fields = updatedTables[i].fields.map(
-                        (field, index) =>
-                          index === j
-                            ? { ...field, notNull: !f.notNull }
-                            : field
-                      );
-                      props.setTables(updatedTables);
-                    }}
-                  >
-                    ?
-                  </Button>
-                </Col>
-                <Col span={3}>
-                  <Button
-                    type={f.primary ? "primary" : "tertiary"}
-                    title="Nullable"
-                    theme={f.primary ? "solid" : "light"}
-                    onClick={() => {
-                      const updatedTables = [...props.tables];
-                      updatedTables[i].fields = updatedTables[i].fields.map(
-                        (field, index) =>
-                          index === j
-                            ? { ...field, primary: !f.primary }
-                            : field
-                      );
-                      props.setTables(updatedTables);
-                    }}
-                    icon={<IconKeyStroked />}
-                  ></Button>
-                </Col>
-                <Col span={3}>
-                  <Popover
-                    content={
-                      <div className="px-1">
-                        <Form
-                          onChange={(value) => {
-                            const updatedTables = [...props.tables];
-                            updatedTables[i] = {
-                              ...updatedTables[i],
-                              fields: updatedTables[i].fields.map(
-                                (field, index) =>
-                                  index === j
-                                    ? { ...field, ...value.values }
-                                    : field
-                              ),
-                            };
-                            props.setTables(updatedTables);
-                          }}
-                        >
-                          <Form.Input
-                            field="default"
-                            label="Default"
-                            initValue={f.default}
-                            trigger="blur"
-                            placeholder="Set default"
-                          />
-                          <Form.Input
-                            field="check"
-                            label="Check Expression"
-                            trigger="blur"
-                            placeholder="Set constraint"
-                            initValue={f.check}
-                          />
-                          <div className="flex justify-between items-center my-3">
-                            <label htmlFor="unique" className="font-medium">
-                              Unique
-                            </label>
-                            <Checkbox
-                              value="unique"
-                              defaultChecked={f.unique}
-                              onChange={(checkedValues) => {
-                                const updatedTables = [...props.tables];
-                                updatedTables[i].fields = updatedTables[
-                                  i
-                                ].fields.map((field, index) =>
-                                  index === j
-                                    ? {
-                                        ...field,
-                                        [checkedValues.target.value]:
-                                          checkedValues.target.checked,
-                                      }
-                                    : field
-                                );
-                                props.setTables(updatedTables);
-                              }}
-                            ></Checkbox>
-                          </div>
-                          <div className="flex justify-between items-center my-3">
-                            <label htmlFor="increment" className="font-medium">
-                              Autoincrement
-                            </label>
-                            <Checkbox
-                              value="increment"
-                              defaultChecked={f.increment}
-                              onChange={(checkedValues) => {
-                                const updatedTables = [...props.tables];
-                                updatedTables[i].fields = updatedTables[
-                                  i
-                                ].fields.map((field, index) =>
-                                  index === j
-                                    ? {
-                                        ...field,
-                                        [checkedValues.target.value]:
-                                          checkedValues.target.checked,
-                                      }
-                                    : field
-                                );
-                                props.setTables(updatedTables);
-                              }}
-                            ></Checkbox>
-                          </div>
-                          <Form.TextArea
-                            field="comment"
-                            label="Comment"
-                            placeholder="Add comment"
-                            initValue={f.comment}
-                            autosize
-                            rows={2}
-                          />
-                        </Form>
-                        <Button
-                          icon={<IconDeleteStroked />}
-                          type="danger"
-                          block
-                          onClick={() => {
-                            const updatedTables = [...props.tables];
-                            const updatedFields = [...t.fields];
-                            updatedFields.splice(j, 1);
-                            updatedTables[i] = {
-                              ...t,
-                              fields: [...updatedFields],
-                            };
-                            props.setTables(updatedTables);
-                          }}
-                        >
-                          Delete
-                        </Button>
-                      </div>
-                    }
-                    trigger="click"
-                    position="rightTop"
-                    showArrow
-                  >
-                    <Button type="tertiary" icon={<IconMore />}></Button>
-                  </Popover>
-                </Col>
-              </Row>
-            </Form>
-          ))}
-          {t.indices.length > 0 && (
-            <Card
-              bodyStyle={{ padding: "4px" }}
-              style={{ marginTop: "12px", marginBottom: "12px" }}
-              headerLine={false}
+              Add table
+            </Button>
+          </Col>
+        </Row>
+      </div>
+      <Collapse
+        activeKey={indexActiveKeyTable}
+        onChange={(i) => setIndexActiveKeyTable(i)}
+      >
+        {props.tables.map((t, i) => (
+          <div id={`${t.name}_scroll_id`} key={i}>
+            <Collapse.Panel
+              header={
+                <div>
+                  <Input defaultValue={t.name} borderless />
+                </div>
+              }
+              itemKey={`${t.id}`}
             >
-              <Collapse
-                activeKey={indexActiveKey}
-                onChange={(itemKey) => setIndexActiveKey(itemKey)}
-              >
-                <Collapse.Panel header="Indices" itemKey="1">
-                  {t.indices.map((idx, k) => (
-                    <div
-                      className="flex justify-between items-center mb-2"
-                      key={k}
-                    >
-                      <Select
-                        placeholder="Select fields"
-                        multiple
-                        optionList={t.fields.map((e) => ({
-                          value: e.name,
-                          label: e.name,
-                        }))}
+              {t.fields.map((f, j) => (
+                <Form
+                  key={j}
+                  onChange={(value) => {
+                    const updatedTables = [...props.tables];
+                    updatedTables[i].fields = updatedTables[i].fields.map(
+                      (field, index) =>
+                        index === j ? { ...field, ...value.values } : field
+                    );
+                    props.setTables(updatedTables);
+                  }}
+                >
+                  <Row
+                    type="flex"
+                    justify="start"
+                    align="middle"
+                    gutter={6}
+                    className="hover:bg-slate-100"
+                  >
+                    <Col span={7}>
+                      <Form.Input
+                        field="name"
+                        noLabel={true}
+                        initValue={f.name}
+                        className="m-0"
+                        placeholder="Name"
+                      />
+                    </Col>
+                    <Col span={8}>
+                      <Form.Select
                         className="w-full"
-                        defaultValue={idx.fields}
-                        onChange={(value) => {
+                        field="type"
+                        noLabel={true}
+                        optionList={sqlDataTypes.map((value, index) => {
+                          return {
+                            label: value,
+                            value: value,
+                          };
+                        })}
+                        filter
+                        initValue={f.type}
+                      ></Form.Select>
+                    </Col>
+                    <Col span={3}>
+                      <Button
+                        type={f.notNull ? "primary" : "tertiary"}
+                        title="Nullable"
+                        theme={f.notNull ? "solid" : "light"}
+                        onClick={() => {
                           const updatedTables = [...props.tables];
-                          const updatedIndices = [...t.indices];
-                          updatedIndices[k] = {
-                            name: `${value.join("_")}_index`,
-                            fields: [...value],
-                          };
-                          updatedTables[i] = {
-                            ...t,
-                            indices: [...updatedIndices],
-                          };
+                          updatedTables[i].fields = updatedTables[i].fields.map(
+                            (field, index) =>
+                              index === j
+                                ? { ...field, notNull: !f.notNull }
+                                : field
+                          );
                           props.setTables(updatedTables);
                         }}
-                      />
+                      >
+                        ?
+                      </Button>
+                    </Col>
+                    <Col span={3}>
+                      <Button
+                        type={f.primary ? "primary" : "tertiary"}
+                        title="Nullable"
+                        theme={f.primary ? "solid" : "light"}
+                        onClick={() => {
+                          const updatedTables = [...props.tables];
+                          updatedTables[i].fields = updatedTables[i].fields.map(
+                            (field, index) =>
+                              index === j
+                                ? { ...field, primary: !f.primary }
+                                : field
+                          );
+                          props.setTables(updatedTables);
+                        }}
+                        icon={<IconKeyStroked />}
+                      ></Button>
+                    </Col>
+                    <Col span={3}>
                       <Popover
                         content={
                           <div className="px-1">
-                            <Form>
+                            <Form
+                              onChange={(value) => {
+                                const updatedTables = [...props.tables];
+                                updatedTables[i] = {
+                                  ...updatedTables[i],
+                                  fields: updatedTables[i].fields.map(
+                                    (field, index) =>
+                                      index === j
+                                        ? { ...field, ...value.values }
+                                        : field
+                                  ),
+                                };
+                                props.setTables(updatedTables);
+                              }}
+                            >
                               <Form.Input
-                                field="name"
-                                label="Name"
-                                initValue={idx.name}
+                                field="default"
+                                label="Default"
+                                initValue={f.default}
                                 trigger="blur"
-                                placeholder="Index name"
+                                placeholder="Set default"
+                              />
+                              <Form.Input
+                                field="check"
+                                label="Check Expression"
+                                trigger="blur"
+                                placeholder="Set constraint"
+                                initValue={f.check}
+                              />
+                              <div className="flex justify-between items-center my-3">
+                                <label htmlFor="unique" className="font-medium">
+                                  Unique
+                                </label>
+                                <Checkbox
+                                  value="unique"
+                                  defaultChecked={f.unique}
+                                  onChange={(checkedValues) => {
+                                    const updatedTables = [...props.tables];
+                                    updatedTables[i].fields = updatedTables[
+                                      i
+                                    ].fields.map((field, index) =>
+                                      index === j
+                                        ? {
+                                            ...field,
+                                            [checkedValues.target.value]:
+                                              checkedValues.target.checked,
+                                          }
+                                        : field
+                                    );
+                                    props.setTables(updatedTables);
+                                  }}
+                                ></Checkbox>
+                              </div>
+                              <div className="flex justify-between items-center my-3">
+                                <label
+                                  htmlFor="increment"
+                                  className="font-medium"
+                                >
+                                  Autoincrement
+                                </label>
+                                <Checkbox
+                                  value="increment"
+                                  defaultChecked={f.increment}
+                                  onChange={(checkedValues) => {
+                                    const updatedTables = [...props.tables];
+                                    updatedTables[i].fields = updatedTables[
+                                      i
+                                    ].fields.map((field, index) =>
+                                      index === j
+                                        ? {
+                                            ...field,
+                                            [checkedValues.target.value]:
+                                              checkedValues.target.checked,
+                                          }
+                                        : field
+                                    );
+                                    props.setTables(updatedTables);
+                                  }}
+                                ></Checkbox>
+                              </div>
+                              <Form.TextArea
+                                field="comment"
+                                label="Comment"
+                                placeholder="Add comment"
+                                initValue={f.comment}
+                                autosize
+                                rows={2}
                               />
                             </Form>
                             <Button
@@ -297,11 +309,11 @@ export default function TableOverview(props) {
                               block
                               onClick={() => {
                                 const updatedTables = [...props.tables];
-                                const updatedIndices = [...t.indices];
-                                updatedIndices.splice(k, 1);
+                                const updatedFields = [...t.fields];
+                                updatedFields.splice(j, 1);
                                 updatedTables[i] = {
                                   ...t,
-                                  indices: [...updatedIndices],
+                                  fields: [...updatedFields],
                                 };
                                 props.setTables(updatedTables);
                               }}
@@ -314,165 +326,254 @@ export default function TableOverview(props) {
                         position="rightTop"
                         showArrow
                       >
-                        <Button
-                          icon={<IconMore />}
-                          type="tertiary"
-                          style={{ marginLeft: "12px" }}
-                        ></Button>
+                        <Button type="tertiary" icon={<IconMore />}></Button>
                       </Popover>
-                    </div>
-                  ))}
-                </Collapse.Panel>
-              </Collapse>
-            </Card>
-          )}
-          <Card
-            bodyStyle={{ padding: "4px" }}
-            style={{ marginTop: "12px", marginBottom: "12px" }}
-            headerLine={false}
-          >
-            <Collapse>
-              <Collapse.Panel header="Comment" itemKey="1">
-                <Form
-                  onChange={(value) => {
-                    const updatedTables = [...props.tables];
-                    updatedTables[i] = {
-                      ...t,
-                      ...value.values,
-                    };
-                    props.setTables(updatedTables);
-                  }}
+                    </Col>
+                  </Row>
+                </Form>
+              ))}
+              {t.indices.length > 0 && (
+                <Card
+                  bodyStyle={{ padding: "4px" }}
+                  style={{ marginTop: "12px", marginBottom: "12px" }}
+                  headerLine={false}
                 >
-                  <Form.TextArea
-                    field="comment"
-                    noLabel={true}
-                    showClear
-                    onClear={() => {
+                  <Collapse
+                    activeKey={indexActiveKey}
+                    onChange={(itemKey) => setIndexActiveKey(itemKey)}
+                  >
+                    <Collapse.Panel header="Indices" itemKey="1">
+                      {t.indices.map((idx, k) => (
+                        <div
+                          className="flex justify-between items-center mb-2"
+                          key={k}
+                        >
+                          <Select
+                            placeholder="Select fields"
+                            multiple
+                            optionList={t.fields.map((e) => ({
+                              value: e.name,
+                              label: e.name,
+                            }))}
+                            className="w-full"
+                            defaultValue={idx.fields}
+                            onChange={(value) => {
+                              const updatedTables = [...props.tables];
+                              const updatedIndices = [...t.indices];
+                              updatedIndices[k] = {
+                                name: `${value.join("_")}_index`,
+                                fields: [...value],
+                              };
+                              updatedTables[i] = {
+                                ...t,
+                                indices: [...updatedIndices],
+                              };
+                              props.setTables(updatedTables);
+                            }}
+                          />
+                          <Popover
+                            content={
+                              <div className="px-1">
+                                <Form>
+                                  <Form.Input
+                                    field="name"
+                                    label="Name"
+                                    initValue={idx.name}
+                                    trigger="blur"
+                                    placeholder="Index name"
+                                  />
+                                </Form>
+                                <Button
+                                  icon={<IconDeleteStroked />}
+                                  type="danger"
+                                  block
+                                  onClick={() => {
+                                    const updatedTables = [...props.tables];
+                                    const updatedIndices = [...t.indices];
+                                    updatedIndices.splice(k, 1);
+                                    updatedTables[i] = {
+                                      ...t,
+                                      indices: [...updatedIndices],
+                                    };
+                                    props.setTables(updatedTables);
+                                  }}
+                                >
+                                  Delete
+                                </Button>
+                              </div>
+                            }
+                            trigger="click"
+                            position="rightTop"
+                            showArrow
+                          >
+                            <Button
+                              icon={<IconMore />}
+                              type="tertiary"
+                              style={{ marginLeft: "12px" }}
+                            ></Button>
+                          </Popover>
+                        </div>
+                      ))}
+                    </Collapse.Panel>
+                  </Collapse>
+                </Card>
+              )}
+              <Card
+                bodyStyle={{ padding: "4px" }}
+                style={{ marginTop: "12px", marginBottom: "12px" }}
+                headerLine={false}
+              >
+                <Collapse>
+                  <Collapse.Panel header="Comment" itemKey="1">
+                    <Form
+                      onChange={(value) => {
+                        const updatedTables = [...props.tables];
+                        updatedTables[i] = {
+                          ...t,
+                          ...value.values,
+                        };
+                        props.setTables(updatedTables);
+                      }}
+                    >
+                      <Form.TextArea
+                        field="comment"
+                        noLabel={true}
+                        showClear
+                        onClear={() => {
+                          const updatedTables = [...props.tables];
+                          updatedTables[i] = {
+                            ...t,
+                            comment: "",
+                          };
+                          props.setTables(updatedTables);
+                        }}
+                        initValue={t.comment}
+                        autosize
+                        placeholder="Add comment"
+                        rows={1}
+                      />
+                    </Form>
+                  </Collapse.Panel>
+                </Collapse>
+              </Card>
+              <Row gutter={6} className="mt-2">
+                <Col span={8}>
+                  <Popover
+                    content={
+                      <div>
+                        <div className="flex justify-between items-center p-2">
+                          <div className="font-medium">Theme</div>
+                          <Button
+                            type="tertiary"
+                            size="small"
+                            onClick={() => updateColor(i, defaultTableTheme)}
+                          >
+                            Clear
+                          </Button>
+                        </div>
+                        <hr />
+                        <div className="py-3">
+                          <div>
+                            {tableThemes
+                              .slice(0, Math.ceil(tableThemes.length / 2))
+                              .map((c) => (
+                                <button
+                                  key={c}
+                                  style={{ backgroundColor: c }}
+                                  className="p-3 rounded-full mx-1"
+                                  onClick={() => updateColor(i, c)}
+                                >
+                                  {t.color === c ? (
+                                    <IconCheckboxTick
+                                      style={{ color: "white" }}
+                                    />
+                                  ) : (
+                                    <IconCheckboxTick style={{ color: c }} />
+                                  )}
+                                </button>
+                              ))}
+                          </div>
+                          <div className="mt-3">
+                            {tableThemes
+                              .slice(Math.ceil(tableThemes.length / 2))
+                              .map((c) => (
+                                <button
+                                  key={c}
+                                  style={{ backgroundColor: c }}
+                                  className="p-3 rounded-full mx-1"
+                                  onClick={() => updateColor(i, c)}
+                                >
+                                  {t.color === c ? (
+                                    <IconCheckboxTick
+                                      style={{ color: "white" }}
+                                    />
+                                  ) : (
+                                    <IconCheckboxTick style={{ color: c }} />
+                                  )}
+                                </button>
+                              ))}
+                          </div>
+                        </div>
+                      </div>
+                    }
+                    trigger="click"
+                    position="bottomLeft"
+                    showArrow
+                  >
+                    <Button
+                      type="tertiary"
+                      icon={<IconColorPalette />}
+                    ></Button>
+                  </Popover>
+                </Col>
+                <Col span={8}>
+                  <Button
+                    block
+                    onClick={() => {
+                      setIndexActiveKey("1");
                       const updatedTables = [...props.tables];
                       updatedTables[i] = {
                         ...t,
-                        comment: "",
+                        indices: [
+                          ...t.indices,
+                          { name: `index_${t.indices.length}`, fields: [] },
+                        ],
                       };
                       props.setTables(updatedTables);
                     }}
-                    initValue={t.comment}
-                    autosize
-                    placeholder="Add comment"
-                    rows={1}
-                  />
-                </Form>
-              </Collapse.Panel>
-            </Collapse>
-          </Card>
-          <Row gutter={6} className="mt-2">
-            <Col span={8}>
-              <Popover
-                content={
-                  <div>
-                    <div className="flex justify-between items-center p-2">
-                      <div className="font-medium">Theme</div>
-                      <Button
-                        type="tertiary"
-                        size="small"
-                        onClick={() => updateColor(i, defaultTableTheme)}
-                      >
-                        Clear
-                      </Button>
-                    </div>
-                    <hr />
-                    <div className="py-3">
-                      <div>
-                        {tableThemes
-                          .slice(0, Math.ceil(tableThemes.length / 2))
-                          .map((c) => (
-                            <button
-                              key={c}
-                              style={{ backgroundColor: c }}
-                              className="p-3 rounded-full mx-1"
-                              onClick={() => updateColor(i, c)}
-                            >
-                              {t.color === c ? (
-                                <IconCheckboxTick style={{ color: "white" }} />
-                              ) : (
-                                <IconCheckboxTick style={{ color: c }} />
-                              )}
-                            </button>
-                          ))}
-                      </div>
-                      <div className="mt-3">
-                        {tableThemes
-                          .slice(Math.ceil(tableThemes.length / 2))
-                          .map((c) => (
-                            <button
-                              key={c}
-                              style={{ backgroundColor: c }}
-                              className="p-3 rounded-full mx-1"
-                              onClick={() => updateColor(i, c)}
-                            >
-                              {t.color === c ? (
-                                <IconCheckboxTick style={{ color: "white" }} />
-                              ) : (
-                                <IconCheckboxTick style={{ color: c }} />
-                              )}
-                            </button>
-                          ))}
-                      </div>
-                    </div>
-                  </div>
-                }
-                trigger="click"
-                position="bottomLeft"
-                showArrow
-              >
-                <Button type="tertiary" icon={<IconColorPalette />}></Button>
-              </Popover>
-            </Col>
-            <Col span={8}>
-              <Button
-                block
-                onClick={() => {
-                  setIndexActiveKey("1");
-                  const updatedTables = [...props.tables];
-                  updatedTables[i] = {
-                    ...t,
-                    indices: [
-                      ...t.indices,
-                      { name: `index_${t.indices.length}`, fields: [] },
-                    ],
-                  };
-                  props.setTables(updatedTables);
-                }}
-              >
-                Add index
-              </Button>
-            </Col>
-            <Col span={8}>
-              <Button
-                onClick={() => {
-                  const updatedTables = [...props.tables];
-                  updatedTables[i].fields = [
-                    ...updatedTables[i].fields,
-                    {
-                      name: "",
-                      type: "",
-                      default: "",
-                      primary: false,
-                      unique: false,
-                      notNull: false,
-                      increment: false,
-                      comment: "",
-                    },
-                  ];
-                  props.setTables(updatedTables);
-                }}
-                block
-              >
-                Add field
-              </Button>
-            </Col>
-          </Row>
-        </Collapse.Panel>
-      ))}
-    </Collapse>
+                  >
+                    Add index
+                  </Button>
+                </Col>
+                <Col span={8}>
+                  <Button
+                    onClick={() => {
+                      const updatedTables = [...props.tables];
+                      updatedTables[i].fields = [
+                        ...updatedTables[i].fields,
+                        {
+                          name: "",
+                          type: "",
+                          default: "",
+                          primary: false,
+                          unique: false,
+                          notNull: false,
+                          increment: false,
+                          comment: "",
+                        },
+                      ];
+                      props.setTables(updatedTables);
+                    }}
+                    block
+                  >
+                    Add field
+                  </Button>
+                </Col>
+              </Row>
+            </Collapse.Panel>
+          </div>
+        ))}
+      </Collapse>
+    </>
   );
 }
diff --git a/src/index.css b/src/index.css
index a3dadd2..44afa54 100644
--- a/src/index.css
+++ b/src/index.css
@@ -6,10 +6,6 @@
   outline: none !important;
 }
 
-body {
-  overflow: hidden;
-}
-
 .bg-blue {
   background-color: #124559;
 }