coop-cloud-chaos-patchs/outline
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

chore: Missing translation hooks in settings sidebar

Browse Source
This commit is contained in:
Tom Moor
2021-01-20 23:13:51 -08:00
parent 24ecaa8ce4
commit 836b2e310a
2 changed files with 121 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

236
app/components/Sidebar/Settings.js
View File

@ -1,5 +1,5 @@
// @flow // @flow
import { observer, inject } from "mobx-react"; import { observer } from "mobx-react";
import { import {
DocumentIcon, DocumentIcon,
EmailIcon, EmailIcon,
@ -13,11 +13,9 @@ import {
ExpandedIcon, ExpandedIcon,
} from "outline-icons"; } from "outline-icons";
import * as React from "react"; import * as React from "react";
import { withTranslation, type TFunction } from "react-i18next"; import { useTranslation } from "react-i18next";
import type { RouterHistory } from "react-router-dom"; import { useHistory } from "react-router-dom";
import styled from "styled-components"; import styled from "styled-components";
import AuthStore from "stores/AuthStore";
import PoliciesStore from "stores/PoliciesStore";
import Flex from "components/Flex"; import Flex from "components/Flex";
import Scrollable from "components/Scrollable"; import Scrollable from "components/Scrollable";
@ -30,131 +28,123 @@ import Version from "./components/Version";
import SlackIcon from "./icons/Slack"; import SlackIcon from "./icons/Slack";
import ZapierIcon from "./icons/Zapier"; import ZapierIcon from "./icons/Zapier";
import env from "env"; import env from "env";
import useCurrentTeam from "hooks/useCurrentTeam";
import useStores from "hooks/useStores";
const isHosted = env.DEPLOYMENT === "hosted"; const isHosted = env.DEPLOYMENT === "hosted";
type Props = { function SettingsSidebar() {
history: RouterHistory, const { t } = useTranslation();
policies: PoliciesStore, const history = useHistory();
auth: AuthStore, const team = useCurrentTeam();
t: TFunction, const { policies } = useStores();
}; const can = policies.abilities(team.id);
@observer const returnToDashboard = React.useCallback(() => {
class SettingsSidebar extends React.Component<Props> { history.push("/home");
returnToDashboard = () => { }, [history]);
this.props.history.push("/home");
};
render() { return (
const { policies, t, auth } = this.props; <Sidebar>
const { team } = auth; <HeaderBlock
if (!team) return null; subheading={
<ReturnToApp align="center">
<BackIcon color="currentColor" /> {t("Return to App")}
</ReturnToApp>
}
teamName={team.name}
logoUrl={team.avatarUrl}
onClick={returnToDashboard}
/>
const can = policies.abilities(team.id); <Flex auto column>
<Scrollable shadow>
return ( <Section>
<Sidebar> <Header>{t("Account")}</Header>
<HeaderBlock <SidebarLink
subheading={ to="/settings"
<ReturnToApp align="center"> icon={<ProfileIcon color="currentColor" />}
<BackIcon color="currentColor" /> {t("Return to App")} label={t("Profile")}
</ReturnToApp> />
} <SidebarLink
teamName={team.name} to="/settings/notifications"
logoUrl={team.avatarUrl} icon={<EmailIcon color="currentColor" />}
onClick={this.returnToDashboard} label={t("Notifications")}
/> />
<SidebarLink
<Flex auto column> to="/settings/tokens"
<Scrollable shadow> icon={<CodeIcon color="currentColor" />}
<Section> label={t("API Tokens")}
<Header>Account</Header> />
<SidebarLink </Section>
to="/settings" <Section>
icon={<ProfileIcon color="currentColor" />} <Header>{t("Team")}</Header>
label={t("Profile")}
/>
<SidebarLink
to="/settings/notifications"
icon={<EmailIcon color="currentColor" />}
label={t("Notifications")}
/>
<SidebarLink
to="/settings/tokens"
icon={<CodeIcon color="currentColor" />}
label={t("API Tokens")}
/>
</Section>
<Section>
<Header>Team</Header>
{can.update && (
<SidebarLink
to="/settings/details"
icon={<TeamIcon color="currentColor" />}
label={t("Details")}
/>
)}
{can.update && (
<SidebarLink
to="/settings/security"
icon={<PadlockIcon color="currentColor" />}
label={t("Security")}
/>
)}
<SidebarLink
to="/settings/people"
icon={<UserIcon color="currentColor" />}
exact={false}
label={t("People")}
/>
<SidebarLink
to="/settings/groups"
icon={<GroupIcon color="currentColor" />}
exact={false}
label={t("Groups")}
/>
<SidebarLink
to="/settings/shares"
icon={<LinkIcon color="currentColor" />}
label={t("Share Links")}
/>
{can.export && (
<SidebarLink
to="/settings/export"
icon={<DocumentIcon color="currentColor" />}
label={t("Export Data")}
/>
)}
</Section>
{can.update && ( {can.update && (
<Section> <SidebarLink
<Header>{t("Integrations")}</Header> to="/settings/details"
icon={<TeamIcon color="currentColor" />}
label={t("Details")}
/>
)}
{can.update && (
<SidebarLink
to="/settings/security"
icon={<PadlockIcon color="currentColor" />}
label={t("Security")}
/>
)}
<SidebarLink
to="/settings/people"
icon={<UserIcon color="currentColor" />}
exact={false}
label={t("People")}
/>
<SidebarLink
to="/settings/groups"
icon={<GroupIcon color="currentColor" />}
exact={false}
label={t("Groups")}
/>
<SidebarLink
to="/settings/shares"
icon={<LinkIcon color="currentColor" />}
label={t("Share Links")}
/>
{can.export && (
<SidebarLink
to="/settings/export"
icon={<DocumentIcon color="currentColor" />}
label={t("Export Data")}
/>
)}
</Section>
{can.update && (
<Section>
<Header>{t("Integrations")}</Header>
<SidebarLink
to="/settings/integrations/slack"
icon={<SlackIcon color="currentColor" />}
label="Slack"
/>
{isHosted && (
<SidebarLink <SidebarLink
to="/settings/integrations/slack" to="/settings/integrations/zapier"
icon={<SlackIcon color="currentColor" />} icon={<ZapierIcon color="currentColor" />}
label="Slack" label="Zapier"
/> />
{isHosted && ( )}
<SidebarLink </Section>
to="/settings/integrations/zapier" )}
icon={<ZapierIcon color="currentColor" />} {can.update && !isHosted && (
label="Zapier" <Section>
/> <Header>{t("Installation")}</Header>
)} <Version />
</Section> </Section>
)} )}
{can.update && !isHosted && ( </Scrollable>
<Section> </Flex>
<Header>{t("Installation")}</Header> </Sidebar>
<Version /> );
</Section>
)}
</Scrollable>
</Flex>
</Sidebar>
);
}
} }
const BackIcon = styled(ExpandedIcon)` const BackIcon = styled(ExpandedIcon)`
@ -166,6 +156,4 @@ const ReturnToApp = styled(Flex)`
height: 16px; height: 16px;
`; `;
export default withTranslation()<SettingsSidebar>( export default observer(SettingsSidebar);
inject("auth", "policies")(SettingsSidebar)
);

9
app/hooks/useCurrentTeam.js Normal file
View File

@ -0,0 +1,9 @@
// @flow
import invariant from "invariant";
import useStores from "./useStores";
export default function useCurrentTeam() {
const { auth } = useStores();
invariant(auth.team, "team required");
return auth.team;
}