- {sections.map(({ title, items }) => (
+ {sections?.map(({ title, items }) => (
- {items.map(({ title, Icon, modal }) => (
- }
- isActive={location.pathname.startsWith(getPath(title))}
- modal={modal}
- />
- ))}
+ {items.map(
+ ({ title, Icon, isHidden, modal }) =>
+ !isHidden && (
+ }
+ isActive={location.pathname.startsWith(getPath(title))}
+ modal={modal}
+ />
+ )
+ )}
))}
@@ -42,5 +46,4 @@ const Sidebar = () => {
export default Sidebar;
-export * from './consts';
export * from './utils';
diff --git a/packages/console/src/components/ConfirmModal/index.tsx b/packages/console/src/components/ConfirmModal/index.tsx
new file mode 100644
index 000000000..3bb36a903
--- /dev/null
+++ b/packages/console/src/components/ConfirmModal/index.tsx
@@ -0,0 +1,55 @@
+import { AdminConsoleKey, I18nKey } from '@logto/phrases';
+import React from 'react';
+import Modal from 'react-modal';
+
+import * as modalStyles from '@/scss/modal.module.scss';
+
+import Button from '../Button';
+import ModalLayout from '../ModalLayout';
+
+type Props = {
+ title: AdminConsoleKey;
+ children: React.ReactNode;
+ className?: string;
+ confirmButtonText?: I18nKey;
+ cancelButtonText?: I18nKey;
+ isOpen: boolean;
+ isPending?: boolean;
+ onConfirm: () => void;
+ onCancel: () => void;
+};
+
+const ConfirmModal = ({
+ title,
+ children,
+ className,
+ confirmButtonText = 'general.confirm',
+ cancelButtonText = 'general.cancel',
+ isOpen,
+ isPending,
+ onConfirm,
+ onCancel,
+}: Props) => (
+
+
+
+
+ >
+ }
+ className={className}
+ onClose={onCancel}
+ >
+ {children}
+
+
+);
+
+export default ConfirmModal;
diff --git a/packages/console/src/pages/GetStarted/components/GetStartedProgress/index.tsx b/packages/console/src/pages/GetStarted/components/GetStartedProgress/index.tsx
index 58e463b67..dcac9f356 100644
--- a/packages/console/src/pages/GetStarted/components/GetStartedProgress/index.tsx
+++ b/packages/console/src/pages/GetStarted/components/GetStartedProgress/index.tsx
@@ -17,7 +17,7 @@ const GetStartedProgress = () => {
const [showDropDown, setShowDropdown] = useState(false);
const { data, completedCount, totalCount } = useGetStartedMetadata();
- if (!configs) {
+ if (!configs || configs.hideGetStarted) {
return null;
}
diff --git a/packages/console/src/pages/GetStarted/index.tsx b/packages/console/src/pages/GetStarted/index.tsx
index 8e2d6f258..96a149df6 100644
--- a/packages/console/src/pages/GetStarted/index.tsx
+++ b/packages/console/src/pages/GetStarted/index.tsx
@@ -1,17 +1,29 @@
-import React from 'react';
+import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
import completeIndicator from '@/assets/images/circle-tick.svg';
import Button from '@/components/Button';
import Card from '@/components/Card';
+import ConfirmModal from '@/components/ConfirmModal';
import Spacer from '@/components/Spacer';
+import useAdminConsoleConfigs from '@/hooks/use-configs';
import useGetStartedMetadata from './hook';
import * as styles from './index.module.scss';
const GetStarted = () => {
const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
+ const navigate = useNavigate();
const { data } = useGetStartedMetadata();
+ const { updateConfigs } = useAdminConsoleConfigs();
+ const [showConfirmModal, setShowConfirmModal] = useState(false);
+
+ const hideGetStarted = () => {
+ void updateConfigs({ hideGetStarted: true });
+ // Navigate to next menu item
+ navigate('/dashboard');
+ };
return (
@@ -22,7 +34,14 @@ const GetStarted = () => {
{t('get_started.subtitle_part2')}
- {t('get_started.hide_this')}
+ {
+ setShowConfirmModal(true);
+ }}
+ >
+ {t('get_started.hide_this')}
+
@@ -43,6 +62,17 @@ const GetStarted = () => {
/>
))}
+