IlyaSobolev/DocSpace-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Client:Profile:AuthorizedApps: refactoring

Browse Source
This commit is contained in:
Timofey Boyko 2024-05-30 15:39:07 +03:00
parent 680437524f
commit 58c6248d1f
12 changed files with 160 additions and 177 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
packages/client/src/pages/Profile/Section/Body/sub-components/authorized-apps/styled-authorized-apps.ts → packages/client/src/pages/Profile/Section/Body/sub-components/authorized-apps/AuthorizedApps.styled.ts
View File

33
packages/client/src/pages/Profile/Section/Body/sub-components/authorized-apps/AuthorizedApps.types.ts Normal file
View File

@ -0,0 +1,33 @@
import { IClientProps } from "@docspace/shared/utils/oauth/interfaces";
import { DeviceUnionType } from "SRC_DIR/Hooks/useViewEffect";
import { ViewAsType } from "SRC_DIR/store/OAuthStore";
export interface AuthorizedAppsProps {
consents?: IClientProps[];
fetchConsents?: () => Promise<void>;
viewAs: ViewAsType;
setViewAs: (value: string) => void;
currentDeviceType: DeviceUnionType;
infoDialogVisible: boolean;
fetchScopes?: () => Promise<void>;
revokeDialogVisible: boolean;
setRevokeDialogVisible: (value: boolean) => void;
selection: string[];
bufferSelection: IClientProps;
revokeClient: (value: string[]) => Promise<void>;
}
export interface RevokeDialogProps {
visible: boolean;
onClose: () => void;
selection: string[];
bufferSelection: IClientProps;
onRevoke: (value: string[]) => Promise<void>;
currentDeviceType: DeviceUnionType;
}

55
packages/client/src/pages/Profile/Section/Body/sub-components/authorized-apps/index.tsx
View File

@ -2,49 +2,22 @@ import React from "react";
import { inject, observer } from "mobx-react";
import { useTranslation } from "react-i18next";
import { IClientProps } from "@docspace/shared/utils/oauth/interfaces";
//@ts-ignore
import { DeviceUnionType } from "SRC_DIR/Hooks/useViewEffect";
//@ts-ignore
import useViewEffect from "SRC_DIR/Hooks/useViewEffect";
import { Consumer } from "@docspace/shared/utils/context";
import { Text } from "@docspace/shared/components/text";
import { SettingsStore } from "@docspace/shared/store/SettingsStore";
//@ts-ignore
import useViewEffect from "SRC_DIR/Hooks/useViewEffect";
import OAuthStore from "SRC_DIR/store/OAuthStore";
//@ts-ignore
import { ViewAsType } from "SRC_DIR/store/OAuthStore";
//@ts-ignore
import InfoDialog from "SRC_DIR/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/InfoDialog";
import { StyledContainer } from "./styled-authorized-apps";
import { StyledContainer } from "./AuthorizedApps.styled";
import { AuthorizedAppsProps } from "./AuthorizedApps.types";
import TableView from "./sub-components/TableView";
import RowView from "./sub-components/RowView";
import RevokeDialog from "./sub-components/RevokeDialog";
import EmptyScreen from "./sub-components/EmptyScreen";
interface AuthorizedAppsProps {
consents?: IClientProps[];
fetchConsents?: () => Promise<void>;
viewAs: ViewAsType;
setViewAs: (value: ViewAsType) => void;
currentDeviceType: DeviceUnionType;
infoDialogVisible: boolean;
fetchScopes?: () => Promise<void>;
revokeDialogVisible: boolean;
setRevokeDialogVisible: (value: boolean) => void;
selection: string[];
bufferSelection: IClientProps;
revokeClient: (value: string[]) => Promise<void>;
}
const AuthorizedApps = ({
consents,
fetchConsents,
@ -64,13 +37,13 @@ const AuthorizedApps = ({
const getConsentList = React.useCallback(async () => {
fetchScopes?.();
await fetchConsents?.();
}, []);
}, [fetchConsents, fetchScopes]);
React.useEffect(() => {
if (!!consents?.length) return;
if (consents?.length) return;
getConsentList();
}, []);
}, [consents?.length, getConsentList]);
useViewEffect({
view: viewAs,
@ -82,14 +55,13 @@ const AuthorizedApps = ({
<StyledContainer>
{consents && consents?.length > 0 ? (
<>
<Text fontSize={"12px"} fontWeight={"400"} lineHeight={"16px"}>
<Text fontSize="12px" fontWeight="400" lineHeight="16px">
{t("ProfileDescription")}
</Text>
<Consumer>
{(context) => (
<>
{viewAs === "table" ? (
{(context) =>
viewAs === "table" ? (
<TableView
items={consents || []}
sectionWidth={context.sectionWidth || 0}
@ -99,9 +71,8 @@ const AuthorizedApps = ({
items={consents || []}
sectionWidth={context.sectionWidth || 0}
/>
)}
</>
)}
)
}
</Consumer>
</>
) : (
@ -163,5 +134,5 @@ export default inject(
bufferSelection,
revokeClient,
};
}
},
)(observer(AuthorizedApps));

17
packages/client/src/pages/Profile/Section/Body/sub-components/authorized-apps/sub-components/RevokeDialog.tsx
View File

@ -8,19 +8,7 @@ import {
import { Text } from "@docspace/shared/components/text";
import { Button, ButtonSize } from "@docspace/shared/components/button";
// @ts-ignore
import { DeviceUnionType } from "SRC_DIR/Hooks/useViewEffect";
import { IClientProps } from "@docspace/shared/utils/oauth/interfaces";
interface RevokeDialogProps {
visible: boolean;
onClose: () => void;
selection: string[];
bufferSelection: IClientProps;
onRevoke: (value: string[]) => Promise<void>;
currentDeviceType: DeviceUnionType;
}
import { RevokeDialogProps } from "../AuthorizedApps.types";
const RevokeDialog = ({
visible,
@ -57,7 +45,10 @@ const RevokeDialog = ({
);
const onRevokeAction = async () => {
if (isRequestRunning) return;
setIsRequestRunning(true);
if (isGroup) {
await onRevoke(selection);
} else {

12
packages/client/src/pages/Profile/Section/Body/sub-components/authorized-apps/sub-components/RowView/Row.tsx
View File

@ -1,4 +1,3 @@
import { useNavigate } from "react-router-dom";
import { useTranslation } from "react-i18next";
import { Row } from "@docspace/shared/components/row";
@ -10,30 +9,28 @@ export const OAuthRow = (props: RowProps) => {
const {
item,
sectionWidth,
changeClientStatus,
isChecked,
inProgress,
getContextMenuItems,
setSelection,
} = props;
const navigate = useNavigate();
const { t } = useTranslation(["OAuth", "Common", "Files"]);
const contextOptions = getContextMenuItems?.(t, item, false, false) || [];
const element = (
<img style={{ borderRadius: "3px" }} src={item.logo} alt={"App logo"} />
<img style={{ borderRadius: "3px" }} src={item.logo} alt="App logo" />
);
return (
<>
<Row
key={item.clientId}
// data={item}
contextOptions={contextOptions}
element={element}
mode={"modern"}
mode="modern"
checked={isChecked}
inProgress={inProgress}
onSelect={() => setSelection && setSelection(item.clientId)}
@ -47,8 +44,5 @@ export const OAuthRow = (props: RowProps) => {
setSelection={setSelection}
/>
</Row>
</>
);
};
export default OAuthRow;

2
packages/client/src/pages/Profile/Section/Body/sub-components/authorized-apps/sub-components/RowView/RowContent.tsx
View File

@ -36,7 +36,7 @@ export const RowContent = ({ sectionWidth, item }: RowContentProps) => {
</Link>
</Text>
</ContentWrapper>
<></>
{null}
</StyledRowContent>
);
};

4
packages/client/src/pages/Profile/Section/Body/sub-components/authorized-apps/sub-components/RowView/RowView.types.ts
View File

@ -12,7 +12,7 @@ export interface RowViewProps {
t: TTranslation,
item: IClientProps,
isInfo: boolean,
isSettings: boolean
isSettings: boolean,
) => ContextMenuModel[];
activeClients?: string[];
hasNextPage?: boolean;
@ -30,7 +30,7 @@ export interface RowProps {
t: TTranslation,
item: IClientProps,
isInfo: boolean,
isSettings: boolean
isSettings: boolean,
) => ContextMenuModel[];
setSelection?: (clientId: string) => void;
changeClientStatus?: (clientId: string, status: boolean) => Promise<void>;

12
packages/client/src/pages/Profile/Section/Body/sub-components/authorized-apps/sub-components/RowView/index.tsx
View File

@ -1,11 +1,9 @@
import React from "react";
import { inject, observer } from "mobx-react";
import { isMobile } from "react-device-detect";
//@ts-ignore
import { OAuthStoreProps } from "SRC_DIR/store/OAuthStore";
import OAuthRow from "./Row";
import { OAuthRow } from "./Row";
import { RowViewProps } from "./RowView.types";
import { StyledRowContainer } from "./RowView.styled";
@ -30,7 +28,7 @@ const RowView = (props: RowViewProps) => {
async ({ startIndex }: { startIndex: number; stopIndex: number }) => {
await fetchNextClients?.(startIndex);
},
[]
[fetchNextClients],
);
return (
@ -59,8 +57,7 @@ const RowView = (props: RowViewProps) => {
);
};
export default inject(
({ oauthStore }: { auth: any; oauthStore: OAuthStoreProps }) => {
export default inject(({ oauthStore }: { oauthStore: OAuthStoreProps }) => {
const {
viewAs,
setViewAs,
@ -86,5 +83,4 @@ export default inject(
itemCount,
fetchNextClients,
};
}
)(observer(RowView));
})(observer(RowView));

4
packages/client/src/pages/Profile/Section/Body/sub-components/authorized-apps/sub-components/TableView/Row.tsx
View File

@ -35,13 +35,12 @@ const Row = (props: RowProps) => {
getContextMenuItems ? getContextMenuItems(t, item, false, false) : [];
return (
<>
<StyledRowWrapper className="handle">
<StyledTableRow
contextOptions={contextOptions}
getContextModel={getContextMenuModel}
>
<TableCell className={"table-container_file-name-cell"}>
<TableCell className="table-container_file-name-cell">
<NameCell
name={item.name}
icon={item.logo}
@ -81,7 +80,6 @@ const Row = (props: RowProps) => {
</TableCell>
</StyledTableRow>
</StyledRowWrapper>
</>
);
};

4
packages/client/src/pages/Profile/Section/Body/sub-components/authorized-apps/sub-components/TableView/TableView.types.ts
View File

@ -13,7 +13,7 @@ export interface TableViewProps {
t: TTranslation,
item: IClientProps,
isInfo: boolean,
isSettings: boolean
isSettings: boolean,
) => ContextMenuModel[];
bufferSelection?: IClientProps | null;
activeClients?: string[];
@ -38,7 +38,7 @@ export interface RowProps {
t: TTranslation,
item: IClientProps,
isInfo: boolean,
isSettings: boolean
isSettings: boolean,
) => ContextMenuModel[];
setSelection?: (clientId: string) => void;
changeClientStatus?: (clientId: string, status: boolean) => Promise<void>;

4
packages/client/src/pages/Profile/Section/Body/sub-components/authorized-apps/sub-components/TableView/columns/name.tsx
View File

@ -41,7 +41,7 @@ const NameCell = ({
setSelection,
}: NameCellProps) => {
const onChange = () => {
setSelection && setSelection(clientId);
setSelection?.(clientId);
};
return (
@ -56,7 +56,7 @@ const NameCell = ({
<TableCell className="table-container_element-wrapper">
<StyledContainer className="table-container_element-container">
<div className="table-container_element">
{icon && <StyledImage src={icon} alt={"App icon"} />}
{icon && <StyledImage src={icon} alt="App icon" />}
</div>
<Checkbox
className="table-container_row-checkbox"

8
packages/client/src/pages/Profile/Section/Body/sub-components/authorized-apps/sub-components/TableView/index.tsx
View File

@ -2,7 +2,8 @@ import React from "react";
import { inject, observer } from "mobx-react";
import { TableBody } from "@docspace/shared/components/table";
//@ts-ignore
import { UserStore } from "@docspace/shared/store/UserStore";
import { OAuthStoreProps } from "SRC_DIR/store/OAuthStore";
import Row from "./Row";
@ -10,7 +11,6 @@ import Header from "./Header";
import { TableViewProps } from "./TableView.types";
import { TableWrapper } from "./TableView.styled";
import { UserStore } from "@docspace/shared/store/UserStore";
const TABLE_VERSION = "1";
const COLUMNS_SIZE = `consentColumnsSize_ver-${TABLE_VERSION}`;
@ -41,7 +41,7 @@ const TableView = ({
return;
}
setSelection && setSelection("");
setSelection?.("");
},
[setSelection],
);
@ -60,7 +60,7 @@ const TableView = ({
async ({ startIndex }: { startIndex: number; stopIndex: number }) => {
await fetchNextClients?.(startIndex);
},
[],
[fetchNextClients],
);
return (