Skip to content

Commit c3d7cd7

Browse files
steveninhlesteveninhle
authored
feat: show popup unsaved changes leaves page (#2141)
1 parent ca41162 commit c3d7cd7

File tree

51 files changed

+1227
-592
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

51 files changed

+1227
-592
lines changed

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

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import axiosClient from '@api/axios-client';
2+
import pickBy from 'lodash/pickBy';
3+
import { EnvironmentResponse } from '@types';
4+
import { isNotEmpty } from 'utils/data-type';
5+
import { stringifyParams } from 'utils/search-params';
6+
7+
export interface EnvironmentResultDetailsFetcherParams {
8+
id: string;
9+
}
10+
11+
export const environmentResultDetailsFetcher = async (
12+
params?: EnvironmentResultDetailsFetcherParams
13+
): Promise<EnvironmentResponse> => {
14+
const requestParams = stringifyParams(pickBy(params, v => isNotEmpty(v)));
15+
return axiosClient
16+
.get<EnvironmentResponse>(
17+
`/v1/environment/get_environment?${requestParams}`
18+
)
19+
.then(response => response.data);
20+
};

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './environment-result-details';

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

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -289,5 +289,11 @@
289289
"member-role-description": "Can only access specific environments and cannot create or update organization settings, projects, environments, API keys, or members.",
290290
"admin-role-description": "Has access to all environments and can do anything",
291291
"teams": "Teams",
292-
"docs": "Docs"
292+
"docs": "Docs",
293+
"new": "New",
294+
"discard": "Discard changes",
295+
"edit-rule": "Edit rule",
296+
"add-rule":"Add rule",
297+
"continue-editing":"Continue editing",
298+
"leave-page":"Leave page"
293299
}

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,5 +57,7 @@
5757
"demo-not-available": "The Demo feature is not available at the moment.",
5858
"demo-available": "Authenticate with Google and get started!",
5959
"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>.",
60-
"required-agreement-terms": "The agreement to the Terms of Use and Privacy Policy is required to proceed."
60+
"required-agreement-terms": "The agreement to the Terms of Use and Privacy Policy is required to proceed.",
61+
"leave-page-unsaved-changes": "You have unsaved changes",
62+
"leave-page-unsaved-changes-content": "If you leave this page, the changes will be lost."
6163
}

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

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -289,5 +289,11 @@
289289
"member-role-description": "特定の環境にのみアクセスでき、組織設定、プロジェクト、環境、APIキー、メンバーの作成や更新はできません。",
290290
"admin-role-description": "すべての環境にアクセスでき、すべての操作を実行できます。",
291291
"teams": "チーム",
292-
"docs": "ドキュメント"
292+
"docs": "ドキュメント",
293+
"new":"新規",
294+
"discard": "変更を破棄",
295+
"edit-rule": "ルールを編集",
296+
"add-rule": "ルールを追加",
297+
"continue-editing": "編集を続ける",
298+
"leave-page": "ページを離れる"
293299
}

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

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

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

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import {
2+
environmentResultDetailsFetcher,
3+
EnvironmentResultDetailsFetcherParams
4+
} from '@api/environment-result/environment-result-details';
5+
import { QueryClient, useQuery } from '@tanstack/react-query';
6+
import type { EnvironmentResponse, QueryOptionsRespond } from '@types';
7+
8+
type QueryOptions = QueryOptionsRespond<EnvironmentResponse> & {
9+
params?: EnvironmentResultDetailsFetcherParams;
10+
};
11+
12+
export const ENVIRONMENTS_DETAILS_QUERY_KEY = 'environment-details';
13+
14+
export const useQueryEnvironmentDetails = (options?: QueryOptions) => {
15+
const { params, ...queryOptions } = options || {};
16+
const query = useQuery({
17+
queryKey: [ENVIRONMENTS_DETAILS_QUERY_KEY, params],
18+
queryFn: async () => {
19+
return environmentResultDetailsFetcher(params);
20+
},
21+
...queryOptions
22+
});
23+
return query;
24+
};
25+
26+
export const invalidateEnvironmentDetails = (queryClient: QueryClient) => {
27+
queryClient.invalidateQueries({
28+
queryKey: [ENVIRONMENTS_DETAILS_QUERY_KEY]
29+
});
30+
};

‎ui/dashboard/src/app/index.tsx‎

Lines changed: 33 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ import {
3939
PAGE_PATH_SETTINGS,
4040
PAGE_PATH_USER_SEGMENTS
4141
} from 'constants/routing';
42+
import { ConfirmProvider } from 'hooks/use-unsaved-leave-page';
4243
import { i18n } from 'i18n';
4344
import pickBy from 'lodash/pickBy';
4445
import {
@@ -62,7 +63,6 @@ import AuditLogsPage from 'pages/audit-logs';
6263
import DebuggerPage from 'pages/debugger';
6364
import AccessDemoPage from 'pages/demo';
6465
import CreateDemoPage from 'pages/demo/demo-create';
65-
import MembersPage from 'pages/members';
6666
import NotFoundPage from 'pages/not-found';
6767
import NotificationsPage from 'pages/notifications';
6868
import PushesPage from 'pages/pushes';
@@ -79,7 +79,8 @@ import {
7979
OrganizationsRoot,
8080
ProjectsRoot,
8181
GoalsRoot,
82-
FeatureFlagsRoot
82+
FeatureFlagsRoot,
83+
MemberRoot
8384
} from './routers';
8485

8586
export const AppLoading = () => (
@@ -100,30 +101,35 @@ function App() {
100101
return (
101102
<I18nextProvider i18n={i18n}>
102103
<QueryClientProvider client={queryClient}>
103-
<BrowserRouter>
104-
<AuthProvider>
105-
<Routes>
106-
<Route
107-
path={PAGE_PATH_AUTH_CALLBACK}
108-
element={<AuthCallbackPage />}
109-
/>
110-
<Route
111-
path={PAGE_PATH_AUTH_DEMO_CALLBACK}
112-
element={<AuthDemoCallbackPage />}
113-
/>
114-
<Route
115-
path={PAGE_PATH_AUTH_SIGNIN}
116-
element={<SignInEmailPage />}
117-
/>
118-
<Route path={PAGE_PATH_DEMO_SITE} element={<AccessDemoPage />} />
119-
<Route
120-
path={`${PAGE_PATH_DEMO_SITE}/new`}
121-
element={<CreateDemoPage />}
122-
/>
123-
<Route path={`${PAGE_PATH_ROOT}*`} element={<Root />} />
124-
</Routes>
125-
</AuthProvider>
126-
</BrowserRouter>
104+
<ConfirmProvider>
105+
<BrowserRouter>
106+
<AuthProvider>
107+
<Routes>
108+
<Route
109+
path={PAGE_PATH_AUTH_CALLBACK}
110+
element={<AuthCallbackPage />}
111+
/>
112+
<Route
113+
path={PAGE_PATH_AUTH_DEMO_CALLBACK}
114+
element={<AuthDemoCallbackPage />}
115+
/>
116+
<Route
117+
path={PAGE_PATH_AUTH_SIGNIN}
118+
element={<SignInEmailPage />}
119+
/>
120+
<Route
121+
path={PAGE_PATH_DEMO_SITE}
122+
element={<AccessDemoPage />}
123+
/>
124+
<Route
125+
path={`${PAGE_PATH_DEMO_SITE}/new`}
126+
element={<CreateDemoPage />}
127+
/>
128+
<Route path={`${PAGE_PATH_ROOT}*`} element={<Root />} />
129+
</Routes>
130+
</AuthProvider>
131+
</BrowserRouter>
132+
</ConfirmProvider>
127133
{/* {process.env.NODE_ENV === 'development' && (
128134
<ReactQueryDevtools initialIsOpen={false} />
129135
)} */}
@@ -269,7 +275,7 @@ export const EnvironmentRoot = memo(
269275
<Route path={`${PAGE_PATH_SETTINGS}`} element={<SettingsPage />} />
270276
<Route path={`${PAGE_PATH_PROJECTS}/*`} element={<ProjectsRoot />} />
271277
<Route path={`${PAGE_PATH_APIKEYS}/*`} element={<APIKeysPage />} />
272-
<Route path={`${PAGE_PATH_MEMBERS}`} element={<MembersPage />} />
278+
<Route path={`${PAGE_PATH_MEMBERS}/*`} element={<MemberRoot />} />
273279
<Route
274280
path={`${PAGE_PATH_NOTIFICATIONS}/*`}
275281
element={<NotificationsPage />}

‎ui/dashboard/src/app/routers.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import FeatureFlagDetailsPage from 'pages/feature-flag-details';
77
import FeatureFlagsPage from 'pages/feature-flags';
88
import GoalDetailsPage from 'pages/goal-details';
99
import GoalsPage from 'pages/goals';
10+
import MembersPage from 'pages/members';
1011
import OrganizationDetailPage from 'pages/organization-details';
1112
import OrganizationsPage from 'pages/organizations';
1213
import ProjectDetailsPage from 'pages/project-details';
@@ -16,6 +17,8 @@ export const OrganizationsRoot = () => {
1617
return (
1718
<Routes>
1819
<Route index element={<OrganizationsPage />} />
20+
<Route path="new" element={<OrganizationsPage />} />
21+
<Route path=":organizationId" element={<OrganizationsPage />} />
1922
<Route path=":organizationId/*" element={<OrganizationDetailPage />} />
2023
</Routes>
2124
);
@@ -25,6 +28,8 @@ export const ProjectsRoot = () => {
2528
return (
2629
<Routes>
2730
<Route index element={<ProjectsPage />} />
31+
<Route path="new" element={<ProjectsPage />} />
32+
<Route path=":projectId" element={<ProjectsPage />} />
2833
<Route path=":projectId/*" element={<ProjectDetailsPage />} />
2934
</Routes>
3035
);
@@ -61,3 +66,13 @@ export const FeatureFlagsRoot = () => {
6166
</Routes>
6267
);
6368
};
69+
70+
export const MemberRoot = () => {
71+
return (
72+
<Routes>
73+
<Route index element={<MembersPage />} />
74+
<Route path={ID_NEW} element={<MembersPage />} />
75+
<Route path=":memberId" element={<MembersPage />} />
76+
</Routes>
77+
);
78+
};

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

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,12 @@ const SlideModal = ({
5353
</Dialog.Title>
5454
<Dialog.Description className="hidden" />
5555
<Dialog.Close asChild>
56-
<Button size="icon-sm" variant="grey" onClick={onClose}>
56+
<Button
57+
type="button"
58+
size="icon-sm"
59+
variant="grey"
60+
onClick={onClose}
61+
>
5762
<Icon icon={IconCloseRound} />
5863
</Button>
5964
</Dialog.Close>

0 commit comments

Comments
 (0)