feat: add Settings/Accounts/Emails page (#2867)

Closes #2819
This commit is contained in:
Thaïs
2023-12-08 11:10:09 +01:00
committed by GitHub
parent 921366f5b3
commit 1f40c45140
20 changed files with 335 additions and 163 deletions

View File

@ -5,15 +5,19 @@ import { useAuth } from '@/auth/hooks/useAuth';
import { AppPath } from '@/types/AppPath';
import {
IconAt,
IconCalendarEvent,
IconColorSwatch,
IconHierarchy2,
IconLogout,
IconMail,
IconRobot,
IconSettings,
IconUserCircle,
IconUsers,
} from '@/ui/display/icon';
import { NavigationDrawerItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItem';
import { NavigationDrawerItemGroup } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItemGroup';
import { NavigationDrawerSection } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSection';
import { NavigationDrawerSectionTitle } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSectionTitle';
import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
@ -27,97 +31,122 @@ export const SettingsNavigationDrawerItems = () => {
}, [signOut, navigate]);
const isMessagingEnabled = useIsFeatureEnabled('IS_MESSAGING_ENABLED');
const isMessagingActive = !!useMatch({
const isAccountsItemActive = !!useMatch({
path: useResolvedPath('/settings/accounts').pathname,
end: true,
});
const isAccountsEmailsItemActive = !!useMatch({
path: useResolvedPath('/settings/accounts/emails').pathname,
end: true,
});
return (
<>
<NavigationDrawerSectionTitle label="User" />
<NavigationDrawerItem
label="Profile"
to="/settings/profile"
Icon={IconUserCircle}
active={
!!useMatch({
path: useResolvedPath('/settings/profile').pathname,
end: true,
})
}
/>
<NavigationDrawerItem
label="Appearance"
to="/settings/profile/appearance"
Icon={IconColorSwatch}
active={
!!useMatch({
path: useResolvedPath('/settings/profile/appearance').pathname,
end: true,
})
}
/>
{isMessagingEnabled && (
<NavigationDrawerSection>
<NavigationDrawerSectionTitle label="User" />
<NavigationDrawerItem
label="Accounts"
to="/settings/accounts"
Icon={IconAt}
active={isMessagingActive}
label="Profile"
to="/settings/profile"
Icon={IconUserCircle}
active={
!!useMatch({
path: useResolvedPath('/settings/profile').pathname,
end: true,
})
}
/>
)}
<NavigationDrawerItem
label="Appearance"
to="/settings/profile/appearance"
Icon={IconColorSwatch}
active={
!!useMatch({
path: useResolvedPath('/settings/profile/appearance').pathname,
end: true,
})
}
/>
{isMessagingEnabled && (
<NavigationDrawerItemGroup>
<NavigationDrawerItem
label="Accounts"
to="/settings/accounts"
Icon={IconAt}
active={isAccountsItemActive}
/>
<NavigationDrawerItem
level={2}
label="Emails"
to="/settings/accounts/emails"
Icon={IconMail}
active={isAccountsEmailsItemActive}
/>
<NavigationDrawerItem
level={2}
label="Calendars"
Icon={IconCalendarEvent}
soon
/>
</NavigationDrawerItemGroup>
)}
</NavigationDrawerSection>
<NavigationDrawerSectionTitle label="Workspace" />
<NavigationDrawerItem
label="General"
to="/settings/workspace"
Icon={IconSettings}
active={
!!useMatch({
path: useResolvedPath('/settings/workspace').pathname,
end: true,
})
}
/>
<NavigationDrawerItem
label="Members"
to="/settings/workspace-members"
Icon={IconUsers}
active={
!!useMatch({
path: useResolvedPath('/settings/workspace-members').pathname,
end: true,
})
}
/>
<NavigationDrawerItem
label="Data model"
to="/settings/objects"
Icon={IconHierarchy2}
active={
!!useMatch({
path: useResolvedPath('/settings/objects').pathname,
end: false,
})
}
/>
<NavigationDrawerItem
label="Developers"
to="/settings/developers/api-keys"
Icon={IconRobot}
active={
!!useMatch({
path: useResolvedPath('/settings/developers/api-keys').pathname,
end: true,
})
}
/>
<NavigationDrawerSection>
<NavigationDrawerSectionTitle label="Workspace" />
<NavigationDrawerItem
label="General"
to="/settings/workspace"
Icon={IconSettings}
active={
!!useMatch({
path: useResolvedPath('/settings/workspace').pathname,
end: true,
})
}
/>
<NavigationDrawerItem
label="Members"
to="/settings/workspace-members"
Icon={IconUsers}
active={
!!useMatch({
path: useResolvedPath('/settings/workspace-members').pathname,
end: true,
})
}
/>
<NavigationDrawerItem
label="Data model"
to="/settings/objects"
Icon={IconHierarchy2}
active={
!!useMatch({
path: useResolvedPath('/settings/objects').pathname,
end: false,
})
}
/>
<NavigationDrawerItem
label="Developers"
to="/settings/developers/api-keys"
Icon={IconRobot}
active={
!!useMatch({
path: useResolvedPath('/settings/developers/api-keys').pathname,
end: true,
})
}
/>
</NavigationDrawerSection>
<NavigationDrawerSectionTitle label="Other" />
<NavigationDrawerItem
label="Logout"
onClick={handleLogout}
Icon={IconLogout}
/>
<NavigationDrawerSection>
<NavigationDrawerSectionTitle label="Other" />
<NavigationDrawerItem
label="Logout"
onClick={handleLogout}
Icon={IconLogout}
/>
</NavigationDrawerSection>
</>
);
};