feat: show popup unsaved changes leaves page

ui/dashboard/src/@api/environment-result/environment-result-details.ts

@@ -0,0 +1,20 @@
+import axiosClient from '@api/axios-client';
+import pickBy from 'lodash/pickBy';
+import { EnvironmentResponse } from '@types';
+import { isNotEmpty } from 'utils/data-type';
+import { stringifyParams } from 'utils/search-params';
+
+export interface EnvironmentResultDetailsFetcherParams {
+  id: string;
+}
+
+export const environmentResultDetailsFetcher = async (
+  params?: EnvironmentResultDetailsFetcherParams
+): Promise<EnvironmentResponse> => {
+  const requestParams = stringifyParams(pickBy(params, v => isNotEmpty(v)));
+  return axiosClient
+    .get<EnvironmentResponse>(
+      `/v1/environment/get_environment?${requestParams}`
+    )
+    .then(response => response.data);
+};

ui/dashboard/src/@api/environment-result/index.ts

@@ -0,0 +1 @@
+export * from './environment-result-details';

ui/dashboard/src/@locales/en/common.json

@@ -289,5 +289,11 @@
   "member-role-description": "Can only access specific environments and cannot create or update organization settings, projects, environments, API keys, or members.",
   "admin-role-description": "Has access to all environments and can do anything",
   "teams": "Teams",
-  "docs": "Docs"
+  "docs": "Docs",
+  "new": "New",
+  "discard": "Discard changes",
+  "edit-rule": "Edit rule",
+  "add-rule":"Add rule",
+  "continue-editing":"Continue editing",
+  "leave-page":"Leave page"
 }

ui/dashboard/src/@locales/en/message.json

@@ -57,5 +57,7 @@
   "demo-not-available": "The Demo feature is not available at the moment.",
   "demo-available": "Authenticate with Google and get started!",
   "demo-privacy-description": "We collect your name and email address to analyze demo usage, and we may contact you for feedback about Bucketeer.<br />We will not share your information with any third parties. For any questions or to delete your information, please contact us via <comp>Slack</comp>.",
-  "required-agreement-terms": "The agreement to the Terms of Use and Privacy Policy is required to proceed."
+  "required-agreement-terms": "The agreement to the Terms of Use and Privacy Policy is required to proceed.",
+  "leave-page-unsaved-changes": "You have unsaved changes",
+  "leave-page-unsaved-changes-content": "If you leave this page, the changes will be lost."
 }

ui/dashboard/src/@locales/ja/common.json

@@ -289,5 +289,11 @@
   "member-role-description": "特定の環境にのみアクセスでき、組織設定、プロジェクト、環境、APIキー、メンバーの作成や更新はできません。",
   "admin-role-description": "すべての環境にアクセスでき、すべての操作を実行できます。",
   "teams": "チーム",
-  "docs": "ドキュメント"
+  "docs": "ドキュメント",
+  "new":"新規",
+  "discard": "変更を破棄",
+  "edit-rule": "ルールを編集",
+  "add-rule": "ルールを追加",
+  "continue-editing": "編集を続ける",
+  "leave-page": "ページを離れる"
 }

ui/dashboard/src/@locales/ja/message.json

@@ -57,5 +57,7 @@
   "demo-not-available": "現在、デモ機能はご利用いただけません。",
   "demo-available": "Googleで認証してデモをスタート！",
   "demo-privacy-description": "デモの利用状況を分析し、必要に応じてBucketeerに関するご意見を伺うため、お名前とメールアドレスを収集しています。.<br />ご提供いただいた情報を第三者に共有することはありません。ご質問や情報の削除をご希望の場合は、<comp>Slack</comp>からご連絡ください。",
-  "required-agreement-terms": "利用規約およびプライバシーポリシーへの同意が必要です。"
+  "required-agreement-terms": "利用規約およびプライバシーポリシーへの同意が必要です。",
+  "leave-page-unsaved-changes": "未保存の変更があります",
+  "leave-page-unsaved-changes-content": "このページを離れると、変更内容が失われます。"
 }

ui/dashboard/src/@queries/environments-details.ts

@@ -0,0 +1,30 @@
+import {
+  environmentResultDetailsFetcher,
+  EnvironmentResultDetailsFetcherParams
+} from '@api/environment-result/environment-result-details';
+import { QueryClient, useQuery } from '@tanstack/react-query';
+import type { EnvironmentResponse, QueryOptionsRespond } from '@types';
+
+type QueryOptions = QueryOptionsRespond<EnvironmentResponse> & {
+  params?: EnvironmentResultDetailsFetcherParams;
+};
+
+export const ENVIRONMENTS_DETAILS_QUERY_KEY = 'environment-details';
+
+export const useQueryEnvironmentDetails = (options?: QueryOptions) => {
+  const { params, ...queryOptions } = options || {};
+  const query = useQuery({
+    queryKey: [ENVIRONMENTS_DETAILS_QUERY_KEY, params],
+    queryFn: async () => {
+      return environmentResultDetailsFetcher(params);
+    },
+    ...queryOptions
+  });
+  return query;
+};
+
+export const invalidateEnvironmentDetails = (queryClient: QueryClient) => {
+  queryClient.invalidateQueries({
+    queryKey: [ENVIRONMENTS_DETAILS_QUERY_KEY]
+  });
+};

ui/dashboard/src/app/index.tsx

@@ -39,6 +39,7 @@ import {
   PAGE_PATH_SETTINGS,
   PAGE_PATH_USER_SEGMENTS
 } from 'constants/routing';
+import { ConfirmProvider } from 'hooks/use-unsaved-leave-page';
 import { i18n } from 'i18n';
 import pickBy from 'lodash/pickBy';
 import {
@@ -62,7 +63,6 @@ import AuditLogsPage from 'pages/audit-logs';
 import DebuggerPage from 'pages/debugger';
 import AccessDemoPage from 'pages/demo';
 import CreateDemoPage from 'pages/demo/demo-create';
-import MembersPage from 'pages/members';
 import NotFoundPage from 'pages/not-found';
 import NotificationsPage from 'pages/notifications';
 import PushesPage from 'pages/pushes';
@@ -79,7 +79,8 @@ import {
   OrganizationsRoot,
   ProjectsRoot,
   GoalsRoot,
-  FeatureFlagsRoot
+  FeatureFlagsRoot,
+  MemberRoot
 } from './routers';
 
 export const AppLoading = () => (
@@ -100,30 +101,35 @@ function App() {
   return (
     <I18nextProvider i18n={i18n}>
       <QueryClientProvider client={queryClient}>
-        <BrowserRouter>
-          <AuthProvider>
-            <Routes>
-              <Route
-                path={PAGE_PATH_AUTH_CALLBACK}
-                element={<AuthCallbackPage />}
-              />
-              <Route
-                path={PAGE_PATH_AUTH_DEMO_CALLBACK}
-                element={<AuthDemoCallbackPage />}
-              />
-              <Route
-                path={PAGE_PATH_AUTH_SIGNIN}
-                element={<SignInEmailPage />}
-              />
-              <Route path={PAGE_PATH_DEMO_SITE} element={<AccessDemoPage />} />
-              <Route
-                path={`${PAGE_PATH_DEMO_SITE}/new`}
-                element={<CreateDemoPage />}
-              />
-              <Route path={`${PAGE_PATH_ROOT}*`} element={<Root />} />
-            </Routes>
-          </AuthProvider>
-        </BrowserRouter>
+        <ConfirmProvider>
+          <BrowserRouter>
+            <AuthProvider>
+              <Routes>
+                <Route
+                  path={PAGE_PATH_AUTH_CALLBACK}
+                  element={<AuthCallbackPage />}
+                />
+                <Route
+                  path={PAGE_PATH_AUTH_DEMO_CALLBACK}
+                  element={<AuthDemoCallbackPage />}
+                />
+                <Route
+                  path={PAGE_PATH_AUTH_SIGNIN}
+                  element={<SignInEmailPage />}
+                />
+                <Route
+                  path={PAGE_PATH_DEMO_SITE}
+                  element={<AccessDemoPage />}
+                />
+                <Route
+                  path={`${PAGE_PATH_DEMO_SITE}/new`}
+                  element={<CreateDemoPage />}
+                />
+                <Route path={`${PAGE_PATH_ROOT}*`} element={<Root />} />
+              </Routes>
+            </AuthProvider>
+          </BrowserRouter>
+        </ConfirmProvider>
         {/* {process.env.NODE_ENV === 'development' && (
           <ReactQueryDevtools initialIsOpen={false} />
         )} */}
@@ -269,7 +275,7 @@ export const EnvironmentRoot = memo(
         <Route path={`${PAGE_PATH_SETTINGS}`} element={<SettingsPage />} />
         <Route path={`${PAGE_PATH_PROJECTS}/*`} element={<ProjectsRoot />} />
         <Route path={`${PAGE_PATH_APIKEYS}/*`} element={<APIKeysPage />} />
-        <Route path={`${PAGE_PATH_MEMBERS}`} element={<MembersPage />} />
+        <Route path={`${PAGE_PATH_MEMBERS}/*`} element={<MemberRoot />} />
         <Route
           path={`${PAGE_PATH_NOTIFICATIONS}/*`}
           element={<NotificationsPage />}

ui/dashboard/src/app/routers.tsx

@@ -7,6 +7,7 @@ import FeatureFlagDetailsPage from 'pages/feature-flag-details';
 import FeatureFlagsPage from 'pages/feature-flags';
 import GoalDetailsPage from 'pages/goal-details';
 import GoalsPage from 'pages/goals';
+import MembersPage from 'pages/members';
 import OrganizationDetailPage from 'pages/organization-details';
 import OrganizationsPage from 'pages/organizations';
 import ProjectDetailsPage from 'pages/project-details';
@@ -16,6 +17,8 @@ export const OrganizationsRoot = () => {
   return (
     <Routes>
       <Route index element={<OrganizationsPage />} />
+      <Route path="new" element={<OrganizationsPage />} />
+      <Route path=":organizationId" element={<OrganizationsPage />} />
       <Route path=":organizationId/*" element={<OrganizationDetailPage />} />
     </Routes>
   );
@@ -25,6 +28,8 @@ export const ProjectsRoot = () => {
   return (
     <Routes>
       <Route index element={<ProjectsPage />} />
+      <Route path="new" element={<ProjectsPage />} />
+      <Route path=":projectId" element={<ProjectsPage />} />
       <Route path=":projectId/*" element={<ProjectDetailsPage />} />
     </Routes>
   );
@@ -61,3 +66,13 @@ export const FeatureFlagsRoot = () => {
     </Routes>
   );
 };
+
+export const MemberRoot = () => {
+  return (
+    <Routes>
+      <Route index element={<MembersPage />} />
+      <Route path={ID_NEW} element={<MembersPage />} />
+      <Route path=":memberId" element={<MembersPage />} />
+    </Routes>
+  );
+};

ui/dashboard/src/components/modal/slide.tsx

@@ -53,7 +53,12 @@ const SlideModal = ({
                 </Dialog.Title>
                 <Dialog.Description className="hidden" />
                 <Dialog.Close asChild>
-                  <Button size="icon-sm" variant="grey" onClick={onClose}>
+                  <Button
+                    type="button"
+                    size="icon-sm"
+                    variant="grey"
+                    onClick={onClose}
+                  >
                     <Icon icon={IconCloseRound} />
                   </Button>
                 </Dialog.Close>

ui/dashboard/src/hooks/use-action-with-url.tsx

@@ -14,12 +14,16 @@ const useActionWithURL = ({ idKey = '*', addPath, closeModalPath }: Props) => {
   const navigate = useNavigate();
   const location = useLocation();
   const { state } = location;
+  const lastPath = useMemo(() => {
+    const paths = location.pathname.split('/').filter(Boolean);
+    return paths[paths.length - 1];
+  }, [location.pathname]);
 
-  const isAdd = useMemo(() => path === ID_NEW, [path]);
-  const isClone = useMemo(() => path?.includes('clone'), [path]);
+  const isAdd = useMemo(() => lastPath === ID_NEW, [lastPath]);
+  const isClone = useMemo(() => lastPath?.includes('clone'), [lastPath]);
   const isEdit = useMemo(
-    () => path && !isAdd && !isClone,
-    [path, isAdd, isClone]
+    () => id && path && !isAdd && !isClone,
+    [path, isAdd, isClone, idKey]
   );
 
   const onOpenAddModal = useCallback(