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

Client:PortalSettings:OAuth: fix table and row view

Browse Source
This commit is contained in:
Timofey Boyko 2024-05-28 13:53:42 +03:00
parent 626f38f283
commit 9594256e2f
17 changed files with 187 additions and 203 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/OAuth.types.ts
View File

@ -6,7 +6,7 @@ import { ViewAsType } from "SRC_DIR/store/OAuthStore";
export interface OAuthProps {
viewAs: ViewAsType;
setViewAs: (viewAs: ViewAsType) => void;
setViewAs: (viewAs: string) => void;
clientList: IClientProps[];
isEmptyClientList: boolean;

36
packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/index.tsx
View File

@ -8,16 +8,16 @@ import useViewEffect from "SRC_DIR/Hooks/useViewEffect";
import { OAuthStoreProps } from "SRC_DIR/store/OAuthStore";
import { setDocumentTitle } from "SRC_DIR/helpers/utils";
import OAuthEmptyScreen from "./sub-components/EmptyScreen";
import List from "./sub-components/List";
import { OAuthContainer } from "./StyledOAuth";
import { OAuthProps } from "./OAuth.types";
import InfoDialog from "./sub-components/InfoDialog";
import PreviewDialog from "./sub-components/PreviewDialog";
import OAuthLoader from "./sub-components/List/Loader";
import DisableDialog from "./sub-components/DisableDialog";
import DeleteDialog from "./sub-components/DeleteDialog";
import OAuthEmptyScreen from "./sub-components/EmptyScreen";
import List from "./sub-components/List";
const MIN_LOADER_TIME = 500;
@ -65,7 +65,7 @@ const OAuth = ({
setIsLoading(false);
setIsInit(true);
}, [isInit, setIsInit]);
}, [fetchClients, fetchScopes, isInit, setIsInit]);
useViewEffect({
view: viewAs,
@ -81,24 +81,22 @@ const OAuth = ({
React.useEffect(() => {
setDocumentTitle(t("OAuth"));
}, []);
}, [t]);
return (
<OAuthContainer>
<>
{isLoading ? (
<OAuthLoader viewAs={viewAs} currentDeviceType={currentDeviceType} />
) : isEmptyClientList ? (
<OAuthEmptyScreen t={t} />
) : (
<List
t={t}
clients={clientList}
viewAs={viewAs}
currentDeviceType={currentDeviceType}
/>
)}
</>
{isLoading ? (
<OAuthLoader viewAs={viewAs} currentDeviceType={currentDeviceType} />
) : isEmptyClientList ? (
<OAuthEmptyScreen t={t} />
) : (
<List
clients={clientList}
viewAs={viewAs}
currentDeviceType={currentDeviceType}
/>
)}
{infoDialogVisible && <InfoDialog visible={infoDialogVisible} />}
{disableDialogVisible && <DisableDialog />}
{previewDialogVisible && <PreviewDialog visible={previewDialogVisible} />}

2
packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/ClientForm/ClientForm.styled.ts
View File

@ -255,7 +255,7 @@ const StyledInputAddBlock = styled.div`
left: 0px;
border-radius: 3px;
border: 1px solid #d0d5da;
border: ${(props) => props.theme.oauth.clientForm.headerBorder};
box-shadow: ${(props) => props.theme.navigation.boxShadow};

13
packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/Loader.tsx
View File

@ -1,14 +1,11 @@
import React from "react";
//@ts-ignore
import { DeviceUnionType } from "SRC_DIR/Hooks/useViewEffect";
import { RectangleSkeleton } from "@docspace/shared/skeletons/rectangle";
import { TableSkeleton } from "@docspace/shared/skeletons/table";
import { RowsSkeleton } from "@docspace/shared/skeletons/rows";
//@ts-ignore
import { ViewAsType } from "SRC_DIR/store/OAuthStore";
import { DeviceUnionType } from "SRC_DIR/Hooks/useViewEffect";
import { OAuthContainer } from "../../StyledOAuth";
import { StyledContainer } from ".";
@ -25,14 +22,10 @@ const OAuthLoader = ({
return (
<OAuthContainer>
<StyledContainer>
<RectangleSkeleton
className="description"
width={"100%"}
height={"16px"}
/>
<RectangleSkeleton className="description" width="100%" height="16px" />
<RectangleSkeleton
className="add-button"
width={"220px"}
width="220px"
height={buttonHeight}
/>
{viewAs === "table" ? (

42
packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/RowView/Row.tsx
View File

@ -53,32 +53,30 @@ export const OAuthRow = (props: RowProps) => {
const contextOptions = getContextMenuItems && getContextMenuItems(t, item);
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}
onRowClick={handleRowClick}
element={element}
mode={"modern"}
checked={isChecked}
<Row
key={item.clientId}
// data={item}
contextOptions={contextOptions}
onRowClick={handleRowClick}
element={element}
mode="modern"
checked={isChecked}
inProgress={inProgress}
onSelect={() => setSelection && setSelection(item.clientId)}
>
<RowContent
sectionWidth={sectionWidth}
item={item}
isChecked={isChecked}
inProgress={inProgress}
onSelect={() => setSelection && setSelection(item.clientId)}
>
<RowContent
sectionWidth={sectionWidth}
item={item}
isChecked={isChecked}
inProgress={inProgress}
setSelection={setSelection}
handleToggleEnabled={handleToggleEnabled}
/>
</Row>
</>
setSelection={setSelection}
handleToggleEnabled={handleToggleEnabled}
/>
</Row>
);
};

10
packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/RowView/RowContent.tsx
View File

@ -21,7 +21,6 @@ export const RowContent = ({
<StyledRowContent sectionWidth={sectionWidth}>
<ContentWrapper>
<FlexWrapper>
{/* @ts-ignore */}
<Text
fontWeight={600}
fontSize="14px"
@ -31,12 +30,9 @@ export const RowContent = ({
</Text>
</FlexWrapper>
<>
{/* @ts-ignore */}
<Text fontWeight={600} fontSize="12px" color="#A3A9AE">
{item.description}
</Text>
</>
<Text fontWeight={600} fontSize="12px" color="#A3A9AE">
{item.description}
</Text>
</ContentWrapper>
<ToggleButtonWrapper>

6
packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/RowView/RowView.types.ts
View File

@ -1,7 +1,7 @@
import { TTranslation } from "@docspace/shared/types";
import { IClientProps } from "@docspace/shared/utils/oauth/interfaces";
import { ContextMenuModel } from "@docspace/shared/components/context-menu";
//@ts-ignore
import { ViewAsType } from "SRC_DIR/store/OAuthStore";
export interface RowViewProps {
@ -13,7 +13,7 @@ export interface RowViewProps {
setSelection?: (clientId: string) => void;
getContextMenuItems?: (
t: TTranslation,
item: IClientProps
item: IClientProps,
) => ContextMenuModel[];
activeClients?: string[];
hasNextPage?: boolean;
@ -29,7 +29,7 @@ export interface RowProps {
sectionWidth: number;
getContextMenuItems?: (
t: TTranslation,
item: IClientProps
item: IClientProps,
) => ContextMenuModel[];
setSelection?: (clientId: string) => void;
changeClientStatus?: (clientId: string, status: boolean) => Promise<void>;

61
packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/RowView/index.tsx
View File

@ -1,10 +1,9 @@
import React from "react";
import { inject, observer } from "mobx-react";
//@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";
@ -13,8 +12,6 @@ const RowView = (props: RowViewProps) => {
const {
items,
sectionWidth,
viewAs,
setViewAs,
changeClientStatus,
selection,
@ -31,7 +28,7 @@ const RowView = (props: RowViewProps) => {
async ({ startIndex }: { startIndex: number; stopIndex: number }) => {
await fetchNextClients?.(startIndex);
},
[]
[fetchNextClients],
);
return (
@ -60,32 +57,30 @@ const RowView = (props: RowViewProps) => {
);
};
export default inject(
({ oauthStore }: { auth: any; oauthStore: OAuthStoreProps }) => {
const {
viewAs,
setViewAs,
selection,
setSelection,
changeClientStatus,
getContextMenuItems,
activeClients,
hasNextPage,
itemCount,
fetchNextClients,
} = oauthStore;
export default inject(({ oauthStore }: { oauthStore: OAuthStoreProps }) => {
const {
viewAs,
setViewAs,
selection,
setSelection,
changeClientStatus,
getContextMenuItems,
activeClients,
hasNextPage,
itemCount,
fetchNextClients,
} = oauthStore;
return {
viewAs,
setViewAs,
changeClientStatus,
selection,
setSelection,
activeClients,
getContextMenuItems,
hasNextPage,
itemCount,
fetchNextClients,
};
}
)(observer(RowView));
return {
viewAs,
setViewAs,
changeClientStatus,
selection,
setSelection,
activeClients,
getContextMenuItems,
hasNextPage,
itemCount,
fetchNextClients,
};
})(observer(RowView));

109
packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/TableView/Row.tsx
View File

@ -5,7 +5,6 @@ import { TableCell } from "@docspace/shared/components/table";
import { Tags } from "@docspace/shared/components/tags";
import { Text } from "@docspace/shared/components/text";
import { ToggleButton } from "@docspace/shared/components/toggle-button";
import getCorrectDate from "@docspace/shared/utils/getCorrectDate";
import { getCookie } from "@docspace/shared/utils/cookie";
@ -72,62 +71,60 @@ const Row = (props: RowProps) => {
const modifiedDate = getCorrectDate(locale || "", item.modifiedOn || "");
return (
<>
<StyledRowWrapper className="handle">
<StyledTableRow
contextOptions={contextOptions || []}
onClick={handleRowClick}
getContextModel={getContextMenuModel}
>
<TableCell className={"table-container_file-name-cell"}>
<NameCell
name={item.name}
icon={item.logo}
isChecked={isChecked}
inProgress={inProgress}
clientId={item.clientId}
setSelection={setSelection}
<StyledRowWrapper className="handle">
<StyledTableRow
contextOptions={contextOptions || []}
onClick={handleRowClick}
getContextModel={getContextMenuModel}
>
<TableCell className="table-container_file-name-cell">
<NameCell
name={item.name}
icon={item.logo}
isChecked={isChecked}
inProgress={inProgress}
clientId={item.clientId}
setSelection={setSelection}
/>
</TableCell>
<TableCell className="">
<CreatorCell
avatar={item.creatorAvatar || ""}
displayName={item.creatorDisplayName || ""}
/>
</TableCell>
<TableCell className="">
<Text
as="span"
fontWeight={400}
className="mr-8 textOverflow description-text"
>
{modifiedDate}
</Text>
</TableCell>
<TableCell className="">
<Text
as="span"
fontWeight={400}
className="mr-8 textOverflow description-text"
>
<Tags
tags={item.scopes}
removeTagIcon
columnCount={tagCount}
onSelectTag={() => {}}
/>
</TableCell>
<TableCell className="">
<CreatorCell
avatar={item.creatorAvatar || ""}
displayName={item.creatorDisplayName || ""}
/>
</TableCell>
<TableCell className="">
<Text
as="span"
fontWeight={400}
className="mr-8 textOverflow description-text"
>
{modifiedDate}
</Text>
</TableCell>
<TableCell className="">
<Text
as="span"
fontWeight={400}
className="mr-8 textOverflow description-text"
>
<Tags
tags={item.scopes}
removeTagIcon
columnCount={tagCount}
onSelectTag={() => {}}
/>
</Text>
</TableCell>
<TableCell className="">
<ToggleButton
className="toggle toggleButton"
isChecked={item.enabled}
onChange={handleToggleEnabled}
/>
</TableCell>
</StyledTableRow>
</StyledRowWrapper>
</>
</Text>
</TableCell>
<TableCell className="">
<ToggleButton
className="toggle toggleButton"
isChecked={item.enabled}
onChange={handleToggleEnabled}
/>
</TableCell>
</StyledTableRow>
</StyledRowWrapper>
);
};

4
packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/TableView/TableView.types.ts
View File

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

2
packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/TableView/columns/creator.tsx
View File

@ -31,7 +31,7 @@ const CreatorCell = ({ avatar, displayName }: CreatorCellProps) => {
role={AvatarRole.user}
/>
<Text className={"description-text"} fontWeight="600" fontSize="13px">
<Text className="description-text" fontWeight="600" fontSize="13px">
{displayName}
</Text>
</>

4
packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/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"

42
packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/TableView/index.tsx
View File

@ -1,10 +1,10 @@
import React from "react";
import { inject, observer } from "mobx-react";
//@ts-ignore
import elementResizeDetectorMaker from "element-resize-detector";
import { UserStore } from "@docspace/shared/store/UserStore";
import { TableBody } from "@docspace/shared/components/table";
//@ts-ignore
import { OAuthStoreProps } from "SRC_DIR/store/OAuthStore";
import Row from "./Row";
@ -12,7 +12,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 = `oauthConfigColumnsSize_ver-${TABLE_VERSION}`;
@ -36,7 +35,7 @@ const TableView = ({
fetchNextClients,
}: TableViewProps) => {
const tableRef = React.useRef<HTMLDivElement>(null);
const tagRef = React.useRef<HTMLDivElement>(null);
const tagRef = React.useRef<HTMLDivElement | null>(null);
const [tagCount, setTagCount] = React.useState(0);
@ -49,7 +48,7 @@ const TableView = ({
}, []);
const onResize = React.useCallback(
(node: HTMLDivElement) => {
(node: HTMLElement) => {
const element = tagRef?.current ? tagRef?.current : node;
if (element) {
@ -57,33 +56,37 @@ const TableView = ({
const columns = Math.floor(width / 120);
if (columns != tagCount) setTagCount(columns);
if (columns !== tagCount) setTagCount(columns);
}
},
[tagCount],
);
const onSetTagRef = React.useCallback((node: HTMLDivElement) => {
if (node) {
//@ts-ignore
tagRef.current = node;
onResize(node);
const onSetTagRef = React.useCallback(
(node: HTMLDivElement) => {
if (node) {
tagRef.current = node;
onResize(node);
elementResizeDetector.listenTo(node, onResize);
}
}, []);
elementResizeDetector.listenTo(node, onResize);
}
},
[onResize],
);
const clickOutside = React.useCallback(
(e: any) => {
(e: MouseEvent) => {
const target = e.target as HTMLElement;
if (!target) return;
if (
e.target.closest(".checkbox") ||
e.target.closest(".table-container_row-checkbox") ||
target.closest(".checkbox") ||
target.closest(".table-container_row-checkbox") ||
e.detail === 0
) {
return;
}
setSelection && setSelection("");
setSelection?.("");
},
[setSelection],
);
@ -102,7 +105,7 @@ const TableView = ({
async ({ startIndex }: { startIndex: number; stopIndex: number }) => {
await fetchNextClients?.(startIndex);
},
[],
[fetchNextClients],
);
return (
@ -117,6 +120,7 @@ const TableView = ({
itemHeight={49}
useReactWindow
columnStorageName={columnStorageName}
columnInfoPanelStorageName=" "
filesLength={items.length}
fetchMoreFiles={fetchMoreFiles}
hasMoreFiles={hasNextPage || false}

46
packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/index.tsx
View File

@ -2,14 +2,11 @@ import styled from "styled-components";
import { useTranslation } from "react-i18next";
import { IClientProps } from "@docspace/shared/utils/oauth/interfaces";
import { TTranslation } from "@docspace/shared/types";
import { Text } from "@docspace/shared/components/text";
import { Consumer } from "@docspace/shared/utils/context";
//@ts-ignore
import { ViewAsType } from "SRC_DIR/store/OAuthStore";
//@ts-ignore
import { DeviceUnionType } from "SRC_DIR/Hooks/useViewEffect";
import TableView from "./TableView";
@ -36,7 +33,6 @@ export const StyledContainer = styled.div`
`;
interface ListProps {
t: TTranslation;
clients: IClientProps[];
viewAs: ViewAsType;
currentDeviceType: DeviceUnionType;
@ -48,35 +44,33 @@ const List = ({ clients, viewAs, currentDeviceType }: ListProps) => {
return (
<StyledContainer>
<Text
fontSize={"12px"}
fontSize="12px"
fontWeight={400}
lineHeight={"16px"}
title={"OAuth description"}
tag={""}
as={"p"}
color={""}
textAlign={""}
lineHeight="16px"
title="OAuth description"
tag=""
as="p"
color=""
textAlign=""
className="description"
>
{t("OAuthAppDescription")}
</Text>
<RegisterNewButton t={t} currentDeviceType={currentDeviceType} />
<Consumer>
{(context) => (
<>
{viewAs === "table" ? (
<TableView
items={clients || []}
sectionWidth={context.sectionWidth || 0}
/>
) : (
<RowView
items={clients || []}
sectionWidth={context.sectionWidth || 0}
/>
)}
</>
)}
{(context) =>
viewAs === "table" ? (
<TableView
items={clients || []}
sectionWidth={context.sectionWidth || 0}
/>
) : (
<RowView
items={clients || []}
sectionWidth={context.sectionWidth || 0}
/>
)
}
</Consumer>
</StyledContainer>
);

2
packages/runtime.json
View File

@ -1,5 +1,5 @@
{
"date": "2024528_115453",
"date": "2024528_131959",
"checksums": {
"api.js": "0efbae3383bf6c6b6f26d573eee164d2",
"api.poly.js": "2a2ac2c0e4a7007b61d2d1ff7b00a22e",

1
packages/shared/package.json
View File

@ -112,6 +112,7 @@
"@testing-library/dom": "^9.3.3",
"@testing-library/jest-dom": "^6.1.4",
"@testing-library/react": "^14.1.2",
"@types/element-resize-detector": "^1.1.6",
"@types/eslint": "^8.44.7",
"@types/file-saver": "^2.0.7",
"@types/jest": "^29.5.10",

8
yarn.lock
View File

@ -2917,6 +2917,7 @@ __metadata:
"@testing-library/dom": "npm:^9.3.3"
"@testing-library/jest-dom": "npm:^6.1.4"
"@testing-library/react": "npm:^14.1.2"
"@types/element-resize-detector": "npm:^1.1.6"
"@types/eslint": "npm:^8.44.7"
"@types/file-saver": "npm:^2.0.7"
"@types/jest": "npm:^29.5.10"
@ -7897,6 +7898,13 @@ __metadata:
languageName: node
linkType: hard
"@types/element-resize-detector@npm:^1.1.6":
version: 1.1.6
resolution: "@types/element-resize-detector@npm:1.1.6"
checksum: 62967c4933ce6dc717608aa498bfbbf2567c3778958203621b1981f5804eb519cf16b8f677d3c92c9b2a9d791191b514dd60298e276fcbf6b1660542209dd299
languageName: node
linkType: hard
"@types/emscripten@npm:^1.39.6":
version: 1.39.10
resolution: "@types/emscripten@npm:1.39.10"