Merge branch 'main' into feat/integration-api-fields

reearth · Jun 21, 2024 · 6fa1d95 · 6fa1d95
2 parents 739cbe1 + a61e3bb
commit 6fa1d95
Show file tree

Hide file tree

Showing 14 changed files with 351 additions and 153 deletions.
diff --git a/web/e2e/settings/integrations.spec.ts b/web/e2e/settings/integrations.spec.ts
@@ -12,7 +12,6 @@ test("Integration CRUD and searching has succeeded", async ({ reearth, page }) =
   await reearth.goto("/", { waitUntil: "domcontentloaded" });
   await page.getByText("My Integrations").click();
 
-  await page.locator("div").filter({ hasText: "Create new integration" }).nth(4).click();
   await page
     .locator("div")
     .filter({ hasText: /^Create new integration$/ })

diff --git a/web/e2e/settings/member.spec.ts b/web/e2e/settings/member.spec.ts
@@ -13,8 +13,8 @@ test.afterEach(async ({ page }) => {
 test("Searching current members has succeeded", async ({ page }) => {
   await page.getByText("Member").click();
   await expect(page.getByRole("cell", { name: "OWNER" })).toBeVisible();
-  await page.getByPlaceholder("search for a member").click();
-  await page.getByPlaceholder("search for a member").fill("no member");
+  await page.getByPlaceholder("input search text").click();
+  await page.getByPlaceholder("input search text").fill("no member");
   await page.getByRole("button", { name: "search" }).click();
   await expect(page.getByRole("cell", { name: "OWNER" })).toBeHidden();
   await page.getByRole("button", { name: "close-circle" }).click();

diff --git a/web/src/components/molecules/Integration/IntegrationTable/index.tsx b/web/src/components/molecules/Integration/IntegrationTable/index.tsx
@@ -26,6 +26,11 @@ interface Props {
   onIntegrationSettingsModalOpen: (integrationMember: IntegrationMember) => void;
   setSelection: (input: { selectedRowKeys: Key[] }) => void;
   onIntegrationRemove: (integrationIds: string[]) => Promise<void>;
+  page: number;
+  pageSize: number;
+  onTableChange: (page: number, pageSize: number) => void;
+  loading: boolean;
+  onReload: () => void;
 }
 
 const IntegrationTable: React.FC<Props> = ({
@@ -36,6 +41,11 @@ const IntegrationTable: React.FC<Props> = ({
   onIntegrationSettingsModalOpen,
   setSelection,
   onIntegrationRemove,
+  page,
+  pageSize,
+  onTableChange,
+  loading,
+  onReload,
 }) => {
   const t = useT();
 
@@ -93,6 +103,15 @@ const IntegrationTable: React.FC<Props> = ({
     [onSearchTerm, t],
   );
 
+  const pagination = useMemo(
+    () => ({
+      showSizeChanger: true,
+      current: page,
+      pageSize: pageSize,
+    }),
+    [page, pageSize],
+  );
+
   const rowSelection: TableRowSelection = useMemo(
     () => ({
       selectedRowKeys: selection.selectedRowKeys,
@@ -106,30 +125,27 @@ const IntegrationTable: React.FC<Props> = ({
     [selection, setSelection],
   );
 
-  const AlertOptions = useCallback(
+  const alertOptions = useCallback(
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    (props: any) => {
-      return (
-        <Space size={16}>
-          <DeselectButton onClick={props.onCleanSelected}>
-            <Icon icon="clear" /> {t("Deselect")}
-          </DeselectButton>
-          <DeleteButton onClick={() => onIntegrationRemove?.(props.selectedRowKeys)}>
-            <Icon icon="delete" /> {t("Remove")}
-          </DeleteButton>
-        </Space>
-      );
-    },
+    (props: any) => (
+      <Space size={16}>
+        <DeselectButton onClick={props.onCleanSelected}>
+          <Icon icon="clear" /> {t("Deselect")}
+        </DeselectButton>
+        <DeleteButton onClick={() => onIntegrationRemove(props.selectedRowKeys)}>
+          <Icon icon="delete" /> {t("Remove")}
+        </DeleteButton>
+      </Space>
+    ),
     [onIntegrationRemove, t],
   );
 
   const options = useMemo(
     () => ({
       fullScreen: true,
-      reload: false,
-      setting: true,
+      reload: onReload,
     }),
-    [],
+    [onReload],
   );
 
   return (
@@ -160,25 +176,32 @@ const IntegrationTable: React.FC<Props> = ({
             </Suggestion>
           </EmptyTableWrapper>
         )}>
-        <ResizableProTable
-          dataSource={integrationMembers}
-          columns={columns}
-          tableAlertOptionRender={AlertOptions}
-          search={false}
-          rowKey="id"
-          options={options}
-          pagination={false}
-          toolbar={toolbar}
-          rowSelection={rowSelection}
-          heightOffset={72}
-        />
+        <TableWrapper>
+          <ResizableProTable
+            dataSource={integrationMembers}
+            columns={columns}
+            tableAlertOptionRender={alertOptions}
+            search={false}
+            rowKey="id"
+            options={options}
+            pagination={pagination}
+            toolbar={toolbar}
+            rowSelection={rowSelection}
+            loading={loading}
+            heightOffset={0}
+            onChange={pagination => {
+              onTableChange(pagination.current ?? 1, pagination.pageSize ?? 10);
+            }}
+          />
+        </TableWrapper>
       </ConfigProvider>
     </Wrapper>
   );
 };
 
 const Wrapper = styled.div`
   height: 100%;
+  padding: 16px 16px 0;
 `;
 
 const EmptyTableWrapper = styled.div`
@@ -206,8 +229,6 @@ const Title = styled.h1`
   color: #000;
 `;
 
-export default IntegrationTable;
-
 const DeselectButton = styled.a`
   display: flex;
   align-items: center;
@@ -225,3 +246,11 @@ const StyledIcon = styled(Icon)`
   color: #1890ff;
   font-size: 18px;
 `;
+
+const TableWrapper = styled.div`
+  background-color: #fff;
+  border-top: 1px solid #f0f0f0;
+  height: calc(100% - 72px);
+`;
+
+export default IntegrationTable;
diff --git a/web/src/components/molecules/Member/MemberRoleModal/index.tsx b/web/src/components/molecules/Member/MemberRoleModal/index.tsx
@@ -57,7 +57,7 @@ const MemberRoleModal: React.FC<Props> = ({ open, member, onClose, onSubmit }) =
         }}>
         <Form.Item
           name="role"
-          label="Role"
+          label={t("Role")}
           rules={[
             {
               required: true,