fix(web): styling issues after updating antd and from long Input (#1117)

* add: scroll-bar * fix: schema heading * fix: integration card title * fix: schema display * fix: reference modal * fix: request page * fix: field title * fix: test * Update web/src/components/molecules/Content/Form/FieldTitle.tsx Co-authored-by: Nour Balaha <[email protected]> * add: test.slow() to asset field test --------- Co-authored-by: Nour Balaha <[email protected]>
reearth · Oct 1, 2024 · 2d02611 · 2d02611
1 parent 852deeb
commit 2d02611
Show file tree

Hide file tree

Showing 32 changed files with 105 additions and 70 deletions.
diff --git a/web/e2e/project/item/fields/asset.spec.ts b/web/e2e/project/item/fields/asset.spec.ts
@@ -31,7 +31,7 @@ test("Asset field creating and updating has succeeded", async ({ page }) => {
   await page.getByRole("button", { name: "OK" }).click();
   await closeNotification(page);
 
-  await expect(page.getByLabel("Fields").getByRole("paragraph")).toContainText("asset1 #asset1");
+  await expect(page.getByLabel("Fields").getByRole("paragraph")).toContainText("asset1#asset1");
   await page.getByText("Content").click();
   await page.getByRole("button", { name: "plus New Item" }).click();
   await expect(page.locator("label")).toContainText("asset1");
@@ -71,6 +71,7 @@ test("Asset field creating and updating has succeeded", async ({ page }) => {
 });
 
 test("Asset field editing has succeeded", async ({ page }) => {
+  test.slow();
   await page.locator("li").filter({ hasText: "Asset" }).locator("div").first().click();
   await page.getByLabel("Display name").click();
   await page.getByLabel("Display name").fill("asset1");

diff --git a/web/e2e/project/item/fields/boolean.spec.ts b/web/e2e/project/item/fields/boolean.spec.ts
@@ -24,9 +24,7 @@ test("Boolean field creating and updating has succeeded", async ({ page }) => {
   await page.getByRole("button", { name: "OK" }).click();
   await closeNotification(page);
 
-  await expect(page.getByLabel("Fields").getByRole("paragraph")).toContainText(
-    "boolean1 #boolean1",
-  );
+  await expect(page.getByLabel("Fields").getByRole("paragraph")).toContainText("boolean1#boolean1");
   await page.getByText("Content").click();
   await page.getByRole("button", { name: "plus New Item" }).click();
   await expect(page.locator("label")).toContainText("boolean1");
@@ -90,7 +88,7 @@ test("Boolean field editing has succeeded", async ({ page }) => {
   await expect(page.getByRole("switch").nth(1)).toHaveAttribute("aria-checked", "true");
   await page.getByRole("button", { name: "OK" }).click();
   await closeNotification(page);
-  await expect(page.getByText("new boolean1 #new-")).toBeVisible();
+  await expect(page.getByText("new boolean1#new-boolean1Title")).toBeVisible();
   await page.getByText("Content").click();
   await expect(page.locator("thead")).toContainText("new boolean1");
   await expect(page.getByRole("switch", { name: "check" })).toBeVisible();

diff --git a/web/e2e/project/item/fields/date.spec.ts b/web/e2e/project/item/fields/date.spec.ts
@@ -24,7 +24,7 @@ test("Date field creating and updating has succeeded", async ({ page }) => {
   await page.getByRole("button", { name: "OK" }).click();
   await closeNotification(page);
 
-  await expect(page.getByLabel("Fields").getByRole("paragraph")).toContainText("date1 #date1");
+  await expect(page.getByLabel("Fields").getByRole("paragraph")).toContainText("date1#date1");
   await page.getByText("Content").click();
   await page.getByRole("button", { name: "plus New Item" }).click();
   await expect(page.locator("label")).toContainText("date1");

diff --git a/web/e2e/project/item/fields/group.spec.ts b/web/e2e/project/item/fields/group.spec.ts
@@ -39,7 +39,7 @@ test("Group field creating and updating has succeeded", async ({ page }) => {
   await page.getByLabel("Settings").locator("#description").fill("text1 description");
   await page.getByRole("button", { name: "OK" }).click();
   await closeNotification(page);
-  await expect(page.getByText("text1 #text1")).toBeVisible();
+  await expect(page.getByText("text1#text1")).toBeVisible();
 
   await page.getByText("e2e model name").click();
   await page.locator("li").filter({ hasText: "Group" }).locator("div").first().click();
@@ -63,7 +63,7 @@ test("Group field creating and updating has succeeded", async ({ page }) => {
   await expect(page.getByLabel("Set default value")).not.toBeEnabled();
   await page.getByRole("button", { name: "OK" }).click();
   await closeNotification(page);
-  await expect(page.getByLabel("Fields").getByRole("paragraph")).toContainText("group1 #group1");
+  await expect(page.getByLabel("Fields").getByRole("paragraph")).toContainText("group1#group1");
   await page.getByText("Content").click();
   await page.getByRole("button", { name: "plus New Item" }).click();
   await expect(page.locator("label").first()).toContainText("group1");
@@ -179,7 +179,7 @@ test("Group field editing has succeeded", async ({ page }) => {
   await page.getByLabel("Settings").locator("#description").fill("text1 description");
   await page.getByRole("button", { name: "OK" }).click();
   await closeNotification(page);
-  await expect(page.getByText("text1 #text1")).toBeVisible();
+  await expect(page.getByText("text1#text1")).toBeVisible();
 
   await page.getByText("e2e model name").click();
   await page.locator("li").filter({ hasText: "Group" }).locator("div").first().click();
@@ -203,7 +203,7 @@ test("Group field editing has succeeded", async ({ page }) => {
   await expect(page.getByLabel("Set default value")).not.toBeEnabled();
   await page.getByRole("button", { name: "OK" }).click();
   await closeNotification(page);
-  await expect(page.getByLabel("Fields").getByRole("paragraph")).toContainText("group1 #group1");
+  await expect(page.getByLabel("Fields").getByRole("paragraph")).toContainText("group1#group1");
   await page.getByText("Content").click();
   await expect(page.locator("thead")).toContainText("group1");
   await page.getByRole("button", { name: "plus New Item" }).click();

diff --git a/web/e2e/project/item/fields/int.spec.ts b/web/e2e/project/item/fields/int.spec.ts
@@ -25,7 +25,7 @@ test("Int field creating and updating has succeeded", async ({ page }) => {
   await page.getByRole("button", { name: "OK" }).click();
   await closeNotification(page);
 
-  await expect(page.getByLabel("Fields").getByRole("paragraph")).toContainText("int1 #int1");
+  await expect(page.getByLabel("Fields").getByRole("paragraph")).toContainText("int1#int1");
   await page.getByText("Content").click();
   await page.getByRole("button", { name: "plus New Item" }).click();
   await expect(page.locator("label")).toContainText("int1");

diff --git a/web/e2e/project/item/fields/markdown.spec.ts b/web/e2e/project/item/fields/markdown.spec.ts
@@ -26,7 +26,7 @@ test("Markdown field editing has succeeded", async ({ page }) => {
   await page.getByLabel("Set default value").fill("text1 default value");
   await page.getByRole("button", { name: "OK" }).click();
   await closeNotification(page);
-  await expect(page.getByText("text1 #text1")).toBeVisible();
+  await expect(page.getByText("text1#text1")).toBeVisible();
   await page.getByRole("img", { name: "ellipsis" }).locator("svg").click();
   await expect(page.getByLabel("Display name")).toBeVisible();
   await expect(page.getByLabel("Display name")).toHaveValue("text1");

diff --git a/web/e2e/project/item/fields/option.spec.ts b/web/e2e/project/item/fields/option.spec.ts
@@ -30,7 +30,7 @@ test("Option field creating and updating has succeeded", async ({ page }) => {
   await page.getByRole("button", { name: "OK" }).click();
   await closeNotification(page);
 
-  await expect(page.getByLabel("Fields").getByRole("paragraph")).toContainText("option1 #option1");
+  await expect(page.getByLabel("Fields").getByRole("paragraph")).toContainText("option1#option1");
   await page.getByText("Content").click();
   await page.getByRole("button", { name: "plus New Item" }).click();
   await expect(page.locator("label")).toContainText("option1");

diff --git a/web/e2e/project/item/fields/text.spec.ts b/web/e2e/project/item/fields/text.spec.ts
@@ -26,7 +26,7 @@ test("Text field editing has succeeded", async ({ page }) => {
   await page.getByLabel("Set default value").fill("text1 default value");
   await page.getByRole("button", { name: "OK" }).click();
   await closeNotification(page);
-  await expect(page.getByText("text1 #text1")).toBeVisible();
+  await expect(page.getByText("text1#text1")).toBeVisible();
   await page.getByRole("img", { name: "ellipsis" }).locator("svg").click();
   await expect(page.getByLabel("Display name")).toBeVisible();
   await expect(page.getByLabel("Display name")).toHaveValue("text1");

diff --git a/web/e2e/project/item/fields/textarea.spec.ts b/web/e2e/project/item/fields/textarea.spec.ts
@@ -26,7 +26,7 @@ test("Textarea field editing has succeeded", async ({ page }) => {
   await page.getByLabel("Set default value").fill("text1 default value");
   await page.getByRole("button", { name: "OK" }).click();
   await closeNotification(page);
-  await expect(page.getByText("text1 #text1")).toBeVisible();
+  await expect(page.getByText("text1#text1")).toBeVisible();
   await page.getByRole("img", { name: "ellipsis" }).locator("svg").click();
   await expect(page.getByLabel("Display name")).toBeVisible();
   await expect(page.getByLabel("Display name")).toHaveValue("text1");

diff --git a/web/e2e/project/item/fields/url.spec.ts b/web/e2e/project/item/fields/url.spec.ts
@@ -25,7 +25,7 @@ test("URL field creating and updating has succeeded", async ({ page }) => {
   await page.getByRole("button", { name: "OK" }).click();
   await closeNotification(page);
 
-  await expect(page.getByLabel("Fields").getByRole("paragraph")).toContainText("url1 #url1");
+  await expect(page.getByLabel("Fields").getByRole("paragraph")).toContainText("url1#url1");
   await page.getByText("Content").click();
   await page.getByRole("button", { name: "plus New Item" }).click();
   await expect(page.locator("label")).toContainText("url1");

diff --git a/web/e2e/project/item/metadata/boolean.spec.ts b/web/e2e/project/item/metadata/boolean.spec.ts
@@ -25,7 +25,7 @@ test("Boolean metadata creating and updating has succeeded", async ({ page }) =>
   await page.getByRole("button", { name: "OK" }).click();
   await closeNotification(page);
 
-  await expect(page.getByText("boolean1 #boolean1")).toBeVisible();
+  await expect(page.getByText("boolean1#boolean1")).toBeVisible();
   await page.getByRole("img", { name: "ellipsis" }).locator("svg").click();
   await expect(page.getByLabel("Display name")).toBeVisible();
   await expect(page.getByLabel("Display name")).toHaveValue("boolean1");
@@ -109,7 +109,7 @@ test("Boolean metadata editing has succeeded", async ({ page }) => {
 
   await page.getByRole("button", { name: "OK" }).click();
   await closeNotification(page);
-  await expect(page.getByLabel("Meta Data")).toContainText("new boolean1 #new-boolean1");
+  await expect(page.getByLabel("Meta Data")).toContainText("new boolean1#new-boolean1");
   await page.getByText("Content").click();
   await expect(page.locator("thead")).toContainText("new boolean1");
   await expect(page.getByRole("switch", { name: "check" })).toBeVisible();

diff --git a/web/e2e/project/item/metadata/checkbox.spec.ts b/web/e2e/project/item/metadata/checkbox.spec.ts
@@ -25,7 +25,7 @@ test("Checkbox metadata creating and updating has succeeded", async ({ page }) =
   await page.getByRole("button", { name: "OK" }).click();
   await closeNotification(page);
 
-  await expect(page.getByText("checkbox1 #checkbox1")).toBeVisible();
+  await expect(page.getByText("checkbox1#checkbox1")).toBeVisible();
   await page.getByRole("img", { name: "ellipsis" }).locator("svg").click();
   await expect(page.getByLabel("Display name")).toBeVisible();
   await expect(page.getByLabel("Display name")).toHaveValue("checkbox1");
@@ -111,7 +111,7 @@ test("Checkbox metadata editing has succeeded", async ({ page }) => {
   await page.getByRole("button", { name: "OK" }).click();
   await closeNotification(page);
 
-  await expect(page.getByLabel("Meta Data")).toContainText("new checkbox1 #new-checkbox1");
+  await expect(page.getByLabel("Meta Data")).toContainText("new checkbox1#new-checkbox1");
   await page.getByText("Content").click();
   await expect(page.locator("thead")).toContainText("new checkbox1");
   await expect(page.getByLabel("", { exact: true }).nth(1)).toBeChecked();

diff --git a/web/e2e/project/item/metadata/date.spec.ts b/web/e2e/project/item/metadata/date.spec.ts
@@ -25,7 +25,7 @@ test("Date metadata creating and updating has succeeded", async ({ page }) => {
   await page.getByRole("button", { name: "OK" }).click();
   await closeNotification(page);
 
-  await expect(page.getByText("date1 #date1")).toBeVisible();
+  await expect(page.getByText("date1#date1")).toBeVisible();
   await page.getByRole("img", { name: "ellipsis" }).locator("svg").click();
   await expect(page.getByLabel("Display name")).toBeVisible();
   await expect(page.getByLabel("Display name")).toHaveValue("date1");

diff --git a/web/e2e/project/item/metadata/tag.spec.ts b/web/e2e/project/item/metadata/tag.spec.ts
@@ -31,7 +31,7 @@ test("Tag metadata creating and updating has succeeded", async ({ page }) => {
   await page.getByRole("button", { name: "OK" }).click();
   await closeNotification(page);
 
-  await expect(page.getByText("tag1 #tag1")).toBeVisible();
+  await expect(page.getByText("tag1#tag1")).toBeVisible();
   await page.getByRole("img", { name: "ellipsis" }).locator("svg").click();
   await expect(page.getByLabel("Display name")).toBeVisible();
   await expect(page.getByLabel("Display name")).toHaveValue("tag1");

diff --git a/web/e2e/project/item/metadata/text.spec.ts b/web/e2e/project/item/metadata/text.spec.ts
@@ -26,7 +26,7 @@ test("Text metadata creating and updating has succeeded", async ({ page }) => {
   await page.getByLabel("Settings").locator("#description").fill("text1 description");
   await page.getByRole("button", { name: "OK" }).click();
   await closeNotification(page);
-  await expect(page.getByText("text1 #text1")).toBeVisible();
+  await expect(page.getByText("text1#text1")).toBeVisible();
   await page.getByRole("img", { name: "ellipsis" }).locator("svg").click();
   await expect(page.getByLabel("Display name")).toBeVisible();
   await expect(page.getByLabel("Display name")).toHaveValue("text1");

diff --git a/web/e2e/project/item/metadata/url.spec.ts b/web/e2e/project/item/metadata/url.spec.ts
@@ -26,7 +26,7 @@ test("Url metadata creating and updating has succeeded", async ({ page }) => {
   await page.getByLabel("Settings").locator("#description").fill("url1 description");
   await page.getByRole("button", { name: "OK" }).click();
   await closeNotification(page);
-  await expect(page.getByText("url1 #url1")).toBeVisible();
+  await expect(page.getByText("url1#url1")).toBeVisible();
   await page.getByRole("img", { name: "ellipsis" }).locator("svg").click();
   await expect(page.getByLabel("Display name")).toBeVisible();
   await expect(page.getByLabel("Display name")).toHaveValue("url1");

diff --git a/web/e2e/project/schema.spec.ts b/web/e2e/project/schema.spec.ts
@@ -117,10 +117,10 @@ test("Schema reordering has succeeded", async ({ page }) => {
   await page.locator("li").filter({ hasText: /Text/ }).locator("div").first().click();
   await handleFieldForm(page, "text2");
   await expect(page.getByLabel("Fields").locator(".draggable-item").nth(0)).toContainText(
-    "text1 #text1",
+    "text1#text1",
   );
   await expect(page.getByLabel("Fields").locator(".draggable-item").nth(1)).toContainText(
-    "text2 #text2",
+    "text2#text2",
   );
   await page
     .getByLabel("Fields")
@@ -129,9 +129,9 @@ test("Schema reordering has succeeded", async ({ page }) => {
     .dragTo(page.getByLabel("Fields").locator(".draggable-item").nth(0));
   await closeNotification(page);
   await expect(page.getByLabel("Fields").locator(".draggable-item").nth(0)).toContainText(
-    "text2 #text2",
+    "text2#text2",
   );
   await expect(page.getByLabel("Fields").locator(".draggable-item").nth(1)).toContainText(
-    "text1 #text1",
+    "text1#text1",
   );
 });
diff --git a/web/e2e/project/utils/field.ts b/web/e2e/project/utils/field.ts
@@ -9,6 +9,6 @@ export async function handleFieldForm(page: Page, name: string, key = name) {
   await page.getByLabel("Settings").locator("#key").click();
   await page.getByLabel("Settings").locator("#key").fill(key);
   await page.getByRole("button", { name: "OK" }).click();
-  await expect(page.getByText(`${name} #${key}`)).toBeVisible();
+  await expect(page.getByText(`${name}#${key}`)).toBeVisible();
   await closeNotification(page);
 }
diff --git a/web/src/components/atoms/PageHeader/index.tsx b/web/src/components/atoms/PageHeader/index.tsx
@@ -10,6 +10,9 @@ const Header: React.FC<Props> = props => {
 const StyledPageHeader = styled(PageHeader)`
   background-color: #fff;
   padding: 16px 24px;
+  .ant-page-header-heading {
+    flex-wrap: inherit;
+  }
 `;
 
 export default Header;
diff --git a/web/src/components/molecules/Common/Form/GroupItem/index.tsx b/web/src/components/molecules/Common/Form/GroupItem/index.tsx
@@ -176,7 +176,7 @@ const GroupItem: React.FC<Props> = ({
             </>
           )
         }>
-        <FormItemsWrapper>
+        <div>
           {fields?.map((field: Field) => {
             const FieldComponent =
               FIELD_TYPE_COMPONENT_MAP[
@@ -253,7 +253,7 @@ const GroupItem: React.FC<Props> = ({
               );
             }
           })}
-        </FormItemsWrapper>
+        </div>
       </Panel>
     </StyledCollapse>
   );
@@ -273,11 +273,4 @@ const StyledFormItemWrapper = styled.div`
   word-wrap: break-word;
 `;
 
-const FormItemsWrapper = styled.div`
-  width: 50%;
-  @media (max-width: 1200px) {
-    width: 100%;
-  }
-`;
-
 export default GroupItem;
diff --git a/web/src/components/molecules/Common/Header/Dropdown.tsx b/web/src/components/molecules/Common/Header/Dropdown.tsx
@@ -40,7 +40,8 @@ const StyledDropdown = styled(DropdownAtom)`
 const StyledDropdownMenu = styled.div`
   .ant-dropdown-menu {
     background-color: #141414 !important;
-    width: 190px;
+    min-width: 190px;
+    max-width: 205px;
     padding: 4px 0;
   }
   .ant-dropdown-menu-item-divider {
@@ -58,6 +59,10 @@ const StyledDropdownMenu = styled.div`
     user-select: none;
     color: #dbdbdb;
   }
+  .ant-dropdown-menu-item-group-list {
+    max-height: 50vh;
+    overflow: hidden auto;
+  }
   .ant-dropdown-menu-item-active {
     background-color: #1d1d1d;
   }

diff --git a/web/src/components/molecules/Content/Form/FieldTitle.tsx b/web/src/components/molecules/Content/Form/FieldTitle.tsx
@@ -3,7 +3,7 @@ import styled from "@emotion/styled";
 import Tag from "@reearth-cms/components/atoms/Tag";
 import { useT } from "@reearth-cms/i18n";
 
-export type Props = {
+type Props = {
   title: string;
   isUnique: boolean;
   isTitle: boolean;
@@ -14,24 +14,30 @@ const FieldTitle: React.FC<Props> = ({ title, isUnique, isTitle }) => {
 
   return (
     <Title>
-      <div>
+      <Wrapper>
         {title}
         {isUnique ? <FieldUnique>({t("unique")})</FieldUnique> : ""}
-      </div>
-      {isTitle ? <ItemTitleTag>{t("Title")}</ItemTitleTag> : ""}
+      </Wrapper>
+      {isTitle && (
+        <TagWrapper>
+          <ItemTitleTag>{t("Title")}</ItemTitleTag>
+        </TagWrapper>
+      )}
     </Title>
   );
 };
 
 export default FieldTitle;
 
 const Title = styled.p`
-  color: #000000d9;
-  font-weight: 400;
   margin: 0;
   display: flex;
   justify-content: space-between;
-  width: 100%;
+  overflow: auto;
+`;
+
+const Wrapper = styled.span`
+  overflow: auto;
 `;
 
 const FieldUnique = styled.span`
@@ -40,6 +46,12 @@ const FieldUnique = styled.span`
   font-weight: 400;
 `;
 
+const TagWrapper = styled.span`
+  display: flex;
+  align-items: center;
+  padding-left: 5px;
+`;
+
 const ItemTitleTag = styled(Tag)`
   color: rgba(0, 0, 0, 0.45);
   background-color: #fafafa;

diff --git a/web/src/components/molecules/Content/Form/fields/FieldComponents/DefaultField.tsx b/web/src/components/molecules/Content/Form/fields/FieldComponents/DefaultField.tsx
@@ -25,7 +25,7 @@ const DefaultField: React.FC<DefaultFieldProps> = ({ field, itemGroupId, onMetaU
         },
       ]}
       name={itemGroupId ? [field.id, itemGroupId] : field.id}
-      label={<FieldTitle title={field.title} isUnique={field.unique} isTitle={false} />}>
+      label={<FieldTitle title={field.title} isUnique={field.unique} isTitle={field.isTitle} />}>
       {field.multiple ? (
         <MultiValueField
           onBlur={onMetaUpdate}

diff --git a/web/src/components/molecules/Integration/IntegrationConnectModal/IntegrationCard.tsx b/web/src/components/molecules/Integration/IntegrationConnectModal/IntegrationCard.tsx
@@ -34,6 +34,9 @@ const CardTitle = styled.h5`
   line-height: 24px;
   margin: 0;
   padding-left: 12px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 `;
 
 export default IntegrationCard;
diff --git a/web/src/components/molecules/MyIntegrations/List/Card/index.tsx b/web/src/components/molecules/MyIntegrations/List/Card/index.tsx
@@ -59,6 +59,7 @@ const CardTitle = styled.h5`
 `;
 
 const CardSubTitle = styled.h6`
+  width: 100%;
   margin: 0;
   font-weight: 400;
   font-size: 12px;
@@ -67,9 +68,6 @@ const CardSubTitle = styled.h6`
   height: 40px;
   overflow: hidden;
   text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
 `;
 
 export default MyIntegrationCard;