yuuza/outline
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

chore: Move to Typescript (#2783)

Browse Source 
This PR moves the entire project to Typescript. Due to the ~1000 ignores this will lead to a messy codebase for a while, but the churn is worth it – all of those ignore comments are places that were never type-safe previously.

closes #1282
This commit is contained in:
Tom Moor
2021-11-29 06:40:55 -08:00
committed by GitHub
parent 25ccfb5d04
commit 15b1069bcc
1017 changed files with 17410 additions and 54942 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
app/scenes/CollectionPermissions/AddGroupsToCollection.js → app/scenes/CollectionPermissions/AddGroupsToCollection.tsx
View File

@@ -1,41 +1,37 @@
// @flow
import { debounce } from "lodash";
import { observable } from "mobx";
import { inject, observer } from "mobx-react";
import { observer } from "mobx-react";
import * as React from "react";
import { withTranslation, type TFunction } from "react-i18next";
import { withTranslation, WithTranslation } from "react-i18next";
import styled from "styled-components";
import AuthStore from "stores/AuthStore";
import CollectionGroupMembershipsStore from "stores/CollectionGroupMembershipsStore";
import GroupsStore from "stores/GroupsStore";
import ToastsStore from "stores/ToastsStore";
import Collection from "models/Collection";
import Group from "models/Group";
import GroupNew from "scenes/GroupNew";
import Button from "components/Button";
import ButtonLink from "components/ButtonLink";
import Empty from "components/Empty";
import Flex from "components/Flex";
import GroupListItem from "components/GroupListItem";
import HelpText from "components/HelpText";
import Input from "components/Input";
import Modal from "components/Modal";
import PaginatedList from "components/PaginatedList";
import RootStore from "~/stores/RootStore";
import Collection from "~/models/Collection";
import Group from "~/models/Group";
import GroupNew from "~/scenes/GroupNew";
import Button from "~/components/Button";
import ButtonLink from "~/components/ButtonLink";
import Empty from "~/components/Empty";
import Flex from "~/components/Flex";
import GroupListItem from "~/components/GroupListItem";
import HelpText from "~/components/HelpText";
import Input from "~/components/Input";
import Modal from "~/components/Modal";
import PaginatedList from "~/components/PaginatedList";
import withStores from "~/components/withStores";
type Props = {
toasts: ToastsStore,
auth: AuthStore,
collection: Collection,
collectionGroupMemberships: CollectionGroupMembershipsStore,
groups: GroupsStore,
onSubmit: () => void,
t: TFunction,
};
type Props = WithTranslation &
RootStore & {
collection: Collection;
onSubmit: () => void;
};
@observer
class AddGroupsToCollection extends React.Component<Props> {
@observable newGroupModalOpen: boolean = false;
@observable query: string = "";
@observable
newGroupModalOpen = false;
@observable
query = "";
handleNewGroupModalOpen = () => {
this.newGroupModalOpen = true;
@@ -45,7 +41,7 @@ class AddGroupsToCollection extends React.Component<Props> {
this.newGroupModalOpen = false;
};
handleFilter = (ev: SyntheticInputEvent<>) => {
handleFilter = (ev: React.ChangeEvent<HTMLInputElement>) => {
this.query = ev.target.value;
this.debouncedFetch();
};
@@ -69,10 +65,14 @@ class AddGroupsToCollection extends React.Component<Props> {
t("{{ groupName }} was added to the collection", {
groupName: group.name,
}),
{ type: "success" }
{
type: "success",
}
);
} catch (err) {
this.props.toasts.showToast(t("Could not add user"), { type: "error" });
this.props.toasts.showToast(t("Could not add user"), {
type: "error",
});
console.error(err);
}
};
@@ -81,7 +81,6 @@ class AddGroupsToCollection extends React.Component<Props> {
const { groups, collection, auth, t } = this.props;
const { user, team } = auth;
if (!user || !team) return null;
return (
<Flex column>
<HelpText>
@@ -142,11 +141,4 @@ const ButtonWrap = styled.div`
margin-left: 6px;
`;
export default withTranslation()<AddGroupsToCollection>(
inject(
"auth",
"groups",
"collectionGroupMemberships",
"toasts"
)(AddGroupsToCollection)
);
export default withTranslation()(withStores(AddGroupsToCollection));

71
app/scenes/CollectionPermissions/AddPeopleToCollection.js → app/scenes/CollectionPermissions/AddPeopleToCollection.tsx
View File

@@ -1,39 +1,35 @@
// @flow
import { debounce } from "lodash";
import { observable } from "mobx";
import { inject, observer } from "mobx-react";
import { observer } from "mobx-react";
import * as React from "react";
import { withTranslation, type TFunction } from "react-i18next";
import AuthStore from "stores/AuthStore";
import MembershipsStore from "stores/MembershipsStore";
import ToastsStore from "stores/ToastsStore";
import UsersStore from "stores/UsersStore";
import Collection from "models/Collection";
import User from "models/User";
import Invite from "scenes/Invite";
import ButtonLink from "components/ButtonLink";
import Empty from "components/Empty";
import Flex from "components/Flex";
import HelpText from "components/HelpText";
import Input from "components/Input";
import Modal from "components/Modal";
import PaginatedList from "components/PaginatedList";
import { WithTranslation, withTranslation } from "react-i18next";
import RootStore from "~/stores/RootStore";
import Collection from "~/models/Collection";
import User from "~/models/User";
import Invite from "~/scenes/Invite";
import ButtonLink from "~/components/ButtonLink";
import Empty from "~/components/Empty";
import Flex from "~/components/Flex";
import HelpText from "~/components/HelpText";
import Input from "~/components/Input";
import Modal from "~/components/Modal";
import PaginatedList from "~/components/PaginatedList";
import withStores from "~/components/withStores";
import MemberListItem from "./components/MemberListItem";
type Props = {
toasts: ToastsStore,
auth: AuthStore,
collection: Collection,
memberships: MembershipsStore,
users: UsersStore,
onSubmit: () => void,
t: TFunction,
};
type Props = WithTranslation &
RootStore & {
collection: Collection;
onSubmit: () => void;
};
@observer
class AddPeopleToCollection extends React.Component<Props> {
@observable inviteModalOpen: boolean = false;
@observable query: string = "";
@observable
inviteModalOpen = false;
@observable
query = "";
handleInviteModalOpen = () => {
this.inviteModalOpen = true;
@@ -43,7 +39,7 @@ class AddPeopleToCollection extends React.Component<Props> {
this.inviteModalOpen = false;
};
handleFilter = (ev: SyntheticInputEvent<>) => {
handleFilter = (ev: React.ChangeEvent<HTMLInputElement>) => {
this.query = ev.target.value;
this.debouncedFetch();
};
@@ -56,6 +52,7 @@ class AddPeopleToCollection extends React.Component<Props> {
handleAddUser = (user: User) => {
const { t } = this.props;
try {
this.props.memberships.create({
collectionId: this.props.collection.id,
@@ -66,10 +63,14 @@ class AddPeopleToCollection extends React.Component<Props> {
t("{{ userName }} was added to the collection", {
userName: user.name,
}),
{ type: "success" }
{
type: "success",
}
);
} catch (err) {
this.props.toasts.showToast(t("Could not add user"), { type: "error" });
this.props.toasts.showToast(t("Could not add user"), {
type: "error",
});
}
};
@@ -83,7 +84,9 @@ class AddPeopleToCollection extends React.Component<Props> {
<HelpText>
{t("Need to add someone who’s not yet on the team yet?")}{" "}
<ButtonLink onClick={this.handleInviteModalOpen}>
{t("Invite people to {{ teamName }}", { teamName: team.name })}
{t("Invite people to {{ teamName }}", {
teamName: team.name,
})}
</ButtonLink>
.
</HelpText>
@@ -129,6 +132,4 @@ class AddPeopleToCollection extends React.Component<Props> {
}
}
export default withTranslation()<AddPeopleToCollection>(
inject("auth", "users", "memberships", "toasts")(AddPeopleToCollection)
);
export default withTranslation()(withStores(AddPeopleToCollection));

40
app/scenes/CollectionPermissions/components/CollectionGroupMemberListItem.js → app/scenes/CollectionPermissions/components/CollectionGroupMemberListItem.tsx
View File

@@ -1,19 +1,18 @@
// @flow
import * as React from "react";
import { useTranslation } from "react-i18next";
import styled from "styled-components";
import CollectionGroupMembership from "models/CollectionGroupMembership";
import Group from "models/Group";
import GroupListItem from "components/GroupListItem";
import InputSelect, { type Props as SelectProps } from "components/InputSelect";
import CollectionGroupMemberMenu from "menus/CollectionGroupMemberMenu";
import CollectionGroupMembership from "~/models/CollectionGroupMembership";
import Group from "~/models/Group";
import GroupListItem from "~/components/GroupListItem";
import InputSelect, { Props as SelectProps } from "~/components/InputSelect";
import CollectionGroupMemberMenu from "~/menus/CollectionGroupMemberMenu";
type Props = {|
group: Group,
collectionGroupMembership: ?CollectionGroupMembership,
onUpdate: (permission: string) => any,
onRemove: () => any,
|};
type Props = {
group: Group;
collectionGroupMembership: CollectionGroupMembership | null | undefined;
onUpdate: (permission: string) => void;
onRemove: () => void;
};
const CollectionGroupMemberListItem = ({
group,
@@ -22,11 +21,16 @@ const CollectionGroupMemberListItem = ({
onRemove,
}: Props) => {
const { t } = useTranslation();
const PERMISSIONS = React.useMemo(
() => [
{ label: t("View only"), value: "read" },
{ label: t("View and edit"), value: "read_write" },
{
label: t("View only"),
value: "read",
},
{
label: t("View and edit"),
value: "read_write",
},
],
[t]
);
@@ -34,8 +38,6 @@ const CollectionGroupMemberListItem = ({
return (
<GroupListItem
group={group}
onRemove={onRemove}
onUpdate={onUpdate}
showAvatar
renderActions={({ openMembersModal }) => (
<>
@@ -67,7 +69,7 @@ const Spacer = styled.div`
width: 8px;
`;
const Select = (styled(InputSelect)`
const Select = styled(InputSelect)`
margin: 0;
font-size: 14px;
border-color: transparent;
@@ -75,6 +77,6 @@ const Select = (styled(InputSelect)`
select {
margin: 0;
}
`: React.ComponentType<SelectProps>);
` as React.ComponentType<SelectProps>;
export default CollectionGroupMemberListItem;

48
app/scenes/CollectionPermissions/components/MemberListItem.js → app/scenes/CollectionPermissions/components/MemberListItem.tsx
View File

@@ -1,25 +1,24 @@
// @flow
import * as React from "react";
import { Trans, useTranslation } from "react-i18next";
import styled from "styled-components";
import Membership from "models/Membership";
import User from "models/User";
import Avatar from "components/Avatar";
import Badge from "components/Badge";
import Button from "components/Button";
import Flex from "components/Flex";
import InputSelect, { type Props as SelectProps } from "components/InputSelect";
import ListItem from "components/List/Item";
import Time from "components/Time";
import MemberMenu from "menus/MemberMenu";
import Membership from "~/models/Membership";
import User from "~/models/User";
import Avatar from "~/components/Avatar";
import Badge from "~/components/Badge";
import Button from "~/components/Button";
import Flex from "~/components/Flex";
import InputSelect, { Props as SelectProps } from "~/components/InputSelect";
import ListItem from "~/components/List/Item";
import Time from "~/components/Time";
import MemberMenu from "~/menus/MemberMenu";
type Props = {
user: User,
membership?: ?Membership,
canEdit: boolean,
onAdd?: () => any,
onRemove?: () => any,
onUpdate?: (permission: string) => any,
user: User;
membership?: Membership | null | undefined;
canEdit: boolean;
onAdd?: () => any;
onRemove?: () => any;
onUpdate?: (permission: string) => any;
};
const MemberListItem = ({
@@ -31,11 +30,16 @@ const MemberListItem = ({
canEdit,
}: Props) => {
const { t } = useTranslation();
const PERMISSIONS = React.useMemo(
() => [
{ label: t("View only"), value: "read" },
{ label: t("View and edit"), value: "read_write" },
{
label: t("View only"),
value: "read",
},
{
label: t("View and edit"),
value: "read_write",
},
],
[t]
);
@@ -92,7 +96,7 @@ const Spacer = styled.div`
width: 8px;
`;
const Select = (styled(InputSelect)`
const Select = styled(InputSelect)`
margin: 0;
font-size: 14px;
border-color: transparent;
@@ -100,6 +104,6 @@ const Select = (styled(InputSelect)`
select {
margin: 0;
}
`: React.ComponentType<SelectProps>);
` as React.ComponentType<SelectProps>;
export default MemberListItem;

19
app/scenes/CollectionPermissions/components/UserListItem.js → app/scenes/CollectionPermissions/components/UserListItem.tsx
View File

@@ -1,18 +1,17 @@
// @flow
import { PlusIcon } from "outline-icons";
import * as React from "react";
import { Trans, useTranslation } from "react-i18next";
import User from "models/User";
import Avatar from "components/Avatar";
import Badge from "components/Badge";
import Button from "components/Button";
import ListItem from "components/List/Item";
import Time from "components/Time";
import User from "~/models/User";
import Avatar from "~/components/Avatar";
import Badge from "~/components/Badge";
import Button from "~/components/Button";
import ListItem from "~/components/List/Item";
import Time from "~/components/Time";
type Props = {
user: User,
canEdit: boolean,
onAdd: () => any,
user: User;
canEdit: boolean;
onAdd: () => any;
};
const UserListItem = ({ user, onAdd, canEdit }: Props) => {

105
app/scenes/CollectionPermissions/index.js → app/scenes/CollectionPermissions/index.tsx
View File

@@ -1,31 +1,30 @@
// @flow
import { observer } from "mobx-react";
import { PlusIcon } from "outline-icons";
import * as React from "react";
import { useTranslation, Trans } from "react-i18next";
import styled from "styled-components";
import Collection from "models/Collection";
import Button from "components/Button";
import Divider from "components/Divider";
import Flex from "components/Flex";
import HelpText from "components/HelpText";
import InputSelectPermission from "components/InputSelectPermission";
import Labeled from "components/Labeled";
import Modal from "components/Modal";
import PaginatedList from "components/PaginatedList";
import Switch from "components/Switch";
import Collection from "~/models/Collection";
import Button from "~/components/Button";
import Divider from "~/components/Divider";
import Flex from "~/components/Flex";
import HelpText from "~/components/HelpText";
import InputSelectPermission from "~/components/InputSelectPermission";
import Labeled from "~/components/Labeled";
import Modal from "~/components/Modal";
import PaginatedList from "~/components/PaginatedList";
import Switch from "~/components/Switch";
import useBoolean from "~/hooks/useBoolean";
import useCurrentUser from "~/hooks/useCurrentUser";
import useStores from "~/hooks/useStores";
import useToasts from "~/hooks/useToasts";
import AddGroupsToCollection from "./AddGroupsToCollection";
import AddPeopleToCollection from "./AddPeopleToCollection";
import CollectionGroupMemberListItem from "./components/CollectionGroupMemberListItem";
import MemberListItem from "./components/MemberListItem";
import useBoolean from "hooks/useBoolean";
import useCurrentUser from "hooks/useCurrentUser";
import useStores from "hooks/useStores";
import useToasts from "hooks/useToasts";
type Props = {|
collection: Collection,
|};
type Props = {
collection: Collection;
};
function CollectionPermissions({ collection }: Props) {
const { t } = useTranslation();
@@ -38,11 +37,13 @@ function CollectionPermissions({ collection }: Props) {
auth,
} = useStores();
const { showToast } = useToasts();
const [
addGroupModalOpen,
handleAddGroupModalOpen,
handleAddGroupModalClose,
] = useBoolean();
const [
addMemberModalOpen,
handleAddMemberModalOpen,
@@ -65,7 +66,9 @@ function CollectionPermissions({ collection }: Props) {
}
);
} catch (err) {
showToast(t("Could not remove user"), { type: "error" });
showToast(t("Could not remove user"), {
type: "error",
});
}
},
[memberships, showToast, collection, t]
@@ -80,13 +83,17 @@ function CollectionPermissions({ collection }: Props) {
permission,
});
showToast(
t(`{{ userName }} permissions were updated`, { userName: user.name }),
t(`{{ userName }} permissions were updated`, {
userName: user.name,
}),
{
type: "success",
}
);
} catch (err) {
showToast(t("Could not update user"), { type: "error" });
showToast(t("Could not update user"), {
type: "error",
});
}
},
[memberships, showToast, collection, t]
@@ -108,7 +115,9 @@ function CollectionPermissions({ collection }: Props) {
}
);
} catch (err) {
showToast(t("Could not remove group"), { type: "error" });
showToast(t("Could not remove group"), {
type: "error",
});
}
},
[collectionGroupMemberships, showToast, collection, t]
@@ -131,7 +140,9 @@ function CollectionPermissions({ collection }: Props) {
}
);
} catch (err) {
showToast(t("Could not update user"), { type: "error" });
showToast(t("Could not update user"), {
type: "error",
});
}
},
[collectionGroupMemberships, showToast, collection, t]
@@ -140,25 +151,34 @@ function CollectionPermissions({ collection }: Props) {
const handleChangePermission = React.useCallback(
async (permission: string) => {
try {
await collection.save({ permission });
await collection.save({
permission,
});
showToast(t("Default access permissions were updated"), {
type: "success",
});
} catch (err) {
showToast(t("Could not update permissions"), { type: "error" });
showToast(t("Could not update permissions"), {
type: "error",
});
}
},
[collection, showToast, t]
);
const fetchOptions = React.useMemo(() => ({ id: collection.id }), [
collection.id,
]);
const fetchOptions = React.useMemo(
() => ({
id: collection.id,
}),
[collection.id]
);
const handleSharingChange = React.useCallback(
async (ev: SyntheticInputEvent<*>) => {
async (ev: React.ChangeEvent<HTMLInputElement>) => {
try {
await collection.save({ sharing: ev.target.checked });
await collection.save({
sharing: ev.target.checked,
});
showToast(t("Public document sharing permissions were updated"), {
type: "success",
});
@@ -184,28 +204,41 @@ function CollectionPermissions({ collection }: Props) {
onChange={handleChangePermission}
value={collection.permission || ""}
short
nude
/>
<PermissionExplainer>
{!collection.permission && (
<Trans
defaults="The <em>{{ collectionName }}</em> collection is private. Team members have no access to it by default."
values={{ collectionName }}
components={{ em: <strong /> }}
values={{
collectionName,
}}
components={{
em: <strong />,
}}
/>
)}
{collection.permission === "read" && (
<Trans
defaults="Team members can view documents in the <em>{{ collectionName }}</em> collection by default."
values={{ collectionName }}
components={{ em: <strong /> }}
values={{
collectionName,
}}
components={{
em: <strong />,
}}
/>
)}
{collection.permission === "read_write" && (
<Trans
defaults="Team members can view and edit documents in the <em>{{ collectionName }}</em> collection by
default."
values={{ collectionName }}
components={{ em: <strong /> }}
values={{
collectionName,
}}
components={{
em: <strong />,
}}
/>
)}
</PermissionExplainer>