fix(web): styling and translation issues

web/e2e/project/item/fields/reference.spec.ts

@@ -25,17 +25,13 @@ test("One-way reference field creating and updating has succeeded", async ({ pag
   await page.locator("li").filter({ hasText: "Text" }).locator("div").first().click();
   await page.getByLabel("Display name").click();
   await page.getByLabel("Display name").fill("text");
-  await page.getByLabel("Settings").locator("#key").click();
-  await page.getByLabel("Settings").locator("#key").fill("text");
   await page.getByLabel("Use as title").check();
   await page.getByRole("button", { name: "OK" }).click();
   await closeNotification(page);
   await page.getByRole("tab", { name: "Meta Data" }).click();
   await page.locator("li").filter({ hasText: "Boolean" }).locator("div").first().click();
   await page.getByLabel("Display name").click();
   await page.getByLabel("Display name").fill("boolean");
-  await page.getByLabel("Settings").locator("#key").click();
-  await page.getByLabel("Settings").locator("#key").fill("boolean");
   await page.getByRole("button", { name: "OK" }).click();
   await closeNotification(page);
   await page.getByText("Content").click();
@@ -66,8 +62,6 @@ test("One-way reference field creating and updating has succeeded", async ({ pag
   await page.getByRole("button", { name: "Next" }).click();
   await page.getByLabel("Display name").click();
   await page.getByLabel("Display name").fill("ref");
-  await page.getByLabel("Field Key").click();
-  await page.getByLabel("Field Key").fill("ref");
   await page.getByLabel("Description(optional)").click();
   await page.getByLabel("Description(optional)").fill("ref description");
   await expect(
@@ -144,8 +138,6 @@ test("Two-way reference field editing has succeeded", async ({ page }) => {
   await page.locator("li").filter({ hasText: "Text" }).locator("div").first().click();
   await page.getByLabel("Display name").click();
   await page.getByLabel("Display name").fill("text");
-  await page.getByLabel("Settings").locator("#key").click();
-  await page.getByLabel("Settings").locator("#key").fill("text");
   await page.getByLabel("Use as title").check();
   await page.getByRole("button", { name: "OK" }).click();
   await closeNotification(page);
@@ -167,8 +159,6 @@ test("Two-way reference field editing has succeeded", async ({ page }) => {
   await page.locator("li").filter({ hasText: "Text" }).locator("div").first().click();
   await page.getByLabel("Display name").click();
   await page.getByLabel("Display name").fill("text");
-  await page.getByLabel("Settings").locator("#key").click();
-  await page.getByLabel("Settings").locator("#key").fill("text");
   await page.getByLabel("Use as title").check();
   await page.getByRole("button", { name: "OK" }).click();
   await closeNotification(page);
@@ -179,8 +169,6 @@ test("Two-way reference field editing has succeeded", async ({ page }) => {
   await page.getByRole("button", { name: "Next" }).click();
   await page.getByLabel("Display name").click();
   await page.getByLabel("Display name").fill("ref1");
-  await page.getByLabel("Field Key").click();
-  await page.getByLabel("Field Key").fill("ref1");
   await page.getByLabel("Description(optional)").click();
   await page.getByLabel("Description(optional)").fill("ref1 description");
   await expect(
@@ -195,8 +183,6 @@ test("Two-way reference field editing has succeeded", async ({ page }) => {
 
   await page.getByLabel("Display name").click();
   await page.getByLabel("Display name").fill("ref2");
-  await page.getByLabel("Field Key").click();
-  await page.getByLabel("Field Key").fill("ref2");
   await page.getByLabel("Description(optional)").click();
   await page.getByLabel("Description(optional)").fill("ref2 description");
   await page.getByRole("tab", { name: "Validation" }).click();

web/e2e/settings/myIntegrations.spec.ts

@@ -83,11 +83,7 @@ test("Webhook CRUD has succeeded", async ({ page }) => {
   await closeNotification(page);
   await expect(page.getByLabel("Webhook")).not.toContainText("new webhook name");
 
-  await page
-    .locator("p")
-    .filter({ hasText: "Create a new New Webhook" })
-    .getByRole("button")
-    .click();
+  await page.locator("p").filter({ hasText: "New Webhook" }).getByRole("button").click();
   await page.getByLabel("Webhook").locator("#name").click();
   await page.getByLabel("Webhook").locator("#name").fill("webhook name");
   await page.getByLabel("Url").click();

web/src/components/molecules/Asset/AssetListTable/index.tsx

@@ -127,8 +127,8 @@ const AssetListTable: React.FC<Props> = ({
         title: t("Preview Type"),
         dataIndex: "previewType",
         key: "previewType",
-        width: 120,
-        minWidth: 120,
+        width: 145,
+        minWidth: 145,
       },
       {
         title: t("Status"),

web/src/components/molecules/Common/ProjectCreationModal/index.tsx

@@ -1,6 +1,7 @@
-import React, { useCallback, useState } from "react";
+import React, { useCallback, useState, useEffect } from "react";
 
-import Form, { ValidateErrorEntity } from "@reearth-cms/components/atoms/Form";
+import Button from "@reearth-cms/components/atoms/Button";
+import Form from "@reearth-cms/components/atoms/Form";
 import Input from "@reearth-cms/components/atoms/Input";
 import Modal from "@reearth-cms/components/atoms/Modal";
 import TextArea from "@reearth-cms/components/atoms/TextArea";
@@ -38,6 +39,14 @@ const ProjectCreationModal: React.FC<Props> = ({
   const [isLoading, setIsLoading] = useState(false);
   const [isDisabled, setIsDisabled] = useState(true);
 
+  const values = Form.useWatch([], form);
+  useEffect(() => {
+    form
+      .validateFields({ validateOnly: true })
+      .then(() => setIsDisabled(false))
+      .catch(() => setIsDisabled(true));
+  }, [form, values]);
+
   const handleNameChange = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {
       keyAutoFill(e, { form, key: "alias" });
@@ -73,27 +82,24 @@ const ProjectCreationModal: React.FC<Props> = ({
     setIsDisabled(true);
   }, [form, onClose]);
 
-  const handleValuesChange = useCallback(async () => {
-    const hasError = await form
-      .validateFields()
-      .then(() => false)
-      .catch((errorInfo: ValidateErrorEntity) => errorInfo.errorFields.length > 0);
-    setIsDisabled(hasError);
-  }, [form]);
-
   return (
     <Modal
       open={open}
       onCancel={handleClose}
-      onOk={handleSubmit}
-      confirmLoading={isLoading}
-      cancelButtonProps={{ disabled: isLoading }}
-      okButtonProps={{ disabled: isDisabled }}>
-      <Form
-        form={form}
-        layout="vertical"
-        initialValues={initialValues}
-        onValuesChange={handleValuesChange}>
+      footer={[
+        <Button key="cancel" onClick={handleClose} disabled={isLoading}>
+          {t("Cancel")}
+        </Button>,
+        <Button
+          key="ok"
+          type="primary"
+          loading={isLoading}
+          onClick={handleSubmit}
+          disabled={isDisabled}>
+          {t("OK")}
+        </Button>,
+      ]}>
+      <Form form={form} layout="vertical" initialValues={initialValues}>
         <Form.Item
           name="name"
           label={t("Project name")}

web/src/components/molecules/Common/Sidebar/index.tsx

@@ -25,8 +25,11 @@ const StyledSidebar = styled(Sider)`
     line-height: 38px;
     cursor: pointer;
   }
+  .ant-layout-sider-children {
+    border-right: 1px solid #f0f0f0;
+  }
   .ant-menu-inline {
-    border-right: 1px solid white;
+    border-right: none !important;
 
     & > li {
       padding: 0 20px;

web/src/components/molecules/Content/Form/fields/FieldComponents/URLField.tsx

@@ -1,9 +1,8 @@
-import { useTranslation } from "react-i18next";
-
 import Form from "@reearth-cms/components/atoms/Form";
 import Input from "@reearth-cms/components/atoms/Input";
 import MultiValueField from "@reearth-cms/components/molecules/Common/MultiValueField";
 import { Field } from "@reearth-cms/components/molecules/Schema/types";
+import { useT } from "@reearth-cms/i18n";
 import { validateURL } from "@reearth-cms/utils/regex";
 
 import FieldTitle from "../../FieldTitle";
@@ -16,7 +15,7 @@ interface URLFieldProps {
 }
 
 const URLField: React.FC<URLFieldProps> = ({ field, itemGroupId, onMetaUpdate, disabled }) => {
-  const { t } = useTranslation();
+  const t = useT();
 
   return (
     <Form.Item
@@ -29,7 +28,7 @@ const URLField: React.FC<URLFieldProps> = ({ field, itemGroupId, onMetaUpdate, d
           message: t("Please input field!"),
         },
         {
-          message: "URL is not valid",
+          message: t("URL is not valid"),
           validator: async (_, value) => {
             if (value) {
               if (

web/src/components/molecules/Content/List/index.tsx

@@ -119,55 +119,59 @@ const ContentListMolecule: React.FC<Props> = ({
       }
       center={
         <Content>
-          <StyledPageHeder
-            title={model?.name}
-            subTitle={model?.key ? `#${model.key}` : null}
-            extra={
-              <Button
-                type="primary"
-                onClick={onItemAdd}
-                icon={<Icon icon="plus" />}
-                disabled={!model}>
-                {t("New Item")}
-              </Button>
-            }
-          />
-          {viewsMenu}
-          <ContentTable
-            totalCount={totalCount}
-            currentView={currentView}
-            searchTerm={searchTerm}
-            page={page}
-            pageSize={pageSize}
-            loading={itemsDataLoading}
-            selectedItem={selectedItem}
-            selection={selection}
-            onUnpublish={onUnpublish}
-            onSearchTerm={onSearchTerm}
-            onFilterChange={onFilterChange}
-            onContentTableChange={onContentTableChange}
-            setSelection={setSelection}
-            onItemSelect={onItemSelect}
-            onItemsReload={onItemsReload}
-            onItemEdit={onItemEdit}
-            contentTableFields={contentTableFields}
-            contentTableColumns={contentTableColumns}
-            onItemDelete={onItemDelete}
-            requests={requests}
-            addItemToRequestModalShown={addItemToRequestModalShown}
-            onAddItemToRequest={onAddItemToRequest}
-            onAddItemToRequestModalClose={onAddItemToRequestModalClose}
-            onAddItemToRequestModalOpen={onAddItemToRequestModalOpen}
-            onRequestTableChange={onRequestTableChange}
-            requestModalLoading={requestModalLoading}
-            requestModalTotalCount={requestModalTotalCount}
-            requestModalPage={requestModalPage}
-            requestModalPageSize={requestModalPageSize}
-            setCurrentView={setCurrentView}
-            modelKey={model?.key}
-            onRequestSearchTerm={onRequestSearchTerm}
-            onRequestTableReload={onRequestTableReload}
-          />
+          {model && (
+            <>
+              <StyledPageHeder
+                title={model?.name}
+                subTitle={model?.key ? `#${model.key}` : null}
+                extra={
+                  <Button
+                    type="primary"
+                    onClick={onItemAdd}
+                    icon={<Icon icon="plus" />}
+                    disabled={!model}>
+                    {t("New Item")}
+                  </Button>
+                }
+              />
+              {viewsMenu}
+              <ContentTable
+                totalCount={totalCount}
+                currentView={currentView}
+                searchTerm={searchTerm}
+                page={page}
+                pageSize={pageSize}
+                loading={itemsDataLoading}
+                selectedItem={selectedItem}
+                selection={selection}
+                onUnpublish={onUnpublish}
+                onSearchTerm={onSearchTerm}
+                onFilterChange={onFilterChange}
+                onContentTableChange={onContentTableChange}
+                setSelection={setSelection}
+                onItemSelect={onItemSelect}
+                onItemsReload={onItemsReload}
+                onItemEdit={onItemEdit}
+                contentTableFields={contentTableFields}
+                contentTableColumns={contentTableColumns}
+                onItemDelete={onItemDelete}
+                requests={requests}
+                addItemToRequestModalShown={addItemToRequestModalShown}
+                onAddItemToRequest={onAddItemToRequest}
+                onAddItemToRequestModalClose={onAddItemToRequestModalClose}
+                onAddItemToRequestModalOpen={onAddItemToRequestModalOpen}
+                onRequestTableChange={onRequestTableChange}
+                requestModalLoading={requestModalLoading}
+                requestModalTotalCount={requestModalTotalCount}
+                requestModalPage={requestModalPage}
+                requestModalPageSize={requestModalPageSize}
+                setCurrentView={setCurrentView}
+                modelKey={model?.key}
+                onRequestSearchTerm={onRequestSearchTerm}
+                onRequestTableReload={onRequestTableReload}
+              />
+            </>
+          )}
         </Content>
       }
       right={commentsPanel}

web/src/components/molecules/Integration/IntegrationSettingsModal/index.tsx

@@ -88,7 +88,7 @@ const IntegrationSettingsModal: React.FC<Props> = ({
         initialValues={{ role: selectedIntegrationMember?.integrationRole }}>
         <Form.Item
           name="role"
-          label="Role"
+          label={t("Role")}
           rules={[
             {
               required: true,

web/src/components/molecules/Integration/IntegrationTable/index.tsx

@@ -63,6 +63,7 @@ const IntegrationTable: React.FC<Props> = ({
         title: t("Role"),
         dataIndex: "integrationRole",
         key: "role",
+        render: text => (typeof text === "string" ? t(text) : text),
         width: 100,
         minWidth: 100,
       },

web/src/components/molecules/Member/MemberTable/index.tsx

@@ -115,7 +115,7 @@ const MemberTable: React.FC<Props> = ({
     name: member.user.name,
     thumbnail: <UserAvatar username={member.user.name} />,
     email: member.user.email,
-    role: member.role,
+    role: t(member.role),
     action: member.userId !== me?.id && (
       <RoleButton type="link" onClick={() => handleRoleModalOpen(member)} disabled={!owner}>
         {t("Change Role?")}

web/src/components/molecules/Model/ModelsList/GroupsList.tsx

@@ -76,7 +76,7 @@ const GroupsList: React.FC<Props> = ({
       ) : (
         <Header>
           <SchemaAction>
-            <SchemaStyledMenuTitle>{t("Groups")}</SchemaStyledMenuTitle>
+            <SchemaStyledMenuTitle>{t("GROUPS")}</SchemaStyledMenuTitle>
             <SchemaAddButton onClick={onModalOpen} icon={<Icon icon="plus" />} type="text">
               {!collapsed && t("Add")}
             </SchemaAddButton>
@@ -132,7 +132,6 @@ const SchemaStyledMenu = styled.div`
   display: flex;
   flex-direction: column;
   background-color: #fff;
-  border-right: 1px solid #f0f0f0;
 `;
 
 const MenuWrapper = styled.div`

web/src/components/molecules/Model/ModelsList/ModelListBody.tsx

@@ -1,7 +1,7 @@
 import styled from "@emotion/styled";
 import { ReactNode } from "react";
 
-export interface Props {
+interface Props {
   children: ReactNode;
 }
 

web/src/components/molecules/Model/ModelsList/ModelsList.tsx

@@ -81,7 +81,7 @@ const ModelsList: React.FC<Props> = ({
       ) : (
         <Header>
           <SchemaAction>
-            <SchemaStyledMenuTitle>{t("Models")}</SchemaStyledMenuTitle>
+            <SchemaStyledMenuTitle>{t("MODELS")}</SchemaStyledMenuTitle>
             <SchemaAddButton onClick={onModalOpen} icon={<Icon icon="plus" />} type="text">
               {!collapsed && t("Add")}
             </SchemaAddButton>
@@ -137,7 +137,6 @@ const SchemaStyledMenu = styled.div`
   display: flex;
   flex-direction: column;
   background-color: #fff;
-  border-right: 1px solid #f0f0f0;
 `;
 
 const MenuWrapper = styled.div`