fix(web): resolve issues with home tab and asset page comments (#1080)

* fix: refetchQueries on comment panel * fix: when switching workspace, the home tab should always be selected * fix: synchronize account name with personal workspace name when updating account name * fix: the lang of the notification when updating language setting * add: required mark on webhook url
reearth · Oct 1, 2024 · 7fab9d9 · 7fab9d9
1 parent f1b4edb
commit 7fab9d9
Show file tree

Hide file tree

Showing 12 changed files with 35 additions and 19 deletions.
diff --git a/web/src/components/molecules/Common/CommentsPanel/types.ts b/web/src/components/molecules/Common/CommentsPanel/types.ts
@@ -4,3 +4,11 @@ export type Comment = {
   content: string;
   createdAt: string;
 };
+
+export type RefetchQueries = (
+  | "GetItem"
+  | "SearchItem"
+  | "GetAsset"
+  | "GetAssetsItems"
+  | "GetRequests"
+)[];
diff --git a/web/src/components/molecules/Common/Header/index.tsx b/web/src/components/molecules/Common/Header/index.tsx
@@ -130,11 +130,7 @@ const HeaderMolecule: React.FC<Props> = ({
         <Logo onClick={onHomeNavigation}>{t("Re:Earth CMS")}</Logo>
       )}
       <VerticalDivider />
-      <WorkspaceDropdown
-        name={currentWorkspace?.name}
-        items={WorkspacesItems}
-        personal={currentIsPersonal}
-      />
+      <WorkspaceDropdown name={username} items={WorkspacesItems} personal={currentIsPersonal} />
       {currentProject?.name && (
         <CurrentProject>
           <Break>/</Break>

diff --git a/web/src/components/molecules/Common/WorkspaceMenu/index.tsx b/web/src/components/molecules/Common/WorkspaceMenu/index.tsx
@@ -5,16 +5,16 @@ import Icon from "@reearth-cms/components/atoms/Icon";
 import Menu, { MenuInfo } from "@reearth-cms/components/atoms/Menu";
 import { useT } from "@reearth-cms/i18n";
 
-export type Props = {
+type Props = {
   inlineCollapsed: boolean;
   isPersonalWorkspace?: boolean;
   defaultSelectedKey?: string;
   onNavigate?: (info: MenuInfo) => void;
 };
 
-export type MenuShowType = "personal" | "notPersonal" | "both";
+type MenuShowType = "personal" | "notPersonal" | "both";
 
-export type WorkspaceItemType = ItemType & { show: MenuShowType };
+type WorkspaceItemType = ItemType & { show: MenuShowType };
 
 const WorkspaceMenu: React.FC<Props> = ({
   inlineCollapsed,
@@ -26,9 +26,7 @@ const WorkspaceMenu: React.FC<Props> = ({
   const [selected, changeSelected] = useState([defaultSelectedKey ?? "home"]);
 
   useEffect(() => {
-    if (defaultSelectedKey) {
-      changeSelected([defaultSelectedKey]);
-    }
+    changeSelected([defaultSelectedKey ?? "home"]);
   }, [defaultSelectedKey]);
 
   const topItems: WorkspaceItemType[] = [

diff --git a/web/src/components/molecules/MyIntegrations/Webhook/WebhookForm/index.tsx b/web/src/components/molecules/MyIntegrations/Webhook/WebhookForm/index.tsx
@@ -107,6 +107,7 @@ const WebhookForm: React.FC<Props> = ({
               extra={t("Please note that all webhook URLs must start with http://.")}
               rules={[
                 {
+                  required: true,
                   message: t("URL is not valid"),
                   validator: async (_, value) => {
                     if (!validateURL(value) && value.length > 0) return Promise.reject();

diff --git a/web/src/components/organisms/Account/hooks.ts b/web/src/components/organisms/Account/hooks.ts
@@ -52,7 +52,7 @@ export default () => {
         Notification.error({ message: t("Failed to update language.") });
         return;
       } else {
-        Notification.success({ message: t("Successfully updated language!") });
+        Notification.success({ message: t("Successfully updated language!", { lng: lang }) });
       }
     },
     [updateMeMutation, t],

diff --git a/web/src/components/organisms/Common/CommentsPanel/hooks.ts b/web/src/components/organisms/Common/CommentsPanel/hooks.ts
@@ -2,6 +2,7 @@ import { useCallback, useMemo } from "react";
 
 import Notification from "@reearth-cms/components/atoms/Notification";
 import { User } from "@reearth-cms/components/molecules/AccountSettings/types";
+import { RefetchQueries } from "@reearth-cms/components/molecules/Common/CommentsPanel/types";
 import {
   useAddCommentMutation,
   useDeleteCommentMutation,
@@ -12,9 +13,10 @@ import { useT } from "@reearth-cms/i18n";
 
 type Params = {
   threadId?: string;
+  refetchQueries: RefetchQueries;
 };
 
-export default ({ threadId }: Params) => {
+export default ({ threadId, refetchQueries }: Params) => {
   const t = useT();
 
   const { data: userData } = useGetMeQuery();
@@ -31,7 +33,7 @@ export default ({ threadId }: Params) => {
   }, [userData]);
 
   const [createComment] = useAddCommentMutation({
-    refetchQueries: ["GetAsset", "GetAssets", "SearchItem", "GetRequests", "GetItem"],
+    refetchQueries,
   });
 
   const handleCommentCreate = useCallback(
@@ -53,7 +55,7 @@ export default ({ threadId }: Params) => {
   );
 
   const [updateComment] = useUpdateCommentMutation({
-    refetchQueries: ["GetAsset", "GetAssets", "SearchItem", "GetRequests", "GetItem"],
+    refetchQueries,
   });
 
   const handleCommentUpdate = useCallback(
@@ -76,7 +78,7 @@ export default ({ threadId }: Params) => {
   );
 
   const [deleteComment] = useDeleteCommentMutation({
-    refetchQueries: ["GetAsset", "GetAssets", "SearchItem", "GetRequests", "GetItem"],
+    refetchQueries,
   });
 
   const handleCommentDelete = useCallback(

diff --git a/web/src/components/organisms/Common/CommentsPanel/index.tsx b/web/src/components/organisms/Common/CommentsPanel/index.tsx
@@ -1,5 +1,8 @@
 import CommentsPanelMolecule from "@reearth-cms/components/molecules/Common/CommentsPanel";
-import { Comment } from "@reearth-cms/components/molecules/Common/CommentsPanel/types";
+import {
+  Comment,
+  RefetchQueries,
+} from "@reearth-cms/components/molecules/Common/CommentsPanel/types";
 
 import useHooks from "./hooks";
 
@@ -9,6 +12,7 @@ type Props = {
   comments?: Comment[];
   collapsed: boolean;
   onCollapse: (value: boolean) => void;
+  refetchQueries: RefetchQueries;
 };
 
 const CommentsPanel: React.FC<Props> = ({
@@ -17,9 +21,11 @@ const CommentsPanel: React.FC<Props> = ({
   comments,
   collapsed,
   onCollapse,
+  refetchQueries,
 }) => {
   const { me, handleCommentCreate, handleCommentUpdate, handleCommentDelete } = useHooks({
     threadId,
+    refetchQueries,
   });
 
   return (

diff --git a/web/src/components/organisms/Project/Asset/Asset/index.tsx b/web/src/components/organisms/Project/Asset/Asset/index.tsx
@@ -52,6 +52,7 @@ const Asset: React.FC = () => {
           threadId={asset?.threadId}
           collapsed={collapsed}
           onCollapse={handleToggleCommentMenu}
+          refetchQueries={["GetAsset"]}
         />
       }
       asset={asset}

diff --git a/web/src/components/organisms/Project/Asset/AssetList/index.tsx b/web/src/components/organisms/Project/Asset/AssetList/index.tsx
@@ -50,8 +50,9 @@ const AssetList: React.FC = () => {
               ? t("No comments.")
               : t("Please click the comment bubble in the table to check comments.")
           }
-          comments={assetList.find(asset => asset.id === selectedAsset?.id)?.comments}
-          threadId={assetList.find(asset => asset.id === selectedAsset?.id)?.threadId}
+          comments={selectedAsset?.comments}
+          threadId={selectedAsset?.threadId}
+          refetchQueries={["GetAssetsItems"]}
         />
       }
       assetList={assetList}

diff --git a/web/src/components/organisms/Project/Content/ContentDetails/index.tsx b/web/src/components/organisms/Project/Content/ContentDetails/index.tsx
@@ -111,6 +111,7 @@ const ContentDetails: React.FC = () => {
             threadId={currentItem.threadId}
             collapsed={collapsedCommentsPanel}
             onCollapse={collapseCommentsPanel}
+            refetchQueries={["GetItem"]}
           />
         ) : undefined
       }

diff --git a/web/src/components/organisms/Project/Content/ContentList/index.tsx b/web/src/components/organisms/Project/Content/ContentList/index.tsx
@@ -64,6 +64,7 @@ const ContentList: React.FC = () => {
           }
           comments={selectedItem?.comments}
           threadId={selectedItem?.threadId}
+          refetchQueries={["SearchItem"]}
         />
       }
       modelsMenu={

diff --git a/web/src/components/organisms/Project/Request/RequestList/index.tsx b/web/src/components/organisms/Project/Request/RequestList/index.tsx
@@ -43,6 +43,7 @@ const RequestList: React.FC = () => {
           }
           comments={selectedRequest?.comments}
           threadId={selectedRequest?.threadId}
+          refetchQueries={["GetRequests"]}
         />
       }
       requests={requests}