fix(web): add placeholder for no model on overview page

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();
 });

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<Props> = ({
               </Button>
             </Suggestion>
             <Suggestion>
-              {t("Or read")} <a href="">{t("how to use Re:Earth CMS")}</a> {t("first")}
+              <Trans i18nKey="readDocument" components={{ l: <a href="" /> }} />
             </Suggestion>
           </EmptyTableWrapper>
         )}>

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<Props> = ({
             </Button>
           </Suggestion>
           <Suggestion>
-            {t("Or read")} <a href="">{t("how to use Re:Earth CMS")}</a> {t("first")}
+            <Trans i18nKey="readDocument" components={{ l: <a href="" /> }} />
           </Suggestion>
         </EmptyListWrapper>
       )}

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<Props> = ({
             </Button>
           </Wrapper>
           <Suggestion>
-            {t("Or read")} <a href="">{t("how to use Re:Earth CMS")}</a> {t("first")}
+            <Trans i18nKey="readDocument" components={{ l: <a href="" /> }} />
           </Suggestion>
         </EmptyListWrapper>
       ) : (

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<Props> = ({
             {t("New Model")}
           </Button>
         }>
-        <GridArea>
-          {models?.map(m => (
-            <ModelCard
-              key={m.id}
-              model={m}
-              hasUpdateRight={hasUpdateRight}
-              hasDeleteRight={hasDeleteRight}
-              onSchemaNavigate={onSchemaNavigate}
-              onContentNavigate={onContentNavigate}
-              onModelDeletionModalOpen={onModelDeletionModalOpen}
-              onModelUpdateModalOpen={onModelUpdateModalOpen}
-            />
-          ))}
-        </GridArea>
+        {models?.length ? (
+          <GridArea>
+            {models.map(m => (
+              <ModelCard
+                key={m.id}
+                model={m}
+                hasUpdateRight={hasUpdateRight}
+                hasDeleteRight={hasDeleteRight}
+                onSchemaNavigate={onSchemaNavigate}
+                onContentNavigate={onContentNavigate}
+                onModelDeletionModalOpen={onModelDeletionModalOpen}
+                onModelUpdateModalOpen={onModelUpdateModalOpen}
+              />
+            ))}
+          </GridArea>
+        ) : (
+          <Placeholder>
+            <Heading>{t("No Models yet")}</Heading>
+            <Content>
+              <Actions>
+                {t("Create a new model")}
+                <Button
+                  type="primary"
+                  icon={<Icon icon="plus" />}
+                  onClick={onModelModalOpen}
+                  disabled={!hasCreateRight}>
+                  {t("New Model")}
+                </Button>
+              </Actions>
+              <span>
+                <Trans i18nKey="readDocument" components={{ l: <a href="" /> }} />
+              </span>
+            </Content>
+          </Placeholder>
+        )}
       </ContentSection>
     </InnerContent>
   );
@@ -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;
+`;

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 <l>how to use Re:Earth CMS</l> 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: ''

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: または<l>Re:Earth CMSの使い方</l>をまずお読みください
 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: プロジェクトを削除