[fix](has filter info list): table filter data change

src/hooks/useTable/index.test.ts

@@ -114,7 +114,7 @@ describe('useTable', () => {
         {} as any
       );
     });
-    expect(result.current.pagination).toEqual({ pageIndex: 11, pageSize: 20 });
+    expect(result.current.pagination).toEqual({ pageIndex: 11, pageSize: 10 });
 
     act(() => {
       result.current.tableChange(
@@ -125,7 +125,7 @@ describe('useTable', () => {
       );
     });
     expect(result.current.pagination).toEqual({
-      pageIndex: 111,
+      pageIndex: 1,
       pageSize: 200,
     });
   });

src/hooks/useTable/index.ts

@@ -4,6 +4,7 @@ import React, { useState } from 'react';
 import { Dictionary } from '../../types/common.type';
 import { TablePagination, UseTableOption } from './index.type';
 import { SorterResult } from 'antd/lib/table/interface';
+import { isEqual } from 'lodash';
 
 const useTable = <T = Dictionary>(option?: UseTableOption) => {
   const {
@@ -19,10 +20,26 @@ const useTable = <T = Dictionary>(option?: UseTableOption) => {
     SorterResult<any> | SorterResult<any>[]
   >();
 
-  const submitFilter = React.useCallback(() => {
-    const values = form.getFieldsValue();
-    setFilterInfo(values);
-  }, [form]);
+  const [pagination, setPagination] = React.useState<TablePagination>({
+    pageIndex: defaultPageIndex,
+    pageSize: defaultPageSize,
+  });
+  const [filterInfo, updateFilterInfo] = React.useState<T>(
+    defaultFilterInfo as any
+  );
+
+  const setFilterInfo = React.useCallback((values: T) => {
+      if (!isEqual(values, filterInfo)) {
+        setPagination((prevPage) => {
+          return {
+            pageIndex: 1,
+            pageSize: prevPage.pageSize,
+          };
+        });
+      }
+      updateFilterInfo(values);
+    },
+    [filterInfo]);
 
   /**
    * TODO:
@@ -31,28 +48,32 @@ const useTable = <T = Dictionary>(option?: UseTableOption) => {
   const resetFilter = React.useCallback(() => {
     form.resetFields();
     setFilterInfo({} as any);
-  }, [form]);
+  }, [form, setFilterInfo]);
 
-  const [pagination, setPagination] = React.useState<TablePagination>({
-    pageIndex: defaultPageIndex,
-    pageSize: defaultPageSize,
-  });
-  const [filterInfo, setFilterInfo] = React.useState<T>(
-    defaultFilterInfo as any
-  );
+  const submitFilter = React.useCallback(() => {
+    const values = form.getFieldsValue();
+    setFilterInfo(values);
+  }, [form, setFilterInfo]);
 
-  const tableChange = React.useCallback<Required<TableProps<any>>['onChange']>(
+  const tableChange = React.useCallback<Required<TableProps<any>>["onChange"]>(
     (newPagination, _, sorter) => {
       setSorterInfo(sorter);
+      let paginationParams = {
+        pageIndex: defaultPageIndex,
+        pageSize: defaultPageSize,
+      };
+      if (newPagination.pageSize && newPagination.pageSize !== pagination.pageSize) {
+        paginationParams.pageSize = newPagination.pageSize;
+        setPagination(paginationParams);
+        return;
+      }
       if (
-        newPagination.current !== pagination.pageIndex ||
-        newPagination.pageSize !== pagination.pageSize
+        newPagination.current &&
+        newPagination.current !== pagination.pageIndex
       ) {
-        setPagination({
-          pageIndex: newPagination.current ?? defaultPageIndex,
-          pageSize: newPagination.pageSize ?? defaultPageSize,
-        });
+        paginationParams.pageIndex = newPagination.current;
       }
+      setPagination(paginationParams);
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [pagination.pageIndex, pagination.pageSize]

src/page/AuditPlan/PlanDetail/Detail/Report/index.tsx

@@ -85,17 +85,17 @@ const AuditPlanReport: React.FC = () => {
     <Card
       title={
         <>
-          {t('auditPlan.report.time', {
-            time: formatTime(reportInfo?.audit_plan_report_timestamp, '--'),
+          {t("auditPlan.report.time", {
+            time: formatTime(reportInfo?.audit_plan_report_timestamp, "--"),
           })}
           &nbsp;
           <Typography.Text type="secondary" className="font-size-small">
-            {t('auditPlan.report.source', {
-              source: reportInfo?.score ?? '--',
+            {t("auditPlan.report.source", {
+              source: reportInfo?.score ?? "--",
             })}
             &nbsp;
-            {t('auditPlan.report.passRage', {
-              rage: reportInfo?.pass_rate ?? '--',
+            {t("auditPlan.report.passRage", {
+              rage: reportInfo?.pass_rate ?? "--",
             })}
           </Typography.Text>
         </>
@@ -106,7 +106,7 @@ const AuditPlanReport: React.FC = () => {
           onClick={exportReport}
           disabled={exportButtonDisabled}
         >
-          {t('auditPlan.report.export.buttonText')}
+          {t("auditPlan.report.export.buttonText")}
         </Button>
       }
     >
@@ -117,7 +117,7 @@ const AuditPlanReport: React.FC = () => {
         columns={AuditPlanReportTableHeader(handleClickAnalyze)}
         pagination={{
           showSizeChanger: true,
-          total: data?.total ?? 0,
+          total: data?.total ?? 0
         }}
         onChange={tableChange}
       />

src/page/AuditPlan/PlanList/index.tsx

@@ -133,7 +133,7 @@ const PlanList = () => {
     <Card
       title={
         <Space>
-          {t('auditPlan.list.title')}
+          {t("auditPlan.list.title")}
           <Button onClick={refresh}>
             <SyncOutlined spin={loading} />
           </Button>
@@ -142,7 +142,7 @@ const PlanList = () => {
       extra={[
         <EmptyBox if={!projectIsArchive} key="create-audit-plan">
           <Link to={`project/${projectName}/auditPlan/create`}>
-            <Button type="primary">{t('auditPlan.action.create')}</Button>
+            <Button type="primary">{t("auditPlan.action.create")}</Button>
           </Link>
         </EmptyBox>,
       ]}
@@ -160,6 +160,7 @@ const PlanList = () => {
         pagination={{
           total: data?.total,
           showSizeChanger: true,
+          current: pagination.pageIndex,
         }}
         loading={loading}
         onChange={tableChange}

src/page/DataSource/DataSourceList/index.tsx

@@ -111,7 +111,7 @@ const DataSourceList = () => {
     <Card
       title={
         <Space>
-          {t('dataSource.databaseListTitle')}
+          {t("dataSource.databaseListTitle")}
           <Button onClick={refresh}>
             <SyncOutlined spin={loading} />
           </Button>
@@ -120,7 +120,7 @@ const DataSourceList = () => {
       extra={
         <EmptyBox if={actionPermission && !projectIsArchive}>
           <Link to={`project/${projectName}/data/create`}>
-            <Button type="primary">{t('dataSource.addDatabase')}</Button>
+            <Button type="primary">{t("dataSource.addDatabase")}</Button>
           </Link>
         </EmptyBox>
       }
@@ -142,6 +142,7 @@ const DataSourceList = () => {
         )}
         pagination={{
           total: data?.total,
+          current: pagination.pageIndex,
         }}
         onChange={tableChange}
       />

src/page/Member/MemberGroupList/index.tsx

@@ -121,7 +121,7 @@ const UserGroupList: React.FC = () => {
       style={{ marginTop: theme.common.padding }}
       title={
         <Space>
-          {t('member.memberGroupList.title')}
+          {t("member.memberGroupList.title")}
           <Button onClick={refresh}>
             <SyncOutlined spin={loading} />
           </Button>
@@ -133,7 +133,7 @@ const UserGroupList: React.FC = () => {
           key="create-user-group"
         >
           <Button type="primary" onClick={createAction}>
-            {t('member.memberGroupList.createAction')}
+            {t("member.memberGroupList.createAction")}
           </Button>
         </EmptyBox>,
       ]}
@@ -152,6 +152,7 @@ const UserGroupList: React.FC = () => {
         pagination={{
           total: data?.total,
           showSizeChanger: true,
+          current: pagination.pageIndex,
         }}
         onChange={tableChange}
       />

src/page/Member/MemberList/index.tsx

@@ -114,7 +114,7 @@ const MemberList: React.FC = () => {
     <Card
       title={
         <Space>
-          {t('member.memberList.title')}
+          {t("member.memberList.title")}
           <Button onClick={refresh}>
             <SyncOutlined spin={loading} />
           </Button>
@@ -123,7 +123,7 @@ const MemberList: React.FC = () => {
       extra={[
         <EmptyBox if={actionPermission && !projectIsArchive} key="create-user">
           <Button type="primary" onClick={createAction}>
-            {t('member.memberList.createAction')}
+            {t("member.memberList.createAction")}
           </Button>
         </EmptyBox>,
       ]}
@@ -142,6 +142,7 @@ const MemberList: React.FC = () => {
         pagination={{
           total: data?.total,
           showSizeChanger: true,
+          current: pagination.pageIndex,
         }}
         onChange={tableChange}
       />

src/page/OperationRecord/OperationRecordList/List.tsx

@@ -80,7 +80,7 @@ const OperationRecordList: React.FC = () => {
     <Card
       title={
         <Space>
-          {t('operationRecord.list.title')}
+          {t("operationRecord.list.title")}
           <Button data-testid="refresh-table" onClick={refresh}>
             <SyncOutlined spin={false} />
           </Button>
@@ -93,7 +93,7 @@ const OperationRecordList: React.FC = () => {
           onClick={exportRecord}
           disabled={exportButtonEnableStatus}
         >
-          {t('operationRecord.list.exportButtonText')}
+          {t("operationRecord.list.exportButtonText")}
         </Button>,
       ]}
     >
@@ -105,6 +105,7 @@ const OperationRecordList: React.FC = () => {
         pagination={{
           total: data?.total,
           showSizeChanger: true,
+          current: pagination.pageIndex,
         }}
         loading={loading}
         onChange={tableChange}

src/page/Order/AuditResult/index.tsx

@@ -173,9 +173,10 @@ const AuditResult: React.FC<AuditResultProps> = (props) => {
         pagination={{
           total: data?.total,
           showSizeChanger: true,
+          current: pagination.pageIndex,
         }}
         columns={
-          mode === 'order'
+          mode === "order"
             ? orderAuditResultColumn(updateSqlDescribe, handleClickAnalyze)
             : AuditResultRecordColumn(updateSqlDescribe, handleClickAnalyze)
         }
@@ -195,7 +196,7 @@ const AuditResult: React.FC<AuditResultProps> = (props) => {
             ) : null,
           columnWidth: 14,
         }}
-        scroll={{ x: 'max-content' }}
+        scroll={{ x: "max-content" }}
       />
     </Card>
   );

src/page/Order/List/index.tsx

@@ -352,6 +352,7 @@ const OrderList = () => {
               pagination={{
                 total: orderList?.total,
                 showSizeChanger: true,
+                current: pagination.pageIndex,
               }}
               onChange={tableChange}
               onRow={(record) => ({

src/page/SQLManagement/SQLPanel/index.tsx

@@ -37,455 +37,456 @@
   filter_status: GetSqlManageListFilterStatusEnum.unhandled,
 };
 
 const SQLPanel: React.FC = () => {
   const { t } = useTranslation();
   const {
     pagination,
     filterForm,
     filterInfo,
     submitFilter,
     tableChange,
     resetFilter,
     sorterInfo,
   } = useTable<SQLPanelFilterFormFields>({
     defaultFilterInfo,
   });
 
   const { projectName } = useCurrentProjectName();
   const { username, isAdmin, isProjectManager } = useCurrentUser();
   const [SQLNum, setSQLNum] = useState<SQLStatisticsProps>({
     SQLTotalNum: 0,
     problemSQlNum: 0,
     optimizedSQLNum: 0,
   });
   const [selectedRowKeys, setSelectedRowKeys] = useState<number[]>([]);
   const actionPermission = useMemo(() => {
     return isAdmin || isProjectManager(projectName);
   }, [isAdmin, isProjectManager, projectName]);
   const [
     batchActionsLoading,
     { setFalse: finishBatchAction, setTrue: startBatchAction },
   ] = useBoolean();
   const [
     signalActionsLoading,
     { setFalse: finishSignalAction, setTrue: startSignalAction },
   ] = useBoolean();
 
   const rowSelection: TableRowSelection<ISqlManage> = {
     selectedRowKeys,
     onChange: (selectedRowKeys) => {
       setSelectedRowKeys(selectedRowKeys as number[]);
     },
   };
 
   const { data, loading, refresh } = useRequest(
     () => {
       const getSortField = () => {
         if (Array.isArray(sorterInfo)) {
           return undefined;
         }
 
         if (sorterInfo?.field === 'first_appear_time') {
           return GetSqlManageListSortFieldEnum.first_appear_timestamp;
         }
         if (sorterInfo?.field === 'last_appear_time') {
           return GetSqlManageListSortFieldEnum.last_receive_timestamp;
         }
         if (sorterInfo?.field === 'appear_num') {
           return GetSqlManageListSortFieldEnum.fp_count;
         }
       };
       const getSortOrder = () => {
         if (Array.isArray(sorterInfo)) {
           return undefined;
         }
 
         if (sorterInfo?.order === 'ascend') {
           return GetSqlManageListSortOrderEnum.asc;
         }
 
         if (sorterInfo?.order === 'descend') {
           return GetSqlManageListSortOrderEnum.desc;
         }
       };
       return SqlManage.GetSqlManageList({
         project_name: projectName,
         page_index: pagination.pageIndex,
         page_size: pagination.pageSize,
         filter_assignee: !!filterInfo.filter_assignee ? username : undefined,
         filter_last_audit_start_time_from: translateTimeForRequest(
           filterInfo.filter_last_audit_time?.[0]
         ),
         filter_last_audit_start_time_to: translateTimeForRequest(
           filterInfo.filter_last_audit_time?.[1]
         ),
 
         fuzzy_search_sql_fingerprint: filterInfo.fuzzy_search_sql_fingerprint,
         filter_instance_name: filterInfo.filter_instance_name,
         filter_status: filterInfo.filter_status,
         filter_source: filterInfo.filter_source,
         filter_audit_level: filterInfo.filter_audit_level,
         filter_db_type: filterInfo.filter_rule?.split(
           DB_TYPE_RULE_NAME_SEPARATOR
         )?.[0],
         filter_rule_name: filterInfo.filter_rule?.split(
           DB_TYPE_RULE_NAME_SEPARATOR
         )?.[1],
         fuzzy_search_endpoint: filterInfo.fuzzy_search_endpoint,
         sort_field: getSortField(),
         sort_order: getSortOrder(),
       }).then((res) => {
         setSQLNum({
           SQLTotalNum: res.data?.sql_manage_total_num ?? 0,
           problemSQlNum: res.data?.sql_manage_bad_num ?? 0,
           optimizedSQLNum: res.data?.sql_manage_optimized_num ?? 0,
         });
         return {
           list: res.data?.data ?? [],
           total: res.data?.sql_manage_total_num ?? 0,
         };
       });
     },
     {
       refreshDeps: [pagination, filterInfo, sorterInfo],
     }
   );
 
   const batchAssignment = (members: string[]) => {
     if (!actionPermission || selectedRowKeys.length === 0) {
       return;
     }
     startBatchAction();
     return SqlManage.BatchUpdateSqlManage({
       project_name: projectName,
       sql_manage_id_list: selectedRowKeys,
       assignees: members,
     })
       .then((res) => {
         if (res.data.code === ResponseCode.SUCCESS) {
           message.success(
             t('sqlManagement.table.actions.batchAssignmentSuccessTips')
           );
           setSelectedRowKeys([]);
           refresh();
         }
       })
       .finally(() => {
         finishBatchAction();
       });
   };
 
   const batchSolve = () => {
     if (!actionPermission || selectedRowKeys.length === 0) {
       return;
     }
     startBatchAction();
     SqlManage.BatchUpdateSqlManage({
       project_name: projectName,
       status: BatchUpdateSqlManageReqStatusEnum.solved,
       sql_manage_id_list: selectedRowKeys,
     })
       .then((res) => {
         if (res.data.code === ResponseCode.SUCCESS) {
           message.success(
             t('sqlManagement.table.actions.batchSolveSuccessTips')
           );
           setSelectedRowKeys([]);
           refresh();
         }
       })
       .finally(() => {
         finishBatchAction();
       });
   };
   const batchIgnore = () => {
     if (!actionPermission || selectedRowKeys.length === 0) {
       return;
     }
     startBatchAction();
     SqlManage.BatchUpdateSqlManage({
       project_name: projectName,
       status: BatchUpdateSqlManageReqStatusEnum.ignored,
       sql_manage_id_list: selectedRowKeys,
     })
       .then((res) => {
         if (res.data.code === ResponseCode.SUCCESS) {
           message.success(
             t('sqlManagement.table.actions.batchIgnoreSuccessTips')
           );
           setSelectedRowKeys([]);
           refresh();
         }
       })
       .finally(() => {
         finishBatchAction();
       });
   };
 
   const updateRemarkProtect = useRef(false);
 
   const updateRemark = useCallback(
     (id: number, remark: string) => {
       if (updateRemarkProtect.current || !actionPermission) {
         return;
       }
       updateRemarkProtect.current = true;
       SqlManage.BatchUpdateSqlManage({
         project_name: projectName,
         sql_manage_id_list: [id],
         remark,
       })
         .then((res) => {
           if (res.data.code === ResponseCode.SUCCESS) {
             refresh();
           }
         })
         .finally(() => {
           updateRemarkProtect.current = false;
         });
     },
     [actionPermission, projectName, refresh]
   );
 
   const updateSQLStatus = useCallback(
     (id: number, status: BatchUpdateSqlManageReqStatusEnum) => {
       if (!actionPermission) {
         return;
       }
       startSignalAction();
       return SqlManage.BatchUpdateSqlManage({
         project_name: projectName,
         sql_manage_id_list: [id],
         status,
       })
         .then((res) => {
           if (res.data.code === ResponseCode.SUCCESS) {
             message.success(
               t('sqlManagement.table.actions.signalUpdateStatusSuccessTips')
             );
             refresh();
           }
         })
         .finally(() => {
           finishSignalAction();
         });
     },
     [
       actionPermission,
       finishSignalAction,
       projectName,
       refresh,
       startSignalAction,
       t,
     ]
   );
 
   const signalAssignment = useCallback(
     (id: number, members: string[]) => {
       if (!actionPermission) {
         return;
       }
       startSignalAction();
       return SqlManage.BatchUpdateSqlManage({
         project_name: projectName,
         sql_manage_id_list: [id],
         assignees: members,
       })
         .then((res) => {
           if (res.data.code === ResponseCode.SUCCESS) {
             message.success(
               t('sqlManagement.table.actions.signalAssignmentSuccessTips')
             );
             refresh();
           }
         })
         .finally(() => {
           finishSignalAction();
         });
     },
     [
       actionPermission,
       finishSignalAction,
       projectName,
       refresh,
       startSignalAction,
       t,
     ]
   );
 
   const [
     exportButtonDisabled,
     { setFalse: finishExport, setTrue: startExport },
   ] = useBoolean(false);
 
   const exportAction = () => {
     startExport();
     const hideLoading = message.loading(
       t('sqlManagement.table.actions.exporting')
     );
 
     const filterValues = filterForm.getFieldsValue();
 
     const params: IExportSqlManageV1Params = {
       project_name: projectName,
       fuzzy_search_sql_fingerprint: filterValues.fuzzy_search_sql_fingerprint,
       filter_assignee: !!filterValues.filter_assignee ? username : undefined,
       filter_instance_name: filterValues.filter_instance_name,
       filter_source: filterValues.filter_source as
         | exportSqlManageV1FilterSourceEnum
         | undefined,
       filter_audit_level: filterValues.filter_audit_level as
         | exportSqlManageV1FilterAuditLevelEnum
         | undefined,
       filter_last_audit_start_time_from: translateTimeForRequest(
         filterValues.filter_last_audit_time?.[0]
       ),
       filter_last_audit_start_time_to: translateTimeForRequest(
         filterValues.filter_last_audit_time?.[1]
       ),
       filter_status: filterValues.filter_status as
         | exportSqlManageV1FilterStatusEnum
         | undefined,
       filter_db_type: filterValues.filter_rule?.split(
         DB_TYPE_RULE_NAME_SEPARATOR
       )?.[0],
       filter_rule_name: filterValues.filter_rule?.split(
         DB_TYPE_RULE_NAME_SEPARATOR
       )?.[1],
       fuzzy_search_endpoint: filterValues.fuzzy_search_endpoint,
     };
 
     SqlManage.exportSqlManageV1(params, { responseType: 'blob' })
       .then((res) => {
         if (res.data.code === ResponseCode.SUCCESS) {
           message.success(t('sqlManagement.table.actions.exportSuccessTips'));
         }
       })
       .finally(() => {
         hideLoading();
         finishExport();
       });
   };
 
   return (
     <section className="padding-content">
       <Card>
         <Space direction="vertical" size={16} className="full-width-element">
           <SQLStatistics {...SQLNum} />
 
           <FilterForm
             form={filterForm}
             reset={resetFilter}
             submit={submitFilter}
             projectName={projectName}
           />
 
           <Divider style={{ margin: 0 }} />
 
           <Space>
             <EmptyBox if={actionPermission}>
               <Space>
                 <AssignMember
                   disabled={selectedRowKeys.length === 0 || batchActionsLoading}
                   projectName={projectName}
                   onConfirm={batchAssignment}
                 >
                   <Button
                     disabled={
                       selectedRowKeys.length === 0 || batchActionsLoading
                     }
                     type="primary"
                   >
-                    {t('sqlManagement.table.actions.batchAssignment')}
+                    {t("sqlManagement.table.actions.batchAssignment")}
                   </Button>
                 </AssignMember>
 
                 <Popconfirm
-                  title={t('sqlManagement.table.actions.batchSolveTips')}
+                  title={t("sqlManagement.table.actions.batchSolveTips")}
                   placement="topLeft"
-                  okText={t('common.ok')}
+                  okText={t("common.ok")}
                   disabled={selectedRowKeys.length === 0 || batchActionsLoading}
                   onConfirm={batchSolve}
                 >
                   <Button
                     disabled={
                       selectedRowKeys.length === 0 || batchActionsLoading
                     }
                     type="primary"
                   >
-                    {t('sqlManagement.table.actions.batchSolve')}
+                    {t("sqlManagement.table.actions.batchSolve")}
                   </Button>
                 </Popconfirm>
                 <Popconfirm
-                  title={t('sqlManagement.table.actions.batchIgnoreTips')}
+                  title={t("sqlManagement.table.actions.batchIgnoreTips")}
                   placement="topLeft"
-                  okText={t('common.ok')}
+                  okText={t("common.ok")}
                   disabled={selectedRowKeys.length === 0 || batchActionsLoading}
                   onConfirm={batchIgnore}
                 >
                   <Button
                     disabled={
                       selectedRowKeys.length === 0 || batchActionsLoading
                     }
                     type="primary"
                   >
-                    {t('sqlManagement.table.actions.batchIgnore')}
+                    {t("sqlManagement.table.actions.batchIgnore")}
                   </Button>
                 </Popconfirm>
               </Space>
             </EmptyBox>
 
             <Button
               type="primary"
               onClick={exportAction}
               disabled={exportButtonDisabled}
             >
-              {t('sqlManagement.table.actions.export')}
+              {t("sqlManagement.table.actions.export")}
             </Button>
           </Space>
 
           <Table
             className="sql-management-table-namespace"
             onChange={tableChange}
             rowKey={(record: ISqlManage) => {
               return record?.id ?? 0;
             }}
             rowSelection={actionPermission ? rowSelection : undefined}
             loading={loading}
             dataSource={data?.list}
             columns={SQLPanelColumns({
               projectName,
               updateRemark,
               signalAssignment,
               signalActionsLoading,
               actionPermission,
               username,
               updateSQLStatus,
             })}
             pagination={{
               showSizeChanger: true,
               total: data?.total ?? 0,
+              current: pagination.pageIndex,
             }}
             expandable={{
               expandedRowRender,
               rowExpandable: (record) =>
                 !!record.audit_result && record.audit_result.length > 1,
               expandIcon: ({ expanded, onExpand, record }) =>
                 !!record.audit_result && record.audit_result.length > 1 ? (
                   expanded ? (
                     <UpOutlined onClick={(e) => onExpand(record, e)} />
                   ) : (
                     <DownOutlined onClick={(e) => onExpand(record, e)} />
                   )
                 ) : null,
               columnWidth: 14,
             }}
-            scroll={{ x: 'max-content' }}
+            scroll={{ x: "max-content" }}
           />
         </Space>
       </Card>
     </section>
   );
 };
 
 export default SQLPanel;