diff --git a/web/e2e/project/overview.spec.ts b/web/e2e/project/overview.spec.ts index a3126b104c..6e54c65fc4 100644 --- a/web/e2e/project/overview.spec.ts +++ b/web/e2e/project/overview.spec.ts @@ -13,7 +13,9 @@ test.afterEach(async ({ page }) => { }); test("Model CRUD on Overview page has succeeded", async ({ page }) => { - await page.getByRole("button", { name: "plus New Model" }).click(); + await expect(page.getByText("No Models yet")).toBeVisible(); + await page.getByRole("button", { name: "plus New Model" }).first().click(); + await expect(page.getByLabel("New Model").getByText("New Model")).toBeVisible(); await page.getByLabel("Model name").click(); await page.getByLabel("Model name").fill("model name"); await page.getByLabel("Model description").click(); @@ -43,4 +45,17 @@ test("Model CRUD on Overview page has succeeded", async ({ page }) => { await page.getByRole("button", { name: "Delete Model" }).click(); await closeNotification(page); await expect(page.locator("#root")).not.toContainText("new model name"); + await expect(page.getByText("No Models yet")).toBeVisible(); +}); + +test("Creating Model by using the button on placeholder has succeeded", async ({ page }) => { + await page.getByRole("button", { name: "plus New Model" }).last().click(); + await expect(page.getByLabel("New Model").getByText("New Model")).toBeVisible(); + await page.getByLabel("Model name").click(); + await page.getByLabel("Model name").fill("model name"); + await page.getByRole("button", { name: "OK" }).click(); + await closeNotification(page); + await expect(page.getByTitle("model name")).toBeVisible(); + await expect(page.getByText("#model-name")).toBeVisible(); + await expect(page.getByRole("menuitem", { name: "model name" }).locator("span")).toBeVisible(); }); diff --git a/web/src/components/molecules/Integration/IntegrationTable/index.tsx b/web/src/components/molecules/Integration/IntegrationTable/index.tsx index 9aa800d505..d9ae1951aa 100644 --- a/web/src/components/molecules/Integration/IntegrationTable/index.tsx +++ b/web/src/components/molecules/Integration/IntegrationTable/index.tsx @@ -15,7 +15,7 @@ import Space from "@reearth-cms/components/atoms/Space"; import UserAvatar from "@reearth-cms/components/atoms/UserAvatar"; import ResizableProTable from "@reearth-cms/components/molecules/Common/ResizableProTable"; import { IntegrationMember } from "@reearth-cms/components/molecules/Integration/types"; -import { useT } from "@reearth-cms/i18n"; +import { useT, Trans } from "@reearth-cms/i18n"; type Props = { integrationMembers?: IntegrationMember[]; @@ -204,7 +204,7 @@ const IntegrationTable: React.FC = ({ - {t("Or read")} {t("how to use Re:Earth CMS")} {t("first")} + }} /> )}> diff --git a/web/src/components/molecules/MyIntegrations/Webhook/WebhookList/index.tsx b/web/src/components/molecules/MyIntegrations/Webhook/WebhookList/index.tsx index 5e98b9ba29..19847f0e78 100644 --- a/web/src/components/molecules/MyIntegrations/Webhook/WebhookList/index.tsx +++ b/web/src/components/molecules/MyIntegrations/Webhook/WebhookList/index.tsx @@ -3,7 +3,7 @@ import styled from "@emotion/styled"; import Button from "@reearth-cms/components/atoms/Button"; import Icon from "@reearth-cms/components/atoms/Icon"; import { Webhook, WebhookTrigger } from "@reearth-cms/components/molecules/MyIntegrations/types"; -import { useT } from "@reearth-cms/i18n"; +import { useT, Trans } from "@reearth-cms/i18n"; import WebhookCard from "./WebhookCard"; @@ -59,7 +59,7 @@ const WebhookList: React.FC = ({ - {t("Or read")} {t("how to use Re:Earth CMS")} {t("first")} + }} /> )} diff --git a/web/src/components/molecules/ProjectList/ProjectList.tsx b/web/src/components/molecules/ProjectList/ProjectList.tsx index 5637684c7d..4a90fb699c 100644 --- a/web/src/components/molecules/ProjectList/ProjectList.tsx +++ b/web/src/components/molecules/ProjectList/ProjectList.tsx @@ -5,7 +5,7 @@ import Icon from "@reearth-cms/components/atoms/Icon"; import Loading from "@reearth-cms/components/atoms/Loading"; import ProjectCard from "@reearth-cms/components/molecules/ProjectList/ProjectCard"; import { Project } from "@reearth-cms/components/molecules/Workspace/types"; -import { useT } from "@reearth-cms/i18n"; +import { useT, Trans } from "@reearth-cms/i18n"; type Props = { hasCreateRight: boolean; @@ -42,7 +42,7 @@ const ProjectList: React.FC = ({ - {t("Or read")} {t("how to use Re:Earth CMS")} {t("first")} + }} /> ) : ( diff --git a/web/src/components/molecules/ProjectOverview/index.tsx b/web/src/components/molecules/ProjectOverview/index.tsx index a129b82f95..72f59eb826 100644 --- a/web/src/components/molecules/ProjectOverview/index.tsx +++ b/web/src/components/molecules/ProjectOverview/index.tsx @@ -5,7 +5,7 @@ import Icon from "@reearth-cms/components/atoms/Icon"; import InnerContent from "@reearth-cms/components/atoms/InnerContents/basic"; import ContentSection from "@reearth-cms/components/atoms/InnerContents/ContentSection"; import { Model } from "@reearth-cms/components/molecules/Model/types"; -import { useT } from "@reearth-cms/i18n"; +import { useT, Trans } from "@reearth-cms/i18n"; import ModelCard from "./ModelCard"; @@ -51,20 +51,41 @@ const ProjectOverview: React.FC = ({ {t("New Model")} }> - - {models?.map(m => ( - - ))} - + {models?.length ? ( + + {models.map(m => ( + + ))} + + ) : ( + + {t("No Models yet")} + + + {t("Create a new model")} + + + + }} /> + + + + )} ); @@ -78,3 +99,30 @@ const GridArea = styled.div` grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); justify-content: space-between; `; + +const Placeholder = styled.div` + padding: 64px 0; + display: flex; + flex-direction: column; + align-items: center; + gap: 24px; +`; + +const Heading = styled.span` + font-size: 16px; + font-weight: 500; +`; + +const Content = styled.div` + display: flex; + flex-direction: column; + align-items: center; + gap: 12px; + color: rgba(0, 0, 0, 0.45); +`; + +const Actions = styled.div` + display: flex; + gap: 16px; + align-items: center; +`; diff --git a/web/src/i18n/translations/en.yml b/web/src/i18n/translations/en.yml index c747b7281d..d1b8f95700 100644 --- a/web/src/i18n/translations/en.yml +++ b/web/src/i18n/translations/en.yml @@ -209,9 +209,7 @@ Creator: '' Remove: '' No Integration yet: '' Create a new: '' -Or read: '' -how to use Re:Earth CMS: '' -first: '' +readDocument: Or read how to use Re:Earth CMS first Add member: '' Add to workspace: '' Search user: '' @@ -276,6 +274,8 @@ Create a new project: '' New Project: '' Models: '' New Model: '' +No Models yet: '' +Create a new model: '' Edit: '' Are you sure you want to delete this project?: '' Delete Project: '' diff --git a/web/src/i18n/translations/ja.yml b/web/src/i18n/translations/ja.yml index a462f14ec0..1e3942fbd5 100644 --- a/web/src/i18n/translations/ja.yml +++ b/web/src/i18n/translations/ja.yml @@ -209,9 +209,7 @@ Creator: 作成者 Remove: 削除 No Integration yet: まだインテグレーションはありません Create a new: 新規作成 -Or read: 読む -how to use Re:Earth CMS: CMSの使い方 -first: はじめに +readDocument: またはRe:Earth CMSの使い方をまずお読みください Add member: メンバー追加 Add to workspace: ワークスペースに追加 Search user: ユーザー検索 @@ -276,6 +274,8 @@ Create a new project: 新規プロジェクトを作成 New Project: 新規プロジェクト Models: モデル New Model: 新規モデル +No Models yet: モデルはまだありません +Create a new model: 新しいモデルを作成する Edit: 編集 Are you sure you want to delete this project?: 本当にプロジェクトを削除してもよろしいですか？ Delete Project: プロジェクトを削除