feat(web): add tooltip for experimental functions (#1232)

reearth · Nov 8, 2024 · 3d0f736 · 3d0f736
1 parent 6a96cb9
commit 3d0f736
Show file tree

Hide file tree

Showing 18 changed files with 166 additions and 44 deletions.
diff --git a/...ntentsContainer/Projects/Project/hooks.ts → ...tentsContainer/Projects/Project/hooks.tsx b/...ntentsContainer/Projects/Project/hooks.ts → ...tentsContainer/Projects/Project/hooks.tsx
@@ -1,4 +1,5 @@
 import { PopupMenuItem } from "@reearth/beta/lib/reearth-ui";
+import Tooltip from "@reearth/beta/ui/components/Tooltip";
 import useDoubleClick from "@reearth/beta/utils/use-double-click";
 import {
   useStorytellingFetcher,
@@ -94,8 +95,9 @@ export default ({
     },
     {
       id: "export",
-      title: t("Export (Experimental)"),
+      title: t("Export"),
       icon: "downloadSimple",
+      tileComponent: <Tooltip type="experimental" />,
       onClick: () => handleExportProject()
     },
     {

diff --git a/web/src/beta/features/Dashboard/ContentsContainer/Projects/index.tsx b/web/src/beta/features/Dashboard/ContentsContainer/Projects/index.tsx
@@ -7,6 +7,7 @@ import {
   ManagerWrapper
 } from "@reearth/beta/ui/components/ManagerBase";
 import ManagerEmptyContent from "@reearth/beta/ui/components/ManagerBase/ManagerEmptyContent";
+import Tooltip from "@reearth/beta/ui/components/Tooltip";
 import { useT } from "@reearth/services/i18n";
 import { styled, useTheme } from "@reearth/services/theme";
 import { FC, useMemo, useRef, Fragment } from "react";
@@ -72,11 +73,12 @@ const Projects: FC<{ workspaceId?: string }> = ({ workspaceId }) => {
             />
             <ManagerHeaderButton
               key={"import-project"}
-              title={t("Import (Experimental)")}
+              title={t("Import")}
               managerSize="large"
               icon="signIn"
               appearance="secondary"
               onClick={() => fileInputRef.current?.click()}
+              tileComponent={<Tooltip type="experimental" />}
             />
             <HiddenFileInput
               type="file"

diff --git a/web/src/beta/features/Dashboard/LeftSidePanel/index.tsx b/web/src/beta/features/Dashboard/LeftSidePanel/index.tsx
@@ -7,7 +7,6 @@ import {
   SidebarVersion,
   SidebarWrapper
 } from "@reearth/beta/ui/components/Sidebar";
-import { useT } from "@reearth/services/i18n";
 import { FC } from "react";
 
 import StarredProject from "../ContentsContainer/Projects/StarredProject";
@@ -35,8 +34,6 @@ const LeftSidePanel: FC<Props> = ({
   onSignOut,
   onWorkspaceChange
 }) => {
-  const t = useT();
-
   return (
     <SidebarWrapper>
       <SidebarMainSection>
@@ -54,10 +51,11 @@ const LeftSidePanel: FC<Props> = ({
             <SidebarMenuItem
               key={tab.id}
               path={tab.path}
-              text={t(tab.text || "")}
+              text={tab.text}
               icon={tab.icon}
               active={tab.id === currentTab}
               disabled={tab.disabled}
+              tileComponent={tab.tileComponent}
             />
           ))}
         </SidebarButtonsWrapper>
@@ -72,10 +70,11 @@ const LeftSidePanel: FC<Props> = ({
             <SidebarMenuItem
               key={tab.id}
               path={tab.path}
-              text={t(tab.text || "")}
+              text={tab.text}
               icon={tab.icon}
               active={tab.id === currentTab}
               disabled={tab.disabled}
+              tileComponent={tab.tileComponent}
             />
           ))}
         </SidebarButtonsWrapper>

diff --git a/web/src/beta/features/Dashboard/index.tsx b/web/src/beta/features/Dashboard/index.tsx
@@ -1,4 +1,5 @@
 import { DEFAULT_SIDEBAR_WIDTH } from "@reearth/beta/ui/components/Sidebar";
+import Tooltip from "@reearth/beta/ui/components/Tooltip";
 import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
 import { FC, useMemo } from "react";
@@ -33,7 +34,8 @@ const Dashboard: FC<DashboardProps> = ({ workspaceId }) => {
         id: "plugin",
         text: t("Plugin Playground"),
         icon: "puzzlePiece",
-        disabled: true
+        tileComponent: <Tooltip type="experimental" />,
+        path: "/plugin-playground"
       },
       {
         id: "documentation",

diff --git a/web/src/beta/features/Dashboard/type.ts b/web/src/beta/features/Dashboard/type.ts
@@ -1,6 +1,7 @@
 import { IconName } from "@reearth/beta/lib/reearth-ui";
 import { TeamMember } from "@reearth/services/gql";
 import { ProjectType } from "@reearth/types";
+import { ReactNode } from "react";
 
 export type Project = {
   id: string;
@@ -31,6 +32,7 @@ export type TabItems = {
   path?: string;
   active?: boolean;
   disabled?: boolean;
+  tileComponent?: ReactNode;
 };
 
 export type User = {

diff --git a/web/src/beta/features/Editor/Map/DataSourceLayerCreator/CZML/index.tsx b/web/src/beta/features/Editor/Map/DataSourceLayerCreator/CZML/index.tsx
@@ -38,11 +38,7 @@ const CZML: FC<DataProps> = ({ sceneId, onSubmit, onClose }) => {
     <Wrapper>
       <ContentWrapper>
         <Warning>
-          <IconWrapper
-            icon="lightBulb"
-            color={theme.warning.main}
-            size="normal"
-          />
+          <IconWrapper icon="flask" color={theme.warning.main} size="normal" />
           <TextWrapper>
             {t(
               "Support for the CZML format is currently experimental and remains somewhat unstable, with certain features not yet fully supported. We advise using it with caution."

diff --git a/web/src/beta/features/Editor/Map/DataSourceLayerCreator/KML/index.tsx b/web/src/beta/features/Editor/Map/DataSourceLayerCreator/KML/index.tsx
@@ -38,11 +38,7 @@ const KML: FC<DataProps> = ({ sceneId, onSubmit, onClose }) => {
     <Wrapper>
       <ContentWrapper>
         <Warning>
-          <IconWrapper
-            icon="lightBulb"
-            color={theme.warning.main}
-            size="normal"
-          />
+          <IconWrapper icon="flask" color={theme.warning.main} size="normal" />
           <TextWrapper>
             {t(
               "Support for the KML format is currently experimental and remains somewhat unstable, with certain features not yet fully supported. We advise using it with caution."

diff --git a/web/src/beta/lib/reearth-ui/components/Button/index.tsx b/web/src/beta/lib/reearth-ui/components/Button/index.tsx
@@ -1,5 +1,5 @@
 import { styled } from "@reearth/services/theme";
-import { FC, MouseEvent } from "react";
+import { FC, MouseEvent, ReactNode } from "react";
 
 import { IconName, Icon } from "../Icon";
 
@@ -15,6 +15,7 @@ export type ButtonProps = {
   extendWidth?: boolean;
   minWidth?: number;
   background?: string;
+  tileComponent?: ReactNode;
   onClick?: (e: MouseEvent<HTMLElement>) => void;
   onMouseEnter?: (e: MouseEvent<HTMLElement>) => void;
   onMouseLeave?: (e: MouseEvent<HTMLElement>) => void;
@@ -32,6 +33,7 @@ export const Button: FC<ButtonProps> = ({
   extendWidth,
   minWidth,
   background,
+  tileComponent,
   onClick,
   onMouseEnter,
   onMouseLeave
@@ -52,6 +54,7 @@ export const Button: FC<ButtonProps> = ({
       {icon && <Icon icon={icon} color={iconColor} />}
       {!iconButton && title}
       {iconRight && <Icon icon={iconRight} />}
+      {tileComponent}
     </StyledButton>
   );
 };

diff --git a/web/src/beta/lib/reearth-ui/components/Icon/Icons/Flask.svg b/web/src/beta/lib/reearth-ui/components/Icon/Icons/Flask.svg
diff --git a/web/src/beta/lib/reearth-ui/components/Icon/icons.ts b/web/src/beta/lib/reearth-ui/components/Icon/icons.ts
@@ -61,6 +61,7 @@ import FileFilled from "./Icons/FileFilled.svg?react";
 import FileHtml from "./Icons/FileHtml.svg?react";
 import FileMD from "./Icons/FileMD.svg?react";
 import FileMDFilled from "./Icons/FileMDFilled.svg?react";
+import Flask from "./Icons/Flask.svg?react";
 import FloppyDisk from "./Icons/FloppyDisk.svg?react";
 import FolderFilled from "./Icons/FolderFilled.svg?react";
 import FolderSimple from "./Icons/FolderSimple.svg?react";
@@ -222,6 +223,7 @@ export default {
   fileHtml: FileHtml,
   fileMD: FileMD,
   fileMDFilled: FileMDFilled,
+  flask: Flask,
   floppyDisk: FloppyDisk,
   folderFilled: FolderFilled,
   folderSimple: FolderSimple,

diff --git a/web/src/beta/lib/reearth-ui/components/PopupMenu/index.tsx b/web/src/beta/lib/reearth-ui/components/PopupMenu/index.tsx
@@ -33,6 +33,7 @@ export type PopupMenuItem = {
   subItem?: PopupMenuItem[];
   title?: string;
   disabled?: boolean;
+  tileComponent?: ReactNode;
 };
 
 export type PopupMenuProps = {
@@ -96,7 +97,8 @@ export const PopupMenu: FC<PopupMenuProps> = ({
       selected,
       subItem,
       title,
-      disabled
+      disabled,
+      tileComponent
     } = item;
 
     return (
@@ -125,10 +127,16 @@ export const PopupMenu: FC<PopupMenuProps> = ({
             <PopupMenu label={title} menu={subItem} width={width} nested />
           ) : path ? (
             <StyledLink to={disabled ? "" : path}>
-              <TitleWrapper disabled={disabled}>{title}</TitleWrapper>
+              <TitleWrapper disabled={disabled}>
+                {title}
+                {tileComponent}
+              </TitleWrapper>
             </StyledLink>
           ) : (
-            <TitleWrapper disabled={disabled}>{title}</TitleWrapper>
+            <TitleWrapper disabled={disabled}>
+              {title}
+              {tileComponent}
+            </TitleWrapper>
           )}
           {selected && (
             <IconWrapper>
@@ -360,6 +368,9 @@ const TitleWrapper = styled("div")<{ disabled?: boolean }>(
     whiteSpace: "nowrap",
     overflow: "hidden",
     textOverflow: "ellipsis",
-    maxWidth: 160
+    maxWidth: 160,
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing.small
   })
 );
diff --git a/web/src/beta/ui/components/Sidebar/index.tsx b/web/src/beta/ui/components/Sidebar/index.tsx
@@ -1,15 +1,16 @@
 import { IconName, Icon, Typography } from "@reearth/beta/lib/reearth-ui";
 import { useT } from "@reearth/services/i18n";
 import { styled, useTheme } from "@reearth/services/theme";
-import { FC } from "react";
+import { FC, ReactNode } from "react";
 import { Link } from "react-router-dom";
 
 export type SidebarMenuItemProps = {
-  text?: string;
+  text?: string | ReactNode;
   icon?: IconName;
   path?: string;
   active?: boolean;
   disabled?: boolean;
+  tileComponent?: ReactNode;
   onClick?: () => void;
 };
 
@@ -21,25 +22,29 @@ export const SidebarMenuItem: FC<SidebarMenuItemProps> = ({
   active,
   disabled,
   path,
+  tileComponent,
   onClick
 }) => {
   const theme = useTheme();
   return (
     <StyledLinkButton to={path || ""} disabled={disabled}>
       <MenuWrapper active={active} disabled={disabled} onClick={onClick}>
-        {icon && (
-          <Icon
-            icon={icon}
-            size="normal"
-            color={active ? theme.content.main : theme.content.weak}
-          />
-        )}
-        <Typography
-          size="body"
-          color={disabled ? theme.content.weak : theme.content.main}
-        >
-          {text}
-        </Typography>
+        <Info>
+          {icon && (
+            <Icon
+              icon={icon}
+              size="normal"
+              color={active ? theme.content.main : theme.content.weak}
+            />
+          )}
+          <Typography
+            size="body"
+            color={disabled ? theme.content.weak : theme.content.main}
+          >
+            {text}
+          </Typography>
+        </Info>
+        {tileComponent && <Tile>{tileComponent}</Tile>}
       </MenuWrapper>
     </StyledLinkButton>
   );
@@ -56,6 +61,7 @@ const MenuWrapper = styled("div")<{ active?: boolean; disabled?: boolean }>(
   ({ active, theme, disabled }) => ({
     display: "flex",
     alignItems: "center",
+    justifyContent: "space-between",
     alignSelf: "stretch",
     gap: theme.spacing.small,
     background: active ? theme.select.main : "",
@@ -69,6 +75,19 @@ const MenuWrapper = styled("div")<{ active?: boolean; disabled?: boolean }>(
   })
 );
 
+const Info = styled("div")(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: theme.spacing.small
+}));
+
+const Tile = styled("div")(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: theme.spacing.small,
+  flexShrink: 0
+}));
+
 export const SidebarWrapper = styled("div")(() => ({
   display: "flex",
   flexDirection: "column",