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

Client: fix after merge develop

Browse Source
This commit is contained in:
Timofey Boyko 2024-01-18 13:56:23 +03:00
parent a855f7b345
commit 16ada7a735
72 changed files with 679 additions and 732 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

@ -1,6 +1,6 @@
//@ts-ignore
import { DeviceUnionType } from "SRC_DIR/Hooks/useViewEffect";
import { IClientProps } from "@docspace/common/utils/oauth/interfaces";
import { IClientProps } from "@docspace/shared/utils/oauth/interfaces";
//@ts-ignore
import { ViewAsType } from "SRC_DIR/store/OAuthStore";

4
packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/OAuthSectionHeader/SectionHeader.styled.ts
View File

@ -1,8 +1,8 @@
import styled, { css } from "styled-components";
import { isMobile, isMobileOnly } from "react-device-detect";
import { Base } from "@docspace/components/themes";
import { tablet } from "@docspace/components/utils/device";
import { Base } from "@docspace/shared/themes";
import { tablet } from "@docspace/shared/utils/device";
const HeaderContainer = styled.div`
position: sticky;

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

@ -3,8 +3,8 @@ import { useTranslation } from "react-i18next";
// @ts-ignore
import Headline from "@docspace/common/components/Headline";
// @ts-ignore
import IconButton from "@docspace/components/icon-button";
import { IconButton } from "@docspace/shared/components/icon-button";
import ArrowPathReactSvgUrl from "PUBLIC_DIR/images/arrow.path.react.svg?url";
@ -24,12 +24,12 @@ const OAuthSectionHeader = ({ isEdit }: OAuthSectionHeaderProps) => {
<>
<IconButton
iconName={ArrowPathReactSvgUrl}
size="17"
isFill={true}
size={17}
isFill
onClick={onBack}
className="arrow-button"
/>
<Headline type="content" truncate={true} className="headline">
<Headline type="content" truncate className="headline">
{isEdit ? t("EditApp") : t("NewApp")}
</Headline>
</>

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

@ -1,7 +1,7 @@
import styled from "styled-components";
import { mobile } from "@docspace/components/utils/device";
import { Base } from "@docspace/components/themes";
import { mobile } from "@docspace/shared/utils/device";
import { Base } from "@docspace/shared/themes";
const StyledContainer = styled.div`
width: 100%;

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

@ -4,7 +4,7 @@ import {
IClientProps,
IClientReqDTO,
IScope,
} from "@docspace/common/utils/oauth/interfaces";
} from "@docspace/shared/utils/oauth/interfaces";
//@ts-ignore
import { DeviceUnionType } from "SRC_DIR/Hooks/useViewEffect";

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

@ -1,7 +1,6 @@
import React from "react";
//@ts-ignore
import RectangleLoader from "@docspace/components/skeletons/rectangle";
import { RectangleSkeleton } from "@docspace/shared/skeletons/rectangle";
//@ts-ignore
import { DeviceUnionType } from "SRC_DIR/Hooks/useViewEffect";
@ -19,12 +18,12 @@ import {
} from "./ClientForm.styled";
const HelpButtonSkeleton = () => {
return <RectangleLoader width={"12px"} height={"12px"} />;
return <RectangleSkeleton width={"12px"} height={"12px"} />;
};
const CheckboxSkeleton = ({ className }: { className?: string }) => {
return (
<RectangleLoader className={className} width={"16px"} height={"16px"} />
<RectangleSkeleton className={className} width={"16px"} height={"16px"} />
);
};
@ -41,42 +40,42 @@ const ClientFormLoader = ({
<StyledContainer>
<StyledBlock>
<StyledHeaderRow>
<RectangleLoader width={"78px"} height={"16px"} />
<RectangleSkeleton width={"78px"} height={"16px"} />
</StyledHeaderRow>
<StyledInputBlock>
<StyledInputGroup>
<StyledHeaderRow>
<RectangleLoader width={"65px"} height={"13px"} />
<RectangleSkeleton width={"65px"} height={"13px"} />
</StyledHeaderRow>
<StyledInputRow>
<RectangleLoader width={"100%"} height={"32px"} />
<RectangleSkeleton width={"100%"} height={"32px"} />
</StyledInputRow>
</StyledInputGroup>
<StyledInputGroup>
<StyledHeaderRow>
<RectangleLoader width={"80px"} height={"13px"} />
<RectangleSkeleton width={"80px"} height={"13px"} />
</StyledHeaderRow>
<StyledInputRow>
<RectangleLoader width={"100%"} height={"32px"} />
<RectangleSkeleton width={"100%"} height={"32px"} />
</StyledInputRow>
</StyledInputGroup>
<StyledInputGroup>
<div className="label">
<RectangleLoader width={"60px"} height={"13px"} />
<RectangleSkeleton width={"60px"} height={"13px"} />
</div>
<div className="select">
<RectangleLoader width={"32px"} height={"32px"} />
<RectangleLoader width={"32px"} height={"32px"} />
<RectangleLoader width={"109px"} height={"13px"} />
<RectangleSkeleton width={"32px"} height={"32px"} />
<RectangleSkeleton width={"32px"} height={"32px"} />
<RectangleSkeleton width={"109px"} height={"13px"} />
</div>
<RectangleLoader width={"130px"} height={"12px"} />
<RectangleSkeleton width={"130px"} height={"12px"} />
</StyledInputGroup>
<StyledInputGroup>
<StyledHeaderRow>
<RectangleLoader width={"75px"} height={"13px"} />
<RectangleSkeleton width={"75px"} height={"13px"} />
</StyledHeaderRow>
<StyledInputRow>
<RectangleLoader width={"100%"} height={"60px"} />
<RectangleSkeleton width={"100%"} height={"60px"} />
</StyledInputRow>
</StyledInputGroup>
</StyledInputBlock>
@ -84,29 +83,29 @@ const ClientFormLoader = ({
{isEdit && (
<StyledBlock>
<StyledHeaderRow>
<RectangleLoader width={"47px"} height={"16px"} />
<RectangleSkeleton width={"47px"} height={"16px"} />
<HelpButtonSkeleton />
</StyledHeaderRow>
<StyledInputBlock>
<StyledInputGroup>
<StyledHeaderRow>
<RectangleLoader width={"96px"} height={"13px"} />
<RectangleSkeleton width={"96px"} height={"13px"} />
</StyledHeaderRow>
<StyledInputRow>
<RectangleLoader width={"100%"} height={"32px"} />
<RectangleSkeleton width={"100%"} height={"32px"} />
</StyledInputRow>
</StyledInputGroup>
<StyledInputGroup>
<StyledHeaderRow>
<RectangleLoader width={"60px"} height={"13px"} />
<RectangleSkeleton width={"60px"} height={"13px"} />
</StyledHeaderRow>
<StyledInputRow>
<RectangleLoader
<RectangleSkeleton
className={"loader"}
width={"calc(100% - 91px)"}
height={"32px"}
/>
<RectangleLoader width={"91px"} height={"32px"} />
<RectangleSkeleton width={"91px"} height={"32px"} />
</StyledInputRow>
</StyledInputGroup>
</StyledInputBlock>
@ -114,64 +113,64 @@ const ClientFormLoader = ({
)}
<StyledBlock>
<StyledHeaderRow>
<RectangleLoader width={"96px"} height={"16px"} />
<RectangleSkeleton width={"96px"} height={"16px"} />
</StyledHeaderRow>
<StyledInputBlock>
<StyledInputGroup>
<StyledHeaderRow>
<RectangleLoader width={"87px"} height={"13px"} />
<RectangleSkeleton width={"87px"} height={"13px"} />
<HelpButtonSkeleton />
</StyledHeaderRow>
<StyledInputRow>
<RectangleLoader
<RectangleSkeleton
className={"loader"}
width={"calc(100% - 40px)"}
height={"32px"}
/>
<RectangleLoader width={"32px"} height={"32px"} />
<RectangleSkeleton width={"32px"} height={"32px"} />
</StyledInputRow>
<RectangleLoader width={"162px"} height={"32px"} />
<RectangleSkeleton width={"162px"} height={"32px"} />
</StyledInputGroup>
<StyledInputGroup>
<StyledHeaderRow>
<RectangleLoader width={"96px"} height={"13px"} />
<RectangleSkeleton width={"96px"} height={"13px"} />
<HelpButtonSkeleton />
</StyledHeaderRow>
<StyledInputRow>
<RectangleLoader
<RectangleSkeleton
className={"loader"}
width={"calc(100% - 40px)"}
height={"32px"}
/>
<RectangleLoader width={"32px"} height={"32px"} />
<RectangleSkeleton width={"32px"} height={"32px"} />
</StyledInputRow>
<RectangleLoader width={"162px"} height={"32px"} />
<RectangleSkeleton width={"162px"} height={"32px"} />
</StyledInputGroup>
</StyledInputBlock>
</StyledBlock>
<StyledScopesContainer>
<StyledHeaderRow className="header">
<RectangleLoader width={"111px"} height={"16px"} />
<RectangleSkeleton width={"111px"} height={"16px"} />
<HelpButtonSkeleton />
</StyledHeaderRow>
<RectangleLoader className="header" width={"34px"} height={"16px"} />
<RectangleLoader
<RectangleSkeleton className="header" width={"34px"} height={"16px"} />
<RectangleSkeleton
className="header header-last"
width={"37px"}
height={"16px"}
/>
<StyledScopesName>
<RectangleLoader
<RectangleSkeleton
className="scope-name-loader"
width={"98px"}
height={"14px"}
/>
<RectangleLoader
<RectangleSkeleton
className={"scope-desc-loader"}
width={"200px"}
height={"12px"}
/>
<RectangleLoader
<RectangleSkeleton
className={"scope-desc-loader"}
width={"230px"}
height={"12px"}
@ -186,17 +185,17 @@ const ClientFormLoader = ({
<CheckboxSkeleton />
</StyledScopesCheckbox>
<StyledScopesName>
<RectangleLoader
<RectangleSkeleton
className="scope-name-loader"
width={"98px"}
height={"14px"}
/>
<RectangleLoader
<RectangleSkeleton
className={"scope-desc-loader"}
width={"200px"}
height={"12px"}
/>
<RectangleLoader
<RectangleSkeleton
className={"scope-desc-loader"}
width={"230px"}
height={"12px"}
@ -211,17 +210,17 @@ const ClientFormLoader = ({
<CheckboxSkeleton />
</StyledScopesCheckbox>
<StyledScopesName>
<RectangleLoader
<RectangleSkeleton
className="scope-name-loader"
width={"98px"}
height={"14px"}
/>
<RectangleLoader
<RectangleSkeleton
className={"scope-desc-loader"}
width={"200px"}
height={"12px"}
/>
<RectangleLoader
<RectangleSkeleton
className={"scope-desc-loader"}
width={"230px"}
height={"12px"}
@ -236,17 +235,17 @@ const ClientFormLoader = ({
<CheckboxSkeleton />
</StyledScopesCheckbox>
<StyledScopesName>
<RectangleLoader
<RectangleSkeleton
className="scope-name-loader"
width={"98px"}
height={"14px"}
/>
<RectangleLoader
<RectangleSkeleton
className={"scope-desc-loader"}
width={"200px"}
height={"12px"}
/>
<RectangleLoader
<RectangleSkeleton
className={"scope-desc-loader"}
width={"230px"}
height={"12px"}
@ -263,35 +262,35 @@ const ClientFormLoader = ({
</StyledScopesContainer>
<StyledBlock>
<StyledHeaderRow>
<RectangleLoader width={"162px"} height={"16px"} />
<RectangleSkeleton width={"162px"} height={"16px"} />
</StyledHeaderRow>
<StyledInputBlock>
<StyledInputGroup>
<StyledHeaderRow>
<RectangleLoader width={"114px"} height={"13px"} />
<RectangleSkeleton width={"114px"} height={"13px"} />
<HelpButtonSkeleton />
</StyledHeaderRow>
<StyledInputRow>
<RectangleLoader width={"100%"} height={"32px"} />
<RectangleSkeleton width={"100%"} height={"32px"} />
</StyledInputRow>
</StyledInputGroup>
<StyledInputGroup>
<StyledHeaderRow>
<RectangleLoader width={"96px"} height={"13px"} />
<RectangleSkeleton width={"96px"} height={"13px"} />
<HelpButtonSkeleton />
</StyledHeaderRow>
<StyledInputRow>
<RectangleLoader width={"100%"} height={"32px"} />
<RectangleSkeleton width={"100%"} height={"32px"} />
</StyledInputRow>
</StyledInputGroup>
</StyledInputBlock>
</StyledBlock>
<StyledButtonContainer>
<RectangleLoader
<RectangleSkeleton
width={currentDeviceType === "desktop" ? "86px" : "100%"}
height={buttonHeight}
/>
<RectangleLoader
<RectangleSkeleton
width={currentDeviceType === "desktop" ? "86px" : "100%"}
height={buttonHeight}
/>

25
packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/ClientForm/components/BasicBlock.tsx
View File

@ -1,10 +1,11 @@
import React from "react";
import { Trans } from "react-i18next";
// @ts-ignore
import HelpButton from "@docspace/components/help-button";
// @ts-ignore
import FieldContainer from "@docspace/components/field-container";
import { TTranslation } from "@docspace/shared/types";
import { HelpButton } from "@docspace/shared/components/help-button";
import { FieldContainer } from "@docspace/shared/components/field-container";
import { Checkbox } from "@docspace/shared/components/checkbox";
import { StyledBlock, StyledInputBlock } from "../ClientForm.styled";
@ -13,10 +14,8 @@ import InputGroup from "./InputGroup";
import TextAreaGroup from "./TextAreaGroup";
import SelectGroup from "./SelectGroup";
import Checkbox from "@docspace/components/checkbox";
interface BasicBlockProps {
t: any;
t: TTranslation;
nameValue: string;
websiteUrlValue: string;
@ -47,14 +46,14 @@ function getImageDimensions(
function compressImage(
image: HTMLImageElement,
scale: number,
initalWidth: number,
initalHeight: number
initialWidth: number,
initialHeight: number
): any {
return new Promise((resolve, reject) => {
const canvas = document.createElement("canvas");
canvas.width = scale * initalWidth;
canvas.height = scale * initalHeight;
canvas.width = scale * initialWidth;
canvas.height = scale * initialHeight;
const ctx = canvas.getContext("2d");
if (ctx) {
@ -81,7 +80,9 @@ const BasicBlock = ({
requiredErrorFields,
onBlur,
}: BasicBlockProps) => {
const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const onChange = (
e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
) => {
const target = e.target;
changeValue(target.name, target.value);

5
packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/ClientForm/components/BlockHeader.tsx
View File

@ -1,6 +1,5 @@
import Text from "@docspace/components/text";
//@ts-ignore
import HelpButton from "@docspace/components/help-button";
import { Text } from "@docspace/shared/components/text";
import { HelpButton } from "@docspace/shared/components/help-button";
import { StyledHeaderRow } from "../ClientForm.styled";

6
packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/ClientForm/components/ButtonsBlock.tsx
View File

@ -1,8 +1,8 @@
import React from "react";
import Button from "@docspace/components/button";
import { DeviceType } from "@docspace/shared/enums";
import { Button, ButtonSize } from "@docspace/shared/components/button";
import { StyledButtonContainer } from "../ClientForm.styled";
import { DeviceType } from "@docspace/common/constants";
interface ButtonsBlockProps {
saveLabel: string;
@ -31,7 +31,7 @@ const ButtonsBlock = ({
}: ButtonsBlockProps) => {
const isDesktop = currentDeviceType === DeviceType.desktop;
const buttonSize = isDesktop ? "small" : "normal";
const buttonSize = isDesktop ? ButtonSize.small : ButtonSize.normal;
return (
<StyledButtonContainer>
<Button

3
packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/ClientForm/components/ClientBlock.tsx
View File

@ -2,8 +2,7 @@ import React from "react";
import { Trans } from "react-i18next";
import copy from "copy-to-clipboard";
//@ts-ignore
import toastr from "@docspace/components/toast/toastr";
import { toastr } from "@docspace/shared/components/toast";
import { StyledBlock, StyledInputBlock } from "../ClientForm.styled";

25
packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/ClientForm/components/InputGroup.tsx
View File

@ -1,11 +1,10 @@
import React from "react";
import InputBlock from "@docspace/components/input-block";
import Button from "@docspace/components/button";
//@ts-ignore
import FieldContainer from "@docspace/components/field-container";
//@ts-ignore
import RectangleLoader from "@docspace/components/skeletons/rectangle";
import { InputBlock } from "@docspace/shared/components/input-block";
import { Button, ButtonSize } from "@docspace/shared/components/button";
import { FieldContainer } from "@docspace/shared/components/field-container";
import { RectangleSkeleton } from "@docspace/shared/skeletons/rectangle";
import { InputSize, InputType } from "@docspace/shared/components/text-input";
import CopyReactSvgUrl from "PUBLIC_DIR/images/copy.react.svg?url";
@ -28,7 +27,7 @@ interface InputGroupProps {
onButtonClick?: () => void;
withCopy?: boolean;
onCopyClick?: (name: string) => void;
onCopyClick?: (e: React.MouseEvent) => void;
isPassword?: boolean;
disabled?: boolean;
@ -94,7 +93,7 @@ const InputGroup = ({
) : (
<>
{isRequestRunning ? (
<RectangleLoader
<RectangleSkeleton
className={"loader"}
width={"100%"}
height={"32px"}
@ -110,18 +109,18 @@ const InputGroup = ({
maxLength={255}
isReadOnly={withCopy}
isDisabled={disabled}
iconName={withCopy ? CopyReactSvgUrl : null}
onIconClick={withCopy && onCopyClick}
type={isPassword ? "password" : "text"}
size={InputSize.base}
iconName={withCopy ? CopyReactSvgUrl : ""}
onIconClick={withCopy ? onCopyClick : undefined}
type={isPassword ? InputType.password : InputType.text}
onBlur={() => onBlur?.(name)}
hasError={isError}
/>
)}
{buttonLabel && (
<Button
//@ts-ignore
label={buttonLabel}
size={"small"}
size={ButtonSize.small}
onClick={onButtonClickAction}
isDisabled={isRequestRunning}
/>

15
packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/ClientForm/components/MultiInputGroup.tsx
View File

@ -1,13 +1,8 @@
import React from "react";
import Text from "@docspace/components/text";
import InputBlock from "@docspace/components/input-block";
//@ts-ignore
import HelpButton from "@docspace/components/help-button";
//@ts-ignore
import SelectorAddButton from "@docspace/components/selector-add-button";
//@ts-ignore
import SelectedItem from "@docspace/components/selected-item";
import { InputBlock } from "@docspace/shared/components/input-block";
import { SelectorAddButton } from "@docspace/shared/components/selector-add-button";
import { SelectedItem } from "@docspace/shared/components/selected-item";
import {
StyledChipsContainer,
@ -16,6 +11,7 @@ import {
} from "../ClientForm.styled";
import InputGroup from "./InputGroup";
import { isValidUrl } from "..";
import { InputSize, InputType } from "@docspace/shared/components/text-input";
interface MultiInputGroupProps {
t: any;
@ -94,6 +90,8 @@ const MultiInputGroup = ({
isDisabled={isDisabled}
onBlur={onBlur}
hasError={isError || hasError}
size={InputSize.base}
type={InputType.text}
/>
<SelectorAddButton
onClick={() => {
@ -110,6 +108,7 @@ const MultiInputGroup = ({
{currentValue.map((v, index) => (
<SelectedItem
key={`${v}-${index}`}
propKey={v}
isInline
label={v}
isDisabled={isDisabled}

19
packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/ClientForm/components/ScopesBlock.tsx
View File

@ -3,15 +3,15 @@ import React from "react";
import {
IFilteredScopes,
IScope,
} from "@docspace/common/utils/oauth/interfaces";
} from "@docspace/shared/utils/oauth/interfaces";
import {
filterScopeByGroup,
getScopeTKeyName,
} from "@docspace/common/utils/oauth";
import { ScopeGroup, ScopeType } from "@docspace/common/utils/oauth/enums";
} from "@docspace/shared/utils/oauth";
import { ScopeGroup, ScopeType } from "@docspace/shared/enums";
import Text from "@docspace/components/text";
import Checkbox from "@docspace/components/checkbox";
import { Text } from "@docspace/shared/components/text";
import { Checkbox } from "@docspace/shared/components/checkbox";
import BlockHeader from "./BlockHeader";
@ -104,7 +104,6 @@ const ScopesBlock = ({
const row = (
<React.Fragment key={name}>
<StyledScopesName>
{/* @ts-ignore */}
<Text
className="scope-name"
fontSize={"14px"}
@ -115,14 +114,12 @@ const ScopesBlock = ({
</Text>
{scope.read?.name && (
// @ts-ignore
<Text
className={"scope-desc"}
fontSize={"12px"}
fontWeight={400}
lineHeight={"16px"}
>
{/* @ts-ignore */}
<Text
className={"scope-desc"}
as={"span"}
@ -137,14 +134,12 @@ const ScopesBlock = ({
)}
{scope.write?.name && (
<>
{/* @ts-ignore */}
<Text
className={"scope-desc"}
fontSize={"12px"}
fontWeight={400}
lineHeight={"16px"}
>
{/* @ts-ignore */}
<Text
className={"scope-desc"}
as={"span"}
@ -205,7 +200,7 @@ const ScopesBlock = ({
header={t("ScopesHeader")}
helpButtonText={t("ScopesHelp")}
/>
{/* @ts-ignore */}
<Text
className="header"
fontSize={"14px"}
@ -214,7 +209,7 @@ const ScopesBlock = ({
>
{t("Read")}
</Text>
{/* @ts-ignore */}
<Text
className="header header-last"
fontSize={"14px"}

5
packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/ClientForm/components/SelectGroup.tsx
View File

@ -1,8 +1,7 @@
import React from "react";
import Text from "@docspace/components/text";
//@ts-ignore
import SelectorAddButton from "@docspace/components/selector-add-button";
import { Text } from "@docspace/shared/components/text";
import { SelectorAddButton } from "@docspace/shared/components/selector-add-button";
import { StyledInputGroup } from "../ClientForm.styled";

8
packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/ClientForm/components/TextAreaGroup.tsx
View File

@ -1,8 +1,7 @@
import React from "react";
import Text from "@docspace/components/text";
//@ts-ignore
import Textarea from "@docspace/components/textarea";
import { Text } from "@docspace/shared/components/text";
import { Textarea } from "@docspace/shared/components/textarea";
import { StyledInputGroup } from "../ClientForm.styled";
@ -13,7 +12,7 @@ interface TextAreaProps {
value: string;
placeholder: string;
increaseHeight: boolean;
onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
}
const TextAreaGroup = ({
@ -47,7 +46,6 @@ const TextAreaGroup = ({
value={value}
placeholder={placeholder}
onChange={onChange}
scale
tabIndex={0}
heightTextArea={increaseHeight ? 81 : 60}
maxLength={255}

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

@ -6,8 +6,8 @@ import { useTranslation } from "react-i18next";
import {
IClientProps,
IClientReqDTO,
} from "@docspace/common/utils/oauth/interfaces";
import { AuthenticationMethod } from "@docspace/common/utils/oauth/enums";
} from "@docspace/shared/utils/oauth/interfaces";
import { AuthenticationMethod } from "@docspace/shared/enums";
import ResetDialog from "../ResetDialog";
@ -213,13 +213,13 @@ const ClientForm = ({
redirect_uris: fetchedClient?.redirectUris
? [...fetchedClient?.redirectUris]
: client?.redirectUris
? [...client?.redirectUris]
: [],
? [...client?.redirectUris]
: [],
allowed_origins: fetchedClient?.allowedOrigins
? [...fetchedClient.allowedOrigins]
: client?.allowedOrigins
? [...client.allowedOrigins]
: [],
? [...client.allowedOrigins]
: [],
logout_redirect_uri:
fetchedClient?.logoutRedirectUri || client?.logoutRedirectUri || "",
@ -236,8 +236,8 @@ const ClientForm = ({
scopes: fetchedClient?.scopes
? [...fetchedClient.scopes]
: client?.scopes
? [...client.scopes]
: [],
? [...client.scopes]
: [],
});
setClientId(fetchedClient?.clientId || client?.clientId || "");

26
packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/DeleteDialog.tsx
View File

@ -2,12 +2,13 @@ import React from "react";
import { inject, observer } from "mobx-react";
import { useTranslation, Trans } from "react-i18next";
// @ts-ignore
import ModalDialog from "@docspace/components/modal-dialog";
// @ts-ignore
import Button from "@docspace/components/button";
// @ts-ignore
import toastr from "@docspace/components/toast/toastr";
import {
ModalDialog,
ModalDialogType,
} from "@docspace/shared/components/modal-dialog";
import { Button, ButtonSize } from "@docspace/shared/components/button";
import { toastr } from "@docspace/shared/components/toast";
import { TData } from "@docspace/shared/components/toast/Toast.type";
// @ts-ignore
import { OAuthStoreProps } from "SRC_DIR/store/OAuthStore";
@ -31,8 +32,9 @@ const DeleteClientDialog = (props: DeleteClientDialogProps) => {
setIsRequestRunning(true);
onClose?.();
} catch (error) {
toastr.error(error);
} catch (error: unknown) {
const e = error as TData;
toastr.error(e);
onClose?.();
}
};
@ -42,7 +44,7 @@ const DeleteClientDialog = (props: DeleteClientDialogProps) => {
isLoading={!ready}
visible={isVisible}
onClose={onClose}
displayType="modal"
displayType={ModalDialogType.modal}
>
<ModalDialog.Header>{t("DeleteHeader")}</ModalDialog.Header>
<ModalDialog.Body>
@ -50,22 +52,20 @@ const DeleteClientDialog = (props: DeleteClientDialogProps) => {
</ModalDialog.Body>
<ModalDialog.Footer>
<Button
// @ts-ignore
className="delete-button"
key="DeletePortalBtn"
label={t("Common:OkButton")}
size="normal"
size={ButtonSize.normal}
scale
primary={true}
isLoading={isRequestRunning}
onClick={onDisableClick}
/>
<Button
// @ts-ignore
className="cancel-button"
key="CancelDeleteBtn"
label={t("Common:CancelButton")}
size="normal"
size={ButtonSize.normal}
scale
isDisabled={isRequestRunning}
onClick={onClose}

26
packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/DisableDialog.tsx
View File

@ -2,12 +2,13 @@ import React from "react";
import { inject, observer } from "mobx-react";
import { useTranslation, Trans } from "react-i18next";
// @ts-ignore
import ModalDialog from "@docspace/components/modal-dialog";
// @ts-ignore
import Button from "@docspace/components/button";
// @ts-ignore
import toastr from "@docspace/components/toast/toastr";
import {
ModalDialog,
ModalDialogType,
} from "@docspace/shared/components/modal-dialog";
import { Button, ButtonSize } from "@docspace/shared/components/button";
import { toastr } from "@docspace/shared/components/toast";
import { TData } from "@docspace/shared/components/toast/Toast.type";
// @ts-ignore
import { OAuthStoreProps } from "SRC_DIR/store/OAuthStore";
@ -31,8 +32,9 @@ const DisableClientDialog = (props: DisableClientDialogProps) => {
setIsRequestRunning(true);
onClose?.();
} catch (error) {
toastr.error(error);
} catch (error: unknown) {
const e = error as TData;
toastr.error(e);
onClose?.();
}
};
@ -42,7 +44,7 @@ const DisableClientDialog = (props: DisableClientDialogProps) => {
isLoading={!ready}
visible={isVisible}
onClose={onClose}
displayType="modal"
displayType={ModalDialogType.modal}
>
<ModalDialog.Header>{t("DisableApplication")}</ModalDialog.Header>
<ModalDialog.Body>
@ -50,22 +52,20 @@ const DisableClientDialog = (props: DisableClientDialogProps) => {
</ModalDialog.Body>
<ModalDialog.Footer>
<Button
// @ts-ignore
className="delete-button"
key="DeletePortalBtn"
label={t("Common:OkButton")}
size="normal"
size={ButtonSize.normal}
scale
primary={true}
isLoading={isRequestRunning}
onClick={onDisableClick}
/>
<Button
// @ts-ignore
className="cancel-button"
key="CancelDeleteBtn"
label={t("Common:CancelButton")}
size="normal"
size={ButtonSize.normal}
scale
isDisabled={isRequestRunning}
onClick={onClose}

3
packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/EmptyScreen/EmptyScreen.types.ts
View File

@ -1,3 +1,4 @@
import { TTranslation } from "@docspace/shared/types";
export interface EmptyScreenProps {
t: any;
t: TTranslation;
}

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

@ -1,5 +1,4 @@
// @ts-ignore
import EmptyScreenContainer from "@docspace/components/empty-screen-container";
import { EmptyScreenContainer } from "@docspace/shared/components/empty-screen-container";
import EmptyScreenOauthSvgUrl from "PUBLIC_DIR/images/empty_screen_oauth.svg?url";

111
packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/InfoDialog.tsx
View File

@ -3,22 +3,34 @@ import { inject, observer } from "mobx-react";
import styled from "styled-components";
import { useTranslation } from "react-i18next";
import { IClientProps, IScope } from "@docspace/common/utils/oauth/interfaces";
import ScopeList from "@docspace/common/utils/oauth/ScopeList";
//@ts-ignore
import getCorrectDate from "@docspace/components/utils/getCorrectDate";
//@ts-ignore
import { getCookie } from "@docspace/components/utils/cookie";
//@ts-ignore
import ModalDialog from "@docspace/components/modal-dialog";
import Text from "@docspace/components/text";
import ContextMenuButton from "@docspace/components/context-menu-button";
import { IClientProps, IScope } from "@docspace/shared/utils/oauth/interfaces";
import ScopeList from "@docspace/shared/utils/oauth/ScopeList";
import getCorrectDate from "@docspace/shared/utils/getCorrectDate";
import { getCookie } from "@docspace/shared/utils/cookie";
import {
ModalDialog,
ModalDialogType,
} from "@docspace/shared/components/modal-dialog";
import { Text } from "@docspace/shared/components/text";
import {
ContextMenuButton,
ContextMenuButtonDisplayType,
} from "@docspace/shared/components/context-menu-button";
//@ts-ignore
import { OAuthStoreProps } from "SRC_DIR/store/OAuthStore";
import Avatar from "@docspace/components/avatar";
import Link from "@docspace/components/link";
import { Base } from "@docspace/components/themes";
import {
Avatar,
AvatarRole,
AvatarSize,
} from "@docspace/shared/components/avatar";
import { Link, LinkTarget, LinkType } from "@docspace/shared/components/link";
import { Base } from "@docspace/shared/themes";
import { TTranslation } from "@docspace/shared/types";
import { ContextMenuModel } from "@docspace/shared/components/context-menu";
const StyledContainer = styled.div<{
showDescription: boolean;
@ -122,13 +134,11 @@ interface InfoDialogProps {
setInfoDialogVisible?: (value: boolean) => void;
getContextMenuItems?: (
t: any,
t: TTranslation,
item: IClientProps,
isInfo?: boolean,
isSettings?: boolean
) => {
[key: string]: any | string | boolean | ((clientId: string) => void);
}[];
) => ContextMenuModel[];
client?: IClientProps;
isProfile?: boolean;
@ -164,9 +174,9 @@ const InfoDialog = ({
const getContextOptions = () => {
const contextOptions =
client &&
getContextMenuItems &&
getContextMenuItems(t, client, true, !isProfile);
client && getContextMenuItems
? getContextMenuItems(t, client, true, !isProfile)
: [];
return contextOptions;
};
@ -177,10 +187,14 @@ const InfoDialog = ({
const locale = getCookie("asc_language");
const modifiedDate = getCorrectDate(locale, client?.modifiedOn);
const modifiedDate = getCorrectDate(locale || "", client?.modifiedOn || "");
return (
<ModalDialog visible={visible} displayType={"aside"} onClose={onClose}>
<ModalDialog
visible={visible}
displayType={ModalDialogType.aside}
onClose={onClose}
>
<ModalDialog.Header>{t("Common:Info")}</ModalDialog.Header>
<ModalDialog.Body>
<StyledContainer
@ -190,7 +204,7 @@ const InfoDialog = ({
<div className="client-block">
<div className="client-block__info">
<img className="client-block__info-logo" src={client?.logo} />
{/* @ts-ignore */}
<Text
fontSize={"16px"}
lineHeight={"22px"}
@ -202,11 +216,13 @@ const InfoDialog = ({
</Text>
</div>
<ContextMenuButton getData={getContextOptions} />
<ContextMenuButton
displayType={ContextMenuButtonDisplayType.dropdown}
getData={getContextOptions}
/>
</div>
{!isProfile && (
<>
{/* @ts-ignore */}
<Text
className={"block-header"}
fontSize={"14px"}
@ -218,8 +234,12 @@ const InfoDialog = ({
{t("Creator")}
</Text>
<div className="creator-block">
<Avatar source={client?.creatorAvatar} size={"min"} />
{/* @ts-ignore */}
<Avatar
source={client?.creatorAvatar || ""}
size={AvatarSize.min}
role={AvatarRole.user}
/>
<Text
fontSize={"14px"}
lineHeight={"16px"}
@ -234,7 +254,6 @@ const InfoDialog = ({
)}
{!isProfile && (
<>
{/* @ts-ignore */}
<Text
className={"block-header"}
fontSize={"14px"}
@ -245,7 +264,7 @@ const InfoDialog = ({
>
{t("Common:Description")}
</Text>
{/* @ts-ignore */}
<Text
id={"client-info-description-text"}
className={"description"}
@ -258,7 +277,6 @@ const InfoDialog = ({
</Text>
{withShowText && (
<>
{/* @ts-ignore */}
<Link
className={"desc-link"}
fontSize={"13px"}
@ -266,7 +284,7 @@ const InfoDialog = ({
fontWeight={"600"}
isHovered
onClick={() => setShowDescription((val) => !val)}
type={"action"}
type={LinkType.action}
>
{showDescription ? "Hide" : "Show more"}
</Link>
@ -274,7 +292,7 @@ const InfoDialog = ({
)}
</>
)}
{/* @ts-ignore */}
<Text
className={"block-header"}
fontSize={"14px"}
@ -285,19 +303,19 @@ const InfoDialog = ({
>
{t("Common:Website")}
</Text>
{/* @ts-ignore */}
<Link
fontSize={"13px"}
lineHeight={"15px"}
fontWeight={"600"}
isHovered
href={client?.websiteUrl}
type={"action"}
target={"_blank"}
type={LinkType.action}
target={LinkTarget.blank}
>
{client?.websiteUrl}
</Link>
{/* @ts-ignore */}
<Text
className={"block-header"}
fontSize={"14px"}
@ -315,7 +333,6 @@ const InfoDialog = ({
/>
{isProfile && (
<>
{/* @ts-ignore */}
<Text
className={"block-header"}
fontSize={"14px"}
@ -326,7 +343,7 @@ const InfoDialog = ({
>
{t("AccessGranted")}
</Text>
{/* @ts-ignore */}
<Text
fontSize={"13px"}
lineHeight={"20px"}
@ -338,7 +355,7 @@ const InfoDialog = ({
</Text>
</>
)}
{/* @ts-ignore */}
<Text
className={"block-header"}
fontSize={"14px"}
@ -349,7 +366,7 @@ const InfoDialog = ({
>
{t("SupportAndLegalInfo")}
</Text>
{/* @ts-ignore */}
<Text
className={"privacy-block"}
fontSize={"13px"}
@ -358,35 +375,33 @@ const InfoDialog = ({
noSelect
truncate
>
{/* @ts-ignore */}
<Link
fontSize={"13px"}
lineHeight={"15px"}
fontWeight={"600"}
isHovered
href={client?.policyUrl}
type={"action"}
target={"_blank"}
type={LinkType.action}
target={LinkTarget.blank}
>
{t("PrivacyPolicy")}
</Link>
<span className="separator"></span>
{/* @ts-ignore */}
<Link
fontSize={"13px"}
lineHeight={"15px"}
fontWeight={"600"}
isHovered
href={client?.termsUrl}
type={"action"}
target={"_blank"}
type={LinkType.action}
target={LinkTarget.blank}
>
{t("Terms of Service")}
</Link>
</Text>
{!isProfile && (
<>
{/* @ts-ignore */}
<Text
className={"block-header"}
fontSize={"14px"}
@ -397,7 +412,7 @@ const InfoDialog = ({
>
{t("LastModified")}
</Text>
{/* @ts-ignore */}
<Text
fontSize={"13px"}
lineHeight={"20px"}

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

@ -1,13 +1,11 @@
import React from "react";
//@ts-ignore
import RectangleLoader from "@docspace/components/skeletons/rectangle";
//@ts-ignore
import { DeviceUnionType } from "SRC_DIR/Hooks/useViewEffect";
//@ts-ignore
import TableSkeleton from "@docspace/components/skeletons/table";
//@ts-ignore
import RowsSkeleton from "@docspace/components/skeletons/rows";
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";
@ -27,17 +25,21 @@ const OAuthLoader = ({
return (
<OAuthContainer>
<StyledContainer>
<RectangleLoader
<RectangleSkeleton
className="description"
width={"100%"}
height={"16px"}
/>
<RectangleLoader
<RectangleSkeleton
className="add-button"
width={"220px"}
height={buttonHeight}
/>
{viewAs === "table" ? <TableSkeleton /> : <RowsSkeleton />}
{viewAs === "table" ? (
<TableSkeleton style={{}} />
) : (
<RowsSkeleton style={{}} />
)}
</StyledContainer>
</OAuthContainer>
);

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

@ -1,8 +1,7 @@
import { useNavigate } from "react-router-dom";
import { useTranslation } from "react-i18next";
//@ts-ignore
import Row from "@docspace/components/row";
import { Row } from "@docspace/shared/components/row";
import { RowContent } from "./RowContent";
import { RowProps } from "./RowView.types";
@ -30,19 +29,20 @@ export const OAuthRow = (props: RowProps) => {
await changeClientStatus(item.clientId, !item.enabled);
};
const handleRowClick = (e: any) => {
const handleRowClick = (e: React.MouseEvent) => {
const target = e.target as HTMLElement;
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;
}
if (
e.target.closest(".table-container_row-context-menu-wrapper") ||
e.target.closest(".toggleButton") ||
e.target.closest(".row_context-menu-wrapper")
target.closest(".table-container_row-context-menu-wrapper") ||
target.closest(".toggleButton") ||
target.closest(".row_context-menu-wrapper")
) {
return setSelection && setSelection("");
}
@ -59,11 +59,10 @@ export const OAuthRow = (props: RowProps) => {
return (
<>
<Row
sectionWidth={sectionWidth}
key={item.clientId}
data={item}
// data={item}
contextOptions={contextOptions}
onClick={handleRowClick}
onRowClick={handleRowClick}
element={element}
mode={"modern"}
checked={isChecked}

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

@ -1,8 +1,7 @@
import React from "react";
import Text from "@docspace/components/text";
import ToggleButton from "@docspace/components/toggle-button";
import { Text } from "@docspace/shared/components/text";
import { ToggleButton } from "@docspace/shared/components/toggle-button";
import {
StyledRowContent,

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

@ -1,9 +1,7 @@
import styled from "styled-components";
//@ts-ignore
import RowContainer from "@docspace/components/row-container";
//@ts-ignore
import RowContent from "@docspace/components/row-content";
import { RowContainer } from "@docspace/shared/components/row-container";
import { RowContent } from "@docspace/shared/components/row-content";
export const StyledRowContainer = styled(RowContainer)`
margin-top: 0px;

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

@ -1,5 +1,6 @@
import { IClientProps } from "@docspace/common/utils/oauth/interfaces";
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";
@ -11,11 +12,9 @@ export interface RowViewProps {
selection?: string[];
setSelection?: (clientId: string) => void;
getContextMenuItems?: (
t: any,
t: TTranslation,
item: IClientProps
) => {
[key: string]: any | string | boolean | ((clientId: string) => void);
}[];
) => ContextMenuModel[];
activeClients?: string[];
hasNextPage?: boolean;
itemCount?: number;
@ -29,11 +28,9 @@ export interface RowProps {
inProgress: boolean;
sectionWidth: number;
getContextMenuItems?: (
t: any,
t: TTranslation,
item: IClientProps
) => {
[key: string]: any | string | boolean | ((clientId: string) => void);
}[];
) => ContextMenuModel[];
setSelection?: (clientId: string) => void;
changeClientStatus?: (clientId: string, status: boolean) => Promise<void>;
}

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

@ -27,19 +27,22 @@ const RowView = (props: RowViewProps) => {
fetchNextClients,
} = props;
const fetchMoreFiles = React.useCallback(
async ({ startIndex }: { startIndex: number; stopIndex: number }) => {
await fetchNextClients?.(startIndex);
},
[]
);
return (
<StyledRowContainer
itemHeight={59}
filesLength={items.length}
fetchMoreFiles={({
startIndex,
}: {
startIndex: number;
stopIndex: number;
}) => fetchNextClients && fetchNextClients(startIndex)}
hasMoreFiles={hasNextPage}
itemCount={itemCount}
useReactWindow={true}
fetchMoreFiles={fetchMoreFiles}
hasMoreFiles={hasNextPage || false}
itemCount={itemCount || 0}
useReactWindow
onScroll={() => {}}
>
{items.map((item) => (
<OAuthRow

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

@ -1,7 +1,6 @@
import { useTranslation } from "react-i18next";
//@ts-ignore
import TableHeader from "@docspace/components/table-container/TableHeader";
import { TTableColumn, TableHeader } from "@docspace/shared/components/table";
import { HeaderProps } from "./TableView.types";
@ -9,13 +8,7 @@ const Header = (props: HeaderProps) => {
const { sectionWidth, tableRef, columnStorageName, tagRef } = props;
const { t } = useTranslation(["Oauth", "Files", "Webhooks", "Common"]);
const defaultColumns: {
[key: string]:
| string
| number
| boolean
| ((key: string, e: any) => void | undefined);
}[] = [
const defaultColumns: TTableColumn[] = [
{
key: "Name",
title: t("Common:Name"),
@ -58,12 +51,10 @@ const Header = (props: HeaderProps) => {
return (
<TableHeader
checkboxSize="48px"
containerRef={tableRef}
containerRef={{ current: tableRef }}
columns={defaultColumns}
columnStorageName={columnStorageName}
sectionWidth={sectionWidth}
checkboxMargin="12px"
showSettings={false}
useReactWindow
infoPanelVisible={false}

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

@ -1,16 +1,13 @@
import { useNavigate } from "react-router-dom";
import { useTranslation } from "react-i18next";
//@ts-ignore
import TableCell from "@docspace/components/table-container/TableCell";
//@ts-ignore
import Tags from "@docspace/components/tags";
import Text from "@docspace/components/text";
import ToggleButton from "@docspace/components/toggle-button";
//@ts-ignore
import getCorrectDate from "@docspace/components/utils/getCorrectDate";
//@ts-ignore
import { getCookie } from "@docspace/components/utils/cookie";
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";
import NameCell from "./columns/name";
import CreatorCell from "./columns/creator";
@ -41,21 +38,23 @@ const Row = (props: RowProps) => {
await changeClientStatus(item.clientId, !item.enabled);
};
const handleRowClick = (e: any) => {
const handleRowClick = (e: React.MouseEvent) => {
const target = e.target as HTMLElement;
if (
e.target.closest(".checkbox") ||
e.target.closest(".table-container_row-checkbox") ||
e.target.closest(".advanced-tag") ||
e.target.closest(".tag") ||
target.closest(".checkbox") ||
target.closest(".table-container_row-checkbox") ||
target.closest(".advanced-tag") ||
target.closest(".tag") ||
e.detail === 0
) {
return;
}
if (
e.target.closest(".type-combobox") ||
e.target.closest(".table-container_row-context-menu-wrapper") ||
e.target.closest(".toggleButton")
target.closest(".type-combobox") ||
target.closest(".table-container_row-context-menu-wrapper") ||
target.closest(".toggleButton")
) {
return setSelection && setSelection("");
}
@ -63,18 +62,22 @@ const Row = (props: RowProps) => {
editClient();
};
const contextOptions = getContextMenuItems && getContextMenuItems(t, item);
const contextOptions = getContextMenuItems?.(t, item);
const getContextMenuModel = () =>
getContextMenuItems ? getContextMenuItems(t, item) : [];
const locale = getCookie("asc_language");
const modifiedDate = getCorrectDate(locale, item.modifiedOn);
const modifiedDate = getCorrectDate(locale || "", item.modifiedOn || "");
return (
<>
<StyledRowWrapper className="handle">
<StyledTableRow
contextOptions={contextOptions}
contextOptions={contextOptions || []}
onClick={handleRowClick}
getContextModel={getContextMenuModel}
>
<TableCell className={"table-container_file-name-cell"}>
<NameCell
@ -86,14 +89,13 @@ const Row = (props: RowProps) => {
setSelection={setSelection}
/>
</TableCell>
<TableCell>
<TableCell className="">
<CreatorCell
avatar={item.creatorAvatar || ""}
displayName={item.creatorDisplayName || ""}
/>
</TableCell>
<TableCell>
{/* @ts-ignore */}
<TableCell className="">
<Text
as="span"
fontWeight={400}
@ -102,8 +104,7 @@ const Row = (props: RowProps) => {
{modifiedDate}
</Text>
</TableCell>
<TableCell>
{/* @ts-ignore */}
<TableCell className="">
<Text
as="span"
fontWeight={400}
@ -117,7 +118,7 @@ const Row = (props: RowProps) => {
/>
</Text>
</TableCell>
<TableCell>
<TableCell className="">
<ToggleButton
className="toggle toggleButton"
isChecked={item.enabled}

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

@ -1,10 +1,7 @@
import styled, { css } from "styled-components";
//@ts-ignore
import TableContainer from "@docspace/components/table-container/TableContainer";
//@ts-ignore
import TableRow from "@docspace/components/table-container/TableRow";
import { Base } from "@docspace/components/themes";
import { TableRow, TableContainer } from "@docspace/shared/components/table";
import { Base } from "@docspace/shared/themes";
export const TableWrapper = styled(TableContainer)`
margin-top: 0px;

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

@ -1,4 +1,6 @@
import { IClientProps } from "@docspace/common/utils/oauth/interfaces";
import { IClientProps } from "@docspace/shared/utils/oauth/interfaces";
import { TTranslation } from "@docspace/shared/types";
import { ContextMenuModel } from "@docspace/shared/components/context-menu";
export interface TableViewProps {
items: IClientProps[];
@ -8,11 +10,9 @@ export interface TableViewProps {
selection?: string[];
setSelection?: (clientId: string) => void;
getContextMenuItems?: (
t: any,
t: TTranslation,
item: IClientProps
) => {
[key: string]: any | string | boolean | ((clientId: string) => void);
}[];
) => ContextMenuModel[];
bufferSelection?: IClientProps | null;
activeClients?: string[];
hasNextPage?: boolean;
@ -23,7 +23,7 @@ export interface TableViewProps {
export interface HeaderProps {
sectionWidth: number;
tableRef: HTMLDivElement;
tableRef: HTMLDivElement | null;
columnStorageName: string;
tagRef: (node: HTMLDivElement) => void;
}
@ -34,11 +34,9 @@ export interface RowProps {
inProgress: boolean;
tagCount: number;
getContextMenuItems?: (
t: any,
t: TTranslation,
item: IClientProps
) => {
[key: string]: any | string | boolean | ((clientId: string) => void);
}[];
) => ContextMenuModel[];
setSelection?: (clientId: string) => void;
changeClientStatus?: (clientId: string, status: boolean) => Promise<void>;
}

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

@ -1,8 +1,12 @@
import React from "react";
import styled from "styled-components";
import Text from "@docspace/components/text";
import Avatar from "@docspace/components/avatar";
import { Text } from "@docspace/shared/components/text";
import {
Avatar,
AvatarRole,
AvatarSize,
} from "@docspace/shared/components/avatar";
const StyledAvatar = styled(Avatar)`
width: 16px;
@ -21,16 +25,13 @@ interface CreatorCellProps {
const CreatorCell = ({ avatar, displayName }: CreatorCellProps) => {
return (
<>
<StyledAvatar source={avatar} size={"min"} />
<StyledAvatar
source={avatar}
size={AvatarSize.min}
role={AvatarRole.user}
/>
{/* @ts-ignore */}
<Text
className={"description-text"}
type="page"
fontWeight="600"
fontSize="13px"
isTextOverflow
>
<Text className={"description-text"} fontWeight="600" fontSize="13px">
{displayName}
</Text>
</>

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

@ -1,11 +1,10 @@
import React from "react";
import styled from "styled-components";
import Text from "@docspace/components/text";
import Checkbox from "@docspace/components/checkbox";
//@ts-ignore
import TableCell from "@docspace/components/table-container/TableCell";
import Loader from "@docspace/components/loader";
import { Text } from "@docspace/shared/components/text";
import { Checkbox } from "@docspace/shared/components/checkbox";
import { TableCell } from "@docspace/shared/components/table";
import { Loader, LoaderTypes } from "@docspace/shared/components/loader";
const StyledContainer = styled.div`
.table-container_row-checkbox {
@ -50,15 +49,11 @@ const NameCell = ({
{inProgress ? (
<Loader
className="table-container_row-loader"
type="oval"
type={LoaderTypes.oval}
size="16px"
/>
) : (
<TableCell
className="table-container_element-wrapper"
hasAccess={true}
checked={isChecked}
>
<TableCell className="table-container_element-wrapper">
<StyledContainer className="table-container_element-container">
<div className="table-container_element">
{icon && <StyledImage src={icon} alt={"App icon"} />}
@ -73,14 +68,7 @@ const NameCell = ({
</TableCell>
)}
{/* @ts-ignore */}
<Text
type="page"
title={name}
fontWeight="600"
fontSize="13px"
isTextOverflow
>
<Text title={name} fontWeight="600" fontSize="13px">
{name}
</Text>
</>

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

@ -3,8 +3,7 @@ import { inject, observer } from "mobx-react";
//@ts-ignore
import elementResizeDetectorMaker from "element-resize-detector";
//@ts-ignore
import TableBody from "@docspace/components/table-container/TableBody";
import { TableBody } from "@docspace/shared/components/table";
//@ts-ignore
import { OAuthStoreProps } from "SRC_DIR/store/OAuthStore";
@ -98,12 +97,18 @@ const TableView = ({
const columnStorageName = `${COLUMNS_SIZE}=${userId}`;
const fetchMoreFiles = React.useCallback(
async ({ startIndex }: { startIndex: number; stopIndex: number }) => {
await fetchNextClients?.(startIndex);
},
[]
);
return (
<TableWrapper forwardedRef={tableRef} useReactWindow>
<Header
sectionWidth={sectionWidth}
//@ts-ignore
tableRef={tableRef}
tableRef={tableRef.current}
columnStorageName={columnStorageName}
tagRef={onSetTagRef}
/>
@ -112,14 +117,9 @@ const TableView = ({
useReactWindow
columnStorageName={columnStorageName}
filesLength={items.length}
fetchMoreFiles={({
startIndex,
}: {
startIndex: number;
stopIndex: number;
}) => fetchNextClients && fetchNextClients(startIndex)}
hasMoreFiles={hasNextPage}
itemCount={itemCount}
fetchMoreFiles={fetchMoreFiles}
hasMoreFiles={hasNextPage || false}
itemCount={itemCount || 0}
>
{items.map((item) => (
<Row

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

@ -1,12 +1,11 @@
import styled from "styled-components";
import { useTranslation } from "react-i18next";
//@ts-ignore
import { ClientProps } from "@docspace/common/utils/oauth/interfaces";
import { IClientProps } from "@docspace/shared/utils/oauth/interfaces";
import { TTranslation } from "@docspace/shared/types";
import { Text } from "@docspace/shared/components/text";
import Text from "@docspace/components/text";
//@ts-ignore
import { Consumer } from "@docspace/components/utils/context";
import { Consumer } from "@docspace/shared/utils/context";
//@ts-ignore
import { ViewAsType } from "SRC_DIR/store/OAuthStore";
@ -37,8 +36,8 @@ export const StyledContainer = styled.div`
`;
interface ListProps {
t: any;
clients: ClientProps[];
t: TTranslation;
clients: IClientProps[];
viewAs: ViewAsType;
currentDeviceType: DeviceUnionType;
}
@ -63,17 +62,17 @@ const List = ({ clients, viewAs, currentDeviceType }: ListProps) => {
</Text>
<RegisterNewButton t={t} currentDeviceType={currentDeviceType} />
<Consumer>
{(context: { sectionWidth: number; sectionHeight: number }) => (
{(context) => (
<>
{viewAs === "table" ? (
<TableView
items={clients || []}
sectionWidth={context.sectionWidth}
sectionWidth={context.sectionWidth || 0}
/>
) : (
<RowView
items={clients || []}
sectionWidth={context.sectionWidth}
sectionWidth={context.sectionWidth || 0}
/>
)}
</>

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

@ -3,25 +3,25 @@ import { inject, observer } from "mobx-react";
import styled from "styled-components";
import { useTranslation } from "react-i18next";
import { IClientProps } from "@docspace/common/utils/oauth/interfaces";
import { IClientProps } from "@docspace/shared/utils/oauth/interfaces";
//@ts-ignore
import ModalDialog from "@docspace/components/modal-dialog";
//@ts-ignore
import SocialButton from "@docspace/components/social-button";
import Text from "@docspace/components/text";
//@ts-ignore
import Textarea from "@docspace/components/textarea";
import {
ModalDialog,
ModalDialogType,
} from "@docspace/shared/components/modal-dialog";
import { SocialButton } from "@docspace/shared/components/social-button";
import { Text } from "@docspace/shared/components/text";
import { Textarea } from "@docspace/shared/components/textarea";
import OnlyofficeLight from "PUBLIC_DIR/images/onlyoffice.light.react.svg";
import OnlyofficeDark from "PUBLIC_DIR/images/onlyoffice.dark.react.svg";
//@ts-ignore
import { OAuthStoreProps } from "SRC_DIR/store/OAuthStore";
import Button from "@docspace/components/button";
import { Base } from "@docspace/components/themes";
import { generatePKCEPair } from "@docspace/common/utils/oauth";
import { AuthenticationMethod } from "@docspace/common/utils/oauth/enums";
import { Button, ButtonSize } from "@docspace/shared/components/button";
import { Base } from "@docspace/shared/themes";
import { generatePKCEPair } from "@docspace/shared/utils/oauth";
import { AuthenticationMethod } from "@docspace/shared/enums";
const StyledContainer = styled.div`
width: 100%;
@ -196,11 +196,8 @@ const PreviewDialog = ({
const getLink = () => {
return `${
window.location.origin
}/oauth2/authorize?response_type=code&client_id=${
client?.clientId
}&redirect_uri=${
client?.redirectUris[0]
}&scope=${encodingScopes}&state=${state}${
}/oauth2/authorize?response_type=code&client_id=${client?.clientId}&redirect_uri=${client
?.redirectUris[0]}&scope=${encodingScopes}&state=${state}${
isClientSecretPost
? ""
: `&code_challenge_method=S256&code_challenge=${codeChallenge}`
@ -226,7 +223,7 @@ const PreviewDialog = ({
return (
<ModalDialog
visible={visible}
displayType={"aside"}
displayType={ModalDialogType.aside}
onClose={onClose}
withFooterBorder
>
@ -245,7 +242,6 @@ const PreviewDialog = ({
</StyledPreviewContainer>
<StyledBlocksContainer>
<div className="block-container">
{/* @ts-ignore */}
<Text
fontWeight={600}
lineHeight={"20px"}
@ -263,7 +259,6 @@ const PreviewDialog = ({
/>
</div>
<div className="block-container">
{/* @ts-ignore */}
<Text
fontWeight={600}
lineHeight={"20px"}
@ -281,7 +276,6 @@ const PreviewDialog = ({
/>
</div>
<div className="block-container">
{/* @ts-ignore */}
<Text
fontWeight={600}
lineHeight={"20px"}
@ -299,7 +293,6 @@ const PreviewDialog = ({
/>
</div>
<div className="block-container">
{/* @ts-ignore */}
<Text
fontWeight={600}
lineHeight={"20px"}
@ -318,7 +311,6 @@ const PreviewDialog = ({
</div>
<div className="block-container">
{/* @ts-ignore */}
<Text
fontWeight={600}
lineHeight={"20px"}
@ -338,7 +330,6 @@ const PreviewDialog = ({
{!isClientSecretPost && (
<div className="block-container">
{/* @ts-ignore */}
<Text
fontWeight={600}
lineHeight={"20px"}
@ -361,8 +352,7 @@ const PreviewDialog = ({
</ModalDialog.Body>
<ModalDialog.Footer>
<Button
// @ts-ignore
size={"normal"}
size={ButtonSize.normal}
scale
label={t("Common:OkButton")}
onClick={onClose}

5
packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/RegisterNewButton/RegisterNewButton.types.ts
View File

@ -1,6 +1,9 @@
import { TTranslation } from "@docspace/shared/types";
//@ts-ignore
import { DeviceUnionType } from "SRC_DIR/Hooks/useViewEffect";
export interface RegisterNewButtonProps {
t: any;
t: TTranslation;
currentDeviceType?: DeviceUnionType;
}

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

@ -1,6 +1,6 @@
import { useNavigate } from "react-router-dom";
import Button from "@docspace/components/button";
import { Button, ButtonSize } from "@docspace/shared/components/button";
import { RegisterNewButtonProps } from "./RegisterNewButton.types";
@ -16,11 +16,12 @@ const RegisterNewButton = ({
return (
<Button
//@ts-ignore
className="add-button"
size={currentDeviceType !== "desktop" ? "normal" : "small"}
size={
currentDeviceType !== "desktop" ? ButtonSize.normal : ButtonSize.small
}
label={t("RegisterNewApp")}
primary={true}
primary
onClick={onClick}
/>
);

26
packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/ResetDialog.tsx
View File

@ -3,15 +3,16 @@ import { useParams } from "react-router-dom";
import { inject, observer } from "mobx-react";
import { useTranslation, Trans } from "react-i18next";
// @ts-ignore
import ModalDialog from "@docspace/components/modal-dialog";
// @ts-ignore
import Button from "@docspace/components/button";
// @ts-ignore
import toastr from "@docspace/components/toast/toastr";
import {
ModalDialog,
ModalDialogType,
} from "@docspace/shared/components/modal-dialog";
import { Button, ButtonSize } from "@docspace/shared/components/button";
import { toastr } from "@docspace/shared/components/toast";
// @ts-ignore
import { OAuthStoreProps } from "SRC_DIR/store/OAuthStore";
import { TData } from "@docspace/shared/components/toast/Toast.type";
interface ResetDialogProps {
isVisible?: boolean;
@ -34,8 +35,9 @@ const ResetDialog = (props: ResetDialogProps) => {
setIsRequestRunning(true);
onClose?.();
} catch (error) {
toastr.error(error);
} catch (error: unknown) {
const e = error as TData;
toastr.error(e);
onClose?.();
}
};
@ -45,7 +47,7 @@ const ResetDialog = (props: ResetDialogProps) => {
isLoading={!ready}
visible={isVisible}
onClose={onClose}
displayType="modal"
displayType={ModalDialogType.modal}
>
<ModalDialog.Header>{t("ResetHeader")}</ModalDialog.Header>
<ModalDialog.Body>
@ -53,22 +55,20 @@ const ResetDialog = (props: ResetDialogProps) => {
</ModalDialog.Body>
<ModalDialog.Footer>
<Button
// @ts-ignore
className="delete-button"
key="DeletePortalBtn"
label={t("Common:OkButton")}
size="normal"
size={ButtonSize.normal}
scale
primary={true}
isLoading={isRequestRunning}
onClick={onResetClick}
/>
<Button
// @ts-ignore
className="cancel-button"
key="CancelDeleteBtn"
label={t("Common:CancelButton")}
size="normal"
size={ButtonSize.normal}
scale
isDisabled={isRequestRunning}
onClick={onClose}

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

@ -2,14 +2,14 @@ import React from "react";
import { inject, observer } from "mobx-react";
import { useTranslation } from "react-i18next";
import { IClientProps } from "@docspace/common/utils/oauth/interfaces";
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";
//@ts-ignore
import { Consumer } from "@docspace/components/utils/context";
import { Consumer } from "@docspace/shared/utils/context";
import { Text } from "@docspace/shared/components/text";
//@ts-ignore
@ -80,23 +80,22 @@ const AuthorizedApps = ({
<StyledContainer>
{consents && consents?.length > 0 ? (
<>
{/* @ts-ignore */}
<Text fontSize={"12px"} fontWeight={"400"} lineHeight={"16px"}>
{t("ProfileDescription")}
</Text>
<Consumer>
{(context: { sectionWidth: number; sectionHeight: number }) => (
{(context) => (
<>
{viewAs === "table" ? (
<TableView
items={consents || []}
sectionWidth={context.sectionWidth}
sectionWidth={context.sectionWidth || 0}
/>
) : (
<RowView
items={consents || []}
sectionWidth={context.sectionWidth}
sectionWidth={context.sectionWidth || 0}
/>
)}
</>

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

@ -1,9 +1,9 @@
// @ts-ignore
import EmptyScreenContainer from "@docspace/components/empty-screen-container";
import { EmptyScreenContainer } from "@docspace/shared/components/empty-screen-container";
import { TTranslation } from "@docspace/shared/types";
import EmptyScreenPersonsSvgUrl from "PUBLIC_DIR/images/empty_screen_userfields.svg?url";
const EmptyScreen = ({ t }: { t: any }) => {
const EmptyScreen = ({ t }: { t: TTranslation }) => {
return (
<EmptyScreenContainer
imageSrc={EmptyScreenPersonsSvgUrl}

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

@ -1,12 +1,16 @@
import React from "react";
import { useTranslation, Trans } from "react-i18next";
//@ts-ignore
import ModalDialog from "@docspace/components/modal-dialog";
import Text from "@docspace/components/text";
import Button from "@docspace/components/button";
import {
ModalDialog,
ModalDialogType,
} from "@docspace/shared/components/modal-dialog";
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/common/utils/oauth/interfaces";
import { IClientProps } from "@docspace/shared/utils/oauth/interfaces";
interface RevokeDialogProps {
visible: boolean;
@ -77,30 +81,27 @@ const RevokeDialog = ({
autoMaxHeight
withFooterBorder={isMobile}
onClose={onCloseAction}
displayType={"modal"}
displayType={ModalDialogType.modal}
>
<ModalDialog.Header>{t("RevokeConsent")}</ModalDialog.Header>
<ModalDialog.Body>
{/* @ts-ignore */}
<Text style={{ marginBottom: "16px" }}>{firstDesc}</Text>
{/* @ts-ignore */}
<Text>{secondDesc}</Text>
</ModalDialog.Body>
<ModalDialog.Footer>
<Button
// @ts-ignore
label={t("Revoke")}
primary
scale={isMobile}
size={"normal"}
size={ButtonSize.normal}
isLoading={isRequestRunning}
onClick={onRevokeAction}
/>
<Button
// @ts-ignore
label={t("Common:CancelButton")}
scale={isMobile}
size={"normal"}
size={ButtonSize.normal}
isDisabled={isRequestRunning}
onClick={onCloseAction}
/>

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

@ -1,8 +1,7 @@
import { useNavigate } from "react-router-dom";
import { useTranslation } from "react-i18next";
//@ts-ignore
import Row from "@docspace/components/row";
import { Row } from "@docspace/shared/components/row";
import { RowContent } from "./RowContent";
import { RowProps } from "./RowView.types";
@ -21,8 +20,7 @@ export const OAuthRow = (props: RowProps) => {
const { t } = useTranslation(["OAuth", "Common", "Files"]);
const contextOptions =
getContextMenuItems && getContextMenuItems(t, item, false, false);
const contextOptions = getContextMenuItems?.(t, item, false, false) || [];
const element = (
<img style={{ borderRadius: "3px" }} src={item.logo} alt={"App logo"} />
@ -31,15 +29,15 @@ export const OAuthRow = (props: RowProps) => {
return (
<>
<Row
sectionWidth={sectionWidth}
key={item.clientId}
data={item}
// data={item}
contextOptions={contextOptions}
element={element}
mode={"modern"}
checked={isChecked}
inProgress={inProgress}
onSelect={() => setSelection && setSelection(item.clientId)}
onRowClick={() => {}}
>
<RowContent
sectionWidth={sectionWidth}

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

@ -1,7 +1,7 @@
import React from "react";
import Text from "@docspace/components/text";
import Link from "@docspace/components/link";
import { Text } from "@docspace/shared/components/text";
import { Link, LinkTarget, LinkType } from "@docspace/shared/components/link";
import {
StyledRowContent,
@ -15,7 +15,6 @@ export const RowContent = ({ sectionWidth, item }: RowContentProps) => {
<StyledRowContent sectionWidth={sectionWidth}>
<ContentWrapper>
<FlexWrapper>
{/* @ts-ignore */}
<Text
fontWeight={600}
fontSize="14px"
@ -25,14 +24,12 @@ export const RowContent = ({ sectionWidth, item }: RowContentProps) => {
</Text>
</FlexWrapper>
{/* @ts-ignore */}
<Text fontWeight={600} fontSize="12px" color="#A3A9AE">
{/* @ts-ignore */}
<Link
color="#A3A9AE"
href={item.websiteUrl}
type={"action"}
target={"_blank"}
type={LinkType.page}
target={LinkTarget.blank}
isHovered
>
{item.websiteUrl}

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

@ -1,9 +1,7 @@
import styled from "styled-components";
//@ts-ignore
import RowContainer from "@docspace/components/row-container";
//@ts-ignore
import RowContent from "@docspace/components/row-content";
import { RowContainer } from "@docspace/shared/components/row-container";
import { RowContent } from "@docspace/shared/components/row-content";
export const StyledRowContainer = styled(RowContainer)`
margin-top: 0px;

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

@ -1,4 +1,6 @@
import { IClientProps } from "@docspace/common/utils/oauth/interfaces";
import { IClientProps } from "@docspace/shared/utils/oauth/interfaces";
import { ContextMenuModel } from "@docspace/shared/components/context-menu";
import { TTranslation } from "@docspace/shared/types";
export interface RowViewProps {
items: IClientProps[];
@ -7,13 +9,11 @@ export interface RowViewProps {
selection?: string[];
setSelection?: (clientId: string) => void;
getContextMenuItems?: (
t: any,
t: TTranslation,
item: IClientProps,
isInfo: boolean,
isSettings: boolean
) => {
[key: string]: any | string | boolean | ((clientId: string) => void);
}[];
) => ContextMenuModel[];
activeClients?: string[];
hasNextPage?: boolean;
itemCount?: number;
@ -27,13 +27,11 @@ export interface RowProps {
inProgress: boolean;
sectionWidth: number;
getContextMenuItems?: (
t: any,
t: TTranslation,
item: IClientProps,
isInfo: boolean,
isSettings: boolean
) => {
[key: string]: any | string | boolean | ((clientId: string) => void);
}[];
) => ContextMenuModel[];
setSelection?: (clientId: string) => void;
changeClientStatus?: (clientId: string, status: boolean) => Promise<void>;
}

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

@ -26,19 +26,22 @@ const RowView = (props: RowViewProps) => {
fetchNextClients,
} = props;
const fetchMoreFiles = React.useCallback(
async ({ startIndex }: { startIndex: number; stopIndex: number }) => {
await fetchNextClients?.(startIndex);
},
[]
);
return (
<StyledRowContainer
itemHeight={59}
filesLength={items.length}
fetchMoreFiles={({
startIndex,
}: {
startIndex: number;
stopIndex: number;
}) => fetchNextClients && fetchNextClients(startIndex)}
hasMoreFiles={hasNextPage}
itemCount={itemCount}
useReactWindow={true}
fetchMoreFiles={fetchMoreFiles}
hasMoreFiles={hasNextPage || false}
itemCount={itemCount || 0}
useReactWindow
onScroll={() => {}}
>
{items.map((item) => (
<OAuthRow

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

@ -1,7 +1,6 @@
import { useTranslation } from "react-i18next";
//@ts-ignore
import TableHeader from "@docspace/components/table-container/TableHeader";
import { TTableColumn, TableHeader } from "@docspace/shared/components/table";
import { HeaderProps } from "./TableView.types";
@ -9,13 +8,7 @@ const Header = (props: HeaderProps) => {
const { sectionWidth, tableRef, columnStorageName, tagRef } = props;
const { t } = useTranslation(["Common", "OAuth"]);
const defaultColumns: {
[key: string]:
| string
| number
| boolean
| ((key: string, e: any) => void | undefined);
}[] = [
const defaultColumns: TTableColumn[] = [
{
key: "App",
title: t("Apps"),
@ -43,12 +36,10 @@ const Header = (props: HeaderProps) => {
return (
<TableHeader
checkboxSize="48px"
containerRef={tableRef}
containerRef={{ current: tableRef }}
columns={defaultColumns}
columnStorageName={columnStorageName}
sectionWidth={sectionWidth}
checkboxMargin="12px"
showSettings={false}
useReactWindow
infoPanelVisible={false}

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

@ -1,15 +1,12 @@
import { useTranslation } from "react-i18next";
//@ts-ignore
import TableCell from "@docspace/components/table-container/TableCell";
import { TableCell } from "@docspace/shared/components/table";
import { Text } from "@docspace/shared/components/text";
import Text from "@docspace/components/text";
import getCorrectDate from "@docspace/shared/utils/getCorrectDate";
//@ts-ignore
import getCorrectDate from "@docspace/components/utils/getCorrectDate";
//@ts-ignore
import { getCookie } from "@docspace/components/utils/cookie";
import Link from "@docspace/components/link";
import { getCookie } from "@docspace/shared/utils/cookie";
import { Link, LinkTarget, LinkType } from "@docspace/shared/components/link";
import NameCell from "./columns/name";
@ -28,17 +25,22 @@ const Row = (props: RowProps) => {
const { t } = useTranslation(["OAuth", "Common", "Files"]);
const contextOptions =
getContextMenuItems && getContextMenuItems(t, item, false, false);
const contextOptions = getContextMenuItems?.(t, item, false, false);
const locale = getCookie("asc_language");
const modifiedDate = getCorrectDate(locale, item.modifiedOn);
const modifiedDate = getCorrectDate(locale || "", item.modifiedOn || "");
const getContextMenuModel = () =>
getContextMenuItems ? getContextMenuItems(t, item, false, false) : [];
return (
<>
<StyledRowWrapper className="handle">
<StyledTableRow contextOptions={contextOptions}>
<StyledTableRow
contextOptions={contextOptions}
getContextModel={getContextMenuModel}
>
<TableCell className={"table-container_file-name-cell"}>
<NameCell
name={item.name}
@ -50,19 +52,17 @@ const Row = (props: RowProps) => {
/>
</TableCell>
<TableCell>
{/* @ts-ignore */}
<TableCell className="">
<Text
as="span"
fontWeight={400}
className="mr-8 textOverflow description-text"
>
{/* @ts-ignore */}
<Link
className="description-text"
href={item.websiteUrl}
type={"action"}
target={"_blank"}
type={LinkType.action}
target={LinkTarget.blank}
isHovered
>
{item.websiteUrl}
@ -70,8 +70,7 @@ const Row = (props: RowProps) => {
</Text>
</TableCell>
<TableCell>
{/* @ts-ignore */}
<TableCell className="">
<Text
as="span"
fontWeight={400}

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

@ -1,10 +1,7 @@
import styled, { css } from "styled-components";
//@ts-ignore
import TableContainer from "@docspace/components/table-container/TableContainer";
//@ts-ignore
import TableRow from "@docspace/components/table-container/TableRow";
import { Base } from "@docspace/components/themes";
import { TableRow, TableContainer } from "@docspace/shared/components/table";
import { Base } from "@docspace/shared/themes";
export const TableWrapper = styled(TableContainer)`
margin-top: 0px;

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

@ -1,4 +1,6 @@
import { IClientProps } from "@docspace/common/utils/oauth/interfaces";
import { IClientProps } from "@docspace/shared/utils/oauth/interfaces";
import { ContextMenuModel } from "@docspace/shared/components/context-menu";
import { TTranslation } from "@docspace/shared/types";
export interface TableViewProps {
items: IClientProps[];
@ -8,13 +10,11 @@ export interface TableViewProps {
selection?: string[];
setSelection?: (clientId: string) => void;
getContextMenuItems?: (
t: any,
t: TTranslation,
item: IClientProps,
isInfo: boolean,
isSettings: boolean
) => {
[key: string]: any | string | boolean | ((clientId: string) => void);
}[];
) => ContextMenuModel[];
bufferSelection?: IClientProps | null;
activeClients?: string[];
hasNextPage?: boolean;
@ -25,9 +25,9 @@ export interface TableViewProps {
export interface HeaderProps {
sectionWidth: number;
tableRef: HTMLDivElement;
tableRef: HTMLDivElement | null;
columnStorageName: string;
tagRef: (node: HTMLDivElement) => void;
tagRef?: (node: HTMLDivElement) => void;
}
export interface RowProps {
@ -35,13 +35,11 @@ export interface RowProps {
isChecked: boolean;
inProgress: boolean;
getContextMenuItems?: (
t: any,
t: TTranslation,
item: IClientProps,
isInfo: boolean,
isSettings: boolean
) => {
[key: string]: any | string | boolean | ((clientId: string) => void);
}[];
) => ContextMenuModel[];
setSelection?: (clientId: string) => void;
changeClientStatus?: (clientId: string, status: boolean) => Promise<void>;
}

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

@ -1,11 +1,10 @@
import React from "react";
import styled from "styled-components";
import Text from "@docspace/components/text";
import Checkbox from "@docspace/components/checkbox";
//@ts-ignore
import TableCell from "@docspace/components/table-container/TableCell";
import Loader from "@docspace/components/loader";
import { Text } from "@docspace/shared/components/text";
import { Checkbox } from "@docspace/shared/components/checkbox";
import { TableCell } from "@docspace/shared/components/table";
import { Loader, LoaderTypes } from "@docspace/shared/components/loader";
const StyledContainer = styled.div`
.table-container_row-checkbox {
@ -50,15 +49,11 @@ const NameCell = ({
{inProgress ? (
<Loader
className="table-container_row-loader"
type="oval"
type={LoaderTypes.oval}
size="16px"
/>
) : (
<TableCell
className="table-container_element-wrapper"
hasAccess={true}
checked={isChecked}
>
<TableCell className="table-container_element-wrapper">
<StyledContainer className="table-container_element-container">
<div className="table-container_element">
{icon && <StyledImage src={icon} alt={"App icon"} />}
@ -73,14 +68,7 @@ const NameCell = ({
</TableCell>
)}
{/* @ts-ignore */}
<Text
type="page"
title={name}
fontWeight="600"
fontSize="13px"
isTextOverflow
>
<Text title={name} fontWeight="600" fontSize="13px">
{name}
</Text>
</>

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

@ -1,8 +1,7 @@
import React from "react";
import { inject, observer } from "mobx-react";
//@ts-ignore
import TableBody from "@docspace/components/table-container/TableBody";
import { TableBody } from "@docspace/shared/components/table";
//@ts-ignore
import { OAuthStoreProps } from "SRC_DIR/store/OAuthStore";
@ -31,10 +30,11 @@ const TableView = ({
const tableRef = React.useRef<HTMLDivElement>(null);
const clickOutside = React.useCallback(
(e: any) => {
(e: MouseEvent) => {
const target = e.target as HTMLElement;
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;
@ -55,12 +55,18 @@ const TableView = ({
const columnStorageName = `${COLUMNS_SIZE}=${userId}`;
const fetchMoreFiles = React.useCallback(
async ({ startIndex }: { startIndex: number; stopIndex: number }) => {
await fetchNextClients?.(startIndex);
},
[]
);
return (
<TableWrapper forwardedRef={tableRef} useReactWindow>
<Header
sectionWidth={sectionWidth}
//@ts-ignore
tableRef={tableRef}
tableRef={tableRef.current}
columnStorageName={columnStorageName}
/>
<TableBody
@ -68,14 +74,9 @@ const TableView = ({
useReactWindow
columnStorageName={columnStorageName}
filesLength={items.length}
fetchMoreFiles={({
startIndex,
}: {
startIndex: number;
stopIndex: number;
}) => fetchNextClients && fetchNextClients(startIndex)}
hasMoreFiles={hasNextPage}
itemCount={itemCount}
fetchMoreFiles={fetchMoreFiles}
hasMoreFiles={hasNextPage || false}
itemCount={itemCount || 0}
>
{items.map((item) => (
<Row

18
packages/common/utils/oauth/enums.ts
View File

@ -1,18 +0,0 @@
export const enum ScopeType {
read = "read",
write = "write",
openid = "openid",
}
export const enum ScopeGroup {
files = "files",
accounts = "accounts",
profiles = "profiles",
rooms = "rooms",
openid = "openid",
}
export const enum AuthenticationMethod {
none = "none",
"client_secret_post" = "client_secret_post",
}

59
packages/login/src/client/components/sub-components/Consent.tsx
View File

@ -3,26 +3,23 @@ import { useNavigate, useLocation } from "react-router-dom";
import styled from "styled-components";
import { useTranslation, Trans } from "react-i18next";
//@ts-ignore
import api from "@docspace/common/api";
import api from "@docspace/shared/api";
import ScopeList from "@docspace/common/utils/oauth/ScopeList";
import ScopeList from "@docspace/shared/utils/oauth/ScopeList";
//@ts-ignore
import FormWrapper from "@docspace/components/form-wrapper";
//@ts-ignore
import Button from "@docspace/components/button";
//@ts-ignore
import Text from "@docspace/components/text";
//@ts-ignore
import Link from "@docspace/components/link";
//@ts-ignore
import Avatar from "@docspace/components/avatar";
//@ts-ignore
import { Base } from "@docspace/components/themes";
import { FormWrapper } from "@docspace/shared/components/form-wrapper";
import { Button, ButtonSize } from "@docspace/shared/components/button";
import { Text } from "@docspace/shared/components/text";
import { Link, LinkTarget, LinkType } from "@docspace/shared/components/link";
import {
Avatar,
AvatarRole,
AvatarSize,
} from "@docspace/shared/components/avatar";
import { Base } from "@docspace/shared/themes";
import OAuthClientInfo from "./oauth-client-info";
import { deleteCookie, setCookie } from "@docspace/common/utils";
import { deleteCookie, setCookie } from "@docspace/shared/utils/cookie";
const StyledFormWrapper = styled(FormWrapper)`
width: 416px;
@ -52,7 +49,8 @@ const StyledFormWrapper = styled(FormWrapper)`
padding-top: 16px;
border-top: 1px solid ${(props) => props.theme.separatorColor};
border-top: 1px solid
${(props) => props.theme.oauth.infoDialog.separatorColor};
.block {
height: 40px;
@ -144,7 +142,7 @@ const Consent = ({
};
return (
<StyledFormWrapper id={"consent"} theme={theme}>
<StyledFormWrapper id={"consent"}>
<OAuthClientInfo
name={oauth.client.name}
logo={oauth.client.logo}
@ -163,11 +161,16 @@ const Consent = ({
<Button
onClick={onAllowClick}
label={"Allow"}
size={"normal"}
size={ButtonSize.normal}
scale
primary
/>
<Button onClick={onDenyClick} label={"Deny"} size={"normal"} scale />
<Button
onClick={onDenyClick}
label={"Deny"}
size={ButtonSize.normal}
scale
/>
</div>
<div className="description-container">
<Text fontWeight={400} fontSize={"13px"} lineHeight={"20px"}>
@ -176,10 +179,10 @@ const Consent = ({
governed by {{ nameApp: oauth.client.name }}
<Link
className={"login-link"}
type="page"
type={LinkType.page}
isHovered={false}
href={oauth.client.policyUrl}
target={"_blank"}
target={LinkTarget.blank}
noHover
>
privacy policy
@ -187,10 +190,10 @@ const Consent = ({
and
<Link
className={"login-link"}
type="page"
type={LinkType.page}
isHovered={false}
href={oauth.client.termsUrl}
target={"_blank"}
target={LinkTarget.blank}
noHover
>
terms of service
@ -202,14 +205,18 @@ const Consent = ({
</div>
<div className="user-container">
<div className="block">
<Avatar size={"min"} source={oauth.self?.avatarSmall} />
<Avatar
size={AvatarSize.min}
role={AvatarRole.user}
source={oauth.self?.avatarSmall || ""}
/>
<div className="user-info">
<Text lineHeight={"20px"}>
{t("SignedInAs")} {oauth.self?.email}
</Text>
<Link
className={"login-link"}
type="action"
type={LinkType.action}
isHovered={false}
noHover
lineHeight={"20px"}

52
packages/login/src/client/components/sub-components/LoginForm.tsx
View File

@ -6,10 +6,10 @@ import { PasswordInput } from "@docspace/shared/components/password-input";
import { Checkbox } from "@docspace/shared/components/checkbox";
import { HelpButton } from "@docspace/shared/components/help-button";
import { Text } from "@docspace/shared/components/text";
import { Link } from "@docspace/shared/components/link";
import { Link, LinkType } from "@docspace/shared/components/link";
import { useTranslation } from "react-i18next";
import ForgotPasswordModalDialog from "./forgot-password-modal-dialog";
import { Button } from "@docspace/shared/components/button";
import { Button, ButtonSize } from "@docspace/shared/components/button";
import { createPasswordHash } from "@docspace/shared/utils/common";
import { checkIsSSR } from "@docspace/shared/utils";
import { checkPwd } from "@docspace/shared/utils/desktop";
@ -22,14 +22,12 @@ import ReCAPTCHA from "react-google-recaptcha";
import { OAuthLinksContainer, StyledCaptcha } from "../StyledLogin";
import OAuthClientInfo from "./oauth-client-info";
import SelectUser from "./SelectUser";
import {
getClient,
getScopeList,
loginWithOAuth,
} from "@docspace/common/api/oauth";
import { getUser } from "@docspace/common/api/people";
import { onOAuthLogin } from "@docspace/common/api/oauth";
import { IClientProps, IScope } from "@docspace/common/utils/oauth/interfaces";
import { getClient, getScopeList } from "@docspace/shared/api/oauth";
import { getUser } from "@docspace/shared/api/people";
import { onOAuthLogin } from "@docspace/shared/api/oauth";
import { IClientProps, IScope } from "@docspace/shared/utils/oauth/interfaces";
import { setCookie } from "@docspace/shared/utils/cookie";
import { InputSize } from "@docspace/shared/components/text-input";
interface ILoginFormProps {
isLoading: boolean;
@ -228,7 +226,7 @@ const LoginForm: React.FC<ILoginFormProps> = ({
if (isOAuthPage) {
const requests = [];
setCookie("client_id", oauth?.clientId);
setCookie("client_id", oauth?.clientId || "");
requests.push(getClient(oauth?.clientId || ""));
requests.push(getScopeList());
@ -344,7 +342,7 @@ const LoginForm: React.FC<ILoginFormProps> = ({
)}
<>
<FieldContainer
isVertical={true}
isVertical
labelVisible={false}
hasError={isEmailErrorShow}
errorMessage={
@ -358,9 +356,9 @@ const LoginForm: React.FC<ILoginFormProps> = ({
hasError={isEmailErrorShow}
value={identifier}
placeholder={t("RegistrationEmailWatermark")}
size="large"
scale={true}
isAutoFocussed={true}
size={InputSize.large}
scale
isAutoFocussed
tabIndex={1}
isDisabled={isLoading}
autoComplete="username"
@ -373,14 +371,14 @@ const LoginForm: React.FC<ILoginFormProps> = ({
{(!IS_ROOMS_MODE || !isWithoutPasswordLogin) && (
<>
<FieldContainer
isVertical={true}
isVertical
labelVisible={false}
hasError={!passwordValid}
errorMessage={!password.trim() ? t("Common:RequiredField") : ""} //TODO: Add wrong password server error
>
<PasswordInput
className="password-input"
simpleView={true}
simpleView
passwordSettings={settings}
id="login_password"
inputName="password"
@ -388,8 +386,8 @@ const LoginForm: React.FC<ILoginFormProps> = ({
type="password"
hasError={!passwordValid}
inputValue={password}
size="large"
scale={true}
size={InputSize.large}
scale
tabIndex={1}
isDisabled={isLoading}
autoComplete="current-password"
@ -468,8 +466,8 @@ const LoginForm: React.FC<ILoginFormProps> = ({
id="login_submit"
className="login-button"
primary
size="medium"
scale={true}
size={ButtonSize.medium}
scale
label={
isLoading ? t("Common:LoadingProcessing") : t("Common:LoginButton")
}
@ -485,8 +483,8 @@ const LoginForm: React.FC<ILoginFormProps> = ({
{/*<Link
fontWeight="600"
fontSize="13px"
type="action"
isHovered={true}
type={LinkType.action}
isHovered
onClick={onLoginWithCodeClick}
>
{t("SignInWithCode")}
@ -498,8 +496,8 @@ const LoginForm: React.FC<ILoginFormProps> = ({
id="login_recover-link"
fontWeight="600"
fontSize="13px"
type="action"
isHovered={true}
type={LinkType.action}
isHovered
className="login-link recover-link"
onClick={openRecoverDialog}
>
@ -514,8 +512,8 @@ const LoginForm: React.FC<ILoginFormProps> = ({
<Link
fontWeight="600"
fontSize="13px"
type="action"
isHovered={true}
type={LinkType.action}
isHovered
onClick={onLoginWithPasswordClick}
>
{t("SignInWithPassword")}

16
packages/login/src/client/components/sub-components/oauth-client-info.tsx
View File

@ -2,10 +2,8 @@ import React from "react";
import styled from "styled-components";
import { Trans } from "react-i18next";
//@ts-ignore
import Text from "@docspace/components/text";
//@ts-ignore
import Link from "@docspace/components/link";
import { Text } from "@docspace/shared/components/text";
import { Link, LinkTarget, LinkType } from "@docspace/shared/components/link";
const StyledOAuthContainer = styled.div`
width: 100%;
@ -73,15 +71,15 @@ const OAuthClientInfo = ({
<Trans t={t} i18nKey={"ConsentSubHeader"} ns="Consent">
<Link
className={"login-link"}
type="page"
type={LinkType.page}
isHovered={false}
href={websiteUrl}
target={"_blank"}
target={LinkTarget.blank}
noHover
fontWeight={600}
fontSize={"16px"}
>
{{ name }}
{name}
</Link>{" "}
would like the ability to access the following data in{" "}
<strong>your DocSpace account</strong>:
@ -91,10 +89,10 @@ const OAuthClientInfo = ({
{t("Consent:ToContinue")}{" "}
<Link
className={"login-link"}
type="page"
type={LinkType.page}
isHovered={false}
href={websiteUrl}
target={"_blank"}
target={LinkTarget.blank}
noHover
fontWeight={600}
fontSize={"16px"}

4
packages/login/src/server/lib/helpers/index.ts
View File

@ -12,8 +12,8 @@ import {
} from "@docspace/shared/api/settings";
import { getUser } from "@docspace/shared/api/people";
import { checkIsAuthenticated } from "@docspace/shared/api/user";
import { getClient, getScopeList } from "@docspace/common/api/oauth";
import { getClient, getScopeList } from "@docspace/shared/api/oauth";
import { IScope } from "@docspace/shared/utils/oauth/interfaces";

4
packages/shared/api/index.ts
View File

@ -13,7 +13,7 @@ import * as rooms from "./rooms";
import * as plugins from "./plugins";
import * as management from "./management";
import * as oforms from "./oforms";
// import * as oauth from "./oauth";
import * as oauth from "./oauth";
export default {
Filter,
@ -30,6 +30,6 @@ export default {
rooms,
plugins,
oforms,
// oauth,
oauth,
management,
};

56
packages/common/api/oauth/index.ts → packages/shared/api/oauth/index.ts
View File

@ -1,10 +1,6 @@
//@ts-ignore
import { request } from "../client";
import {
transformToClientProps,
transformToClientReqDTO,
} from "./../../utils/oauth/index";
import { transformToClientProps } from "../../utils/oauth/index";
import {
IClientProps,
@ -18,13 +14,13 @@ import {
export const getClient = async (
clientId: string,
isAuth: boolean = true
isAuth: boolean = true,
): Promise<IClientProps | INoAuthClientProps> => {
if (!isAuth) {
const client: IClientResDTO = await request({
const client = (await request({
method: "get",
url: `/clients/${clientId}/info`,
});
})) as IClientResDTO;
return {
...client,
@ -32,22 +28,22 @@ export const getClient = async (
};
}
const client: IClientResDTO = await request({
const client = (await request({
method: "get",
url: `/clients/${clientId}`,
});
})) as IClientResDTO;
return transformToClientProps(client);
};
export const getClientList = async (
page: number,
limit: number
limit: number,
): Promise<IClientListProps> => {
const data: IClientListDTO = await request({
const data = (await request({
method: "get",
url: `/clients?page=${page}&limit=${limit}`,
});
})) as IClientListDTO;
const clients: IClientListProps = { ...data, content: [] as IClientProps[] };
@ -63,17 +59,17 @@ export const getClientList = async (
export const addClient = async (data: IClientReqDTO): Promise<IClientProps> => {
data.logout_redirect_uri = data.website_url;
const client: IClientResDTO = await request({
const client = (await request({
method: "post",
url: `/clients`,
data,
});
})) as IClientResDTO;
return transformToClientProps(client);
};
export const updateClient = async (clientId: string, data: IClientReqDTO) => {
const client: IClientResDTO = await request({
await request({
method: "put",
url: `/clients/${clientId}`,
data,
@ -82,7 +78,7 @@ export const updateClient = async (clientId: string, data: IClientReqDTO) => {
export const changeClientStatus = async (
clientId: string,
status: boolean
status: boolean,
): Promise<void> => {
await request({
method: "patch",
@ -92,12 +88,12 @@ export const changeClientStatus = async (
};
export const regenerateSecret = async (
clientId: string
clientId: string,
): Promise<{ client_secret: string }> => {
const clientSecret: { client_secret: string } = await request({
const clientSecret = (await request({
method: "patch",
url: `/clients/${clientId}/regenerate`,
});
})) as { client_secret: string };
return clientSecret;
};
@ -110,19 +106,19 @@ export const deleteClient = async (clientId: string): Promise<void> => {
};
export const getScope = async (name: string): Promise<IScope> => {
const scope: IScope = await request({
const scope = (await request({
method: "get",
url: `/scopes/${name}`,
});
})) as IScope;
return scope;
};
export const getScopeList = async (): Promise<IScope[]> => {
const scopeList: IScope[] = await request({
const scopeList = (await request({
method: "get",
url: `/scopes`,
});
})) as IScope[];
return scopeList;
};
@ -136,7 +132,7 @@ export const onOAuthLogin = () => {
data: formData,
withRedirect: true,
headers: {
"X-Disable-Redirect": true,
"X-Disable-Redirect": "true",
},
});
};
@ -144,7 +140,7 @@ export const onOAuthLogin = () => {
export const onOAuthSubmit = (
clientId: string,
clientState: string,
scope: string[]
scope: string[],
) => {
const formData = new FormData();
@ -161,7 +157,7 @@ export const onOAuthSubmit = (
data: formData,
withRedirect: true,
headers: {
"X-Disable-Redirect": true,
"X-Disable-Redirect": "true",
},
});
};
@ -178,20 +174,20 @@ export const onOAuthCancel = (clientId: string, clientState: string) => {
data: formData,
withRedirect: true,
headers: {
"X-Disable-Redirect": true,
"X-Disable-Redirect": "true",
},
});
};
export const getConsentList = async (): Promise<IClientProps[]> => {
const clients: any = await request({
const clients = await request({
method: "get",
url: "/clients/consents",
});
const consents: IClientProps[] = [];
clients.forEach((item: any) => {
clients.forEach((item) => {
const client = transformToClientProps(item.client);
if (!item.invalidated)

0
packages/shared/api/oauth/types.ts Normal file
View File

2
packages/shared/components/infinite-loader/InfiniteLoader.types.ts
View File

@ -9,7 +9,7 @@ export interface InfiniteLoaderProps {
loadMoreItems: (params: IndexRange) => Promise<void>;
itemSize?: number;
children: React.ReactNode[];
onScroll: () => void;
onScroll?: () => void;
isLoading?: boolean;
columnStorageName?: string;
columnInfoPanelStorageName?: string;

2
packages/shared/components/row/Row.types.tsx
View File

@ -30,7 +30,7 @@ export interface RowProps {
/** Sets a callback function that is triggered when a row element is selected. Returns data value. */
onSelect?: (checked: boolean, data?: TData) => void;
/** Sets a callback function that is triggered when any element except the checkbox and context menu is clicked. */
onRowClick: () => void;
onRowClick: (e: React.MouseEvent) => void;
/** Function that is invoked on clicking the icon button in the context-menu */
onContextClick?: (value?: boolean) => void;
/** Accepts css style */

53
packages/shared/components/table/Table.types.ts
View File

@ -27,23 +27,25 @@ export type TTableColumn = {
};
export interface TableHeaderProps {
containerRef: { current: HTMLDivElement };
containerRef: { current: HTMLDivElement | null };
columns: TTableColumn[];
sortBy: string;
sorted: boolean;
sortBy?: string;
sorted?: boolean;
columnStorageName: string;
sectionWidth: number;
onClick: () => void;
resetColumnsSize: boolean;
isLengthenHeader: boolean;
sortingVisible: boolean;
infoPanelVisible: boolean;
onClick?: () => void;
resetColumnsSize?: boolean;
isLengthenHeader?: boolean;
sortingVisible?: boolean;
infoPanelVisible?: boolean;
useReactWindow: boolean;
showSettings: boolean;
setHideColumns: (value: boolean) => void;
columnInfoPanelStorageName: string;
setHideColumns?: (value: boolean) => void;
columnInfoPanelStorageName?: string;
settingsTitle?: string;
tagRef: React.ForwardedRef<HTMLDivElement>;
tagRef?:
| React.ForwardedRef<HTMLDivElement>
| ((node: HTMLDivElement) => void);
theme: TTheme;
}
@ -56,7 +58,9 @@ export interface TableHeaderCellProps {
sortBy: string;
defaultSize?: number;
sortingVisible: boolean;
tagRef: React.ForwardedRef<HTMLDivElement>;
tagRef?:
| React.ForwardedRef<HTMLDivElement>
| ((node: HTMLDivElement) => void);
}
export interface TableSettingsProps {
@ -66,7 +70,7 @@ export interface TableSettingsProps {
export interface TableBodyProps {
columnStorageName: string;
columnInfoPanelStorageName: string;
columnInfoPanelStorageName?: string;
fetchMoreFiles: (params: IndexRange) => Promise<void>;
children: React.ReactNode[];
filesLength: number;
@ -74,26 +78,27 @@ export interface TableBodyProps {
itemCount: number;
itemHeight: number;
useReactWindow: boolean;
onScroll: () => void;
infoPanelVisible: boolean;
onScroll?: () => void;
infoPanelVisible?: boolean;
}
export interface TableRowProps {
fileContextClick: (value?: boolean) => void;
fileContextClick?: (value?: boolean) => void;
children: React.ReactNode;
contextOptions: ContextMenuModel[];
onHideContextMenu: () => void;
selectionProp: { className: string };
className: string;
style: React.CSSProperties;
title: string;
contextOptions?: ContextMenuModel[];
onHideContextMenu?: () => void;
selectionProp?: { className: string };
className?: string;
style?: React.CSSProperties;
title?: string;
getContextModel: () => ContextMenuModel[];
onClick?: (e: React.MouseEvent) => void;
}
export interface TableCellProps {
className: string;
forwardedRef: React.ForwardedRef<HTMLDivElement>;
style: React.CSSProperties;
forwardedRef?: React.ForwardedRef<HTMLDivElement>;
style?: React.CSSProperties;
children?: React.ReactNode;
}

47
packages/shared/components/table/TableHeader.tsx
View File

@ -1092,8 +1092,8 @@ class TableHeader extends React.Component<
? columnSize.right - e.clientX
: e.clientX - columnSize.left;
const tableContainer = containerRef.current.style.gridTemplateColumns;
const widths = tableContainer.split(" ");
const tableContainer = containerRef.current?.style.gridTemplateColumns;
const widths = tableContainer?.split(" ") as string[];
const minSize = column.dataset.minWidth
? column.dataset.minWidth
@ -1110,8 +1110,8 @@ class TableHeader extends React.Component<
}
const str = widths.join(" ");
containerRef.current.style.gridTemplateColumns = str;
if (containerRef.current)
containerRef.current.style.gridTemplateColumns = str;
if (this.headerRef?.current)
this.headerRef.current.style.gridTemplateColumns = str;
@ -1126,17 +1126,18 @@ class TableHeader extends React.Component<
containerRef,
} = this.props;
if (!infoPanelVisible) {
localStorage.setItem(
columnStorageName,
containerRef.current.style.gridTemplateColumns,
);
} else {
localStorage.setItem(
columnInfoPanelStorageName,
containerRef.current.style.gridTemplateColumns,
);
}
if (containerRef.current)
if (!infoPanelVisible) {
localStorage.setItem(
columnStorageName,
containerRef.current.style.gridTemplateColumns,
);
} else {
localStorage.setItem(
columnInfoPanelStorageName || "",
containerRef.current.style.gridTemplateColumns,
);
}
window.removeEventListener("mousemove", this.onMouseMove);
window.removeEventListener("mouseup", this.onMouseUp);
@ -1248,7 +1249,7 @@ class TableHeader extends React.Component<
let contentColumnsCountInfoPanel = 0;
const storageInfoPanelSize = localStorage.getItem(
columnInfoPanelStorageName,
columnInfoPanelStorageName || "",
);
if (storageInfoPanelSize) {
@ -1297,7 +1298,7 @@ class TableHeader extends React.Component<
if (hideColumns !== hideColumnsConst) {
this.setState({ hideColumns: hideColumnsConst });
setHideColumns(hideColumns);
setHideColumns?.(hideColumns);
}
if (hideColumns) {
@ -1569,11 +1570,11 @@ class TableHeader extends React.Component<
}
if (infoPanelVisible)
localStorage.setItem(columnInfoPanelStorageName, str);
localStorage.setItem(columnInfoPanelStorageName || "", str);
else localStorage.setItem(columnStorageName, str);
if (!infoPanelVisible) {
localStorage.removeItem(columnInfoPanelStorageName);
localStorage.removeItem(columnInfoPanelStorageName || "");
}
}
};
@ -1696,7 +1697,7 @@ class TableHeader extends React.Component<
if (str)
if (!infoPanelVisible) localStorage.setItem(columnStorageName, str);
else localStorage.setItem(columnInfoPanelStorageName, str);
else localStorage.setItem(columnInfoPanelStorageName || "", str);
this.onResize();
};
@ -1739,12 +1740,12 @@ class TableHeader extends React.Component<
key={column.key ?? "empty-cell"}
index={index}
column={column}
sorted={sorted}
sortBy={sortBy}
sorted={sorted || false}
sortBy={sortBy || ""}
resizable={resizable}
defaultSize={column.defaultSize}
onMouseDown={this.onMouseDown}
sortingVisible={sortingVisible}
sortingVisible={sortingVisible || false}
tagRef={tagRef}
/>
);

5
packages/shared/components/table/TableRow.tsx
View File

@ -48,11 +48,12 @@ const TableRow = (props: TableRowProps) => {
const renderContext =
Object.prototype.hasOwnProperty.call(props, "contextOptions") &&
contextOptions &&
contextOptions.length > 0;
const getOptions = () => {
fileContextClick?.();
return contextOptions;
return contextOptions || [];
};
return (
@ -72,7 +73,7 @@ const TableRow = (props: TableRowProps) => {
<ContextMenu
onHide={onHideContextMenu}
ref={cm}
model={contextOptions}
model={contextOptions || []}
getContextModel={getContextModel}
withBackdrop
/>

19
packages/shared/enums/index.ts
View File

@ -1,3 +1,22 @@
export const enum ScopeType {
read = "read",
write = "write",
openid = "openid",
}
export const enum ScopeGroup {
files = "files",
accounts = "accounts",
profiles = "profiles",
rooms = "rooms",
openid = "openid",
}
export const enum AuthenticationMethod {
none = "none",
"client_secret_post" = "client_secret_post",
}
/**
* Enum for employee activation status.
* @readonly

7
packages/shared/utils/axiosClient.ts
View File

@ -32,7 +32,7 @@ export type TRes = {
request?: {
responseType: string;
};
headers: { [key: string]: string };
headers: { [key: string]: boolean | string };
};
export type TReqOption = {
@ -172,7 +172,10 @@ class AxiosClient {
if (error) throw new Error(error);
if (response.headers["x-redirect-uri"] && options.withRedirect) {
return window.location.replace(response.headers["x-redirect-uri"]);
const redirectUri = response.headers["x-redirect-uri"];
if (typeof redirectUri === "string")
return window.location.replace(redirectUri);
}
if (!response || !response.data || response.isAxiosError) return null;

2
packages/shared/utils/getCorrectDate.ts
View File

@ -2,7 +2,7 @@ import moment from "moment-timezone";
export default function getCorrectDate(
locale: string,
date: string,
date: string | Date,
dateFormat = "L",
timeFormat = "LT",
) {

24
packages/common/utils/oauth/ScopeList.tsx → packages/shared/utils/oauth/ScopeList.tsx
View File

@ -1,12 +1,12 @@
import React from "react";
import styled from "styled-components";
//@ts-ignore
import { Base } from "@docspace/components/themes";
import { Base } from "../../themes";
import { ScopeType } from "../../enums";
import { TTranslation } from "../../types";
import { IFilteredScopes, IScope } from "./interfaces";
import { filterScopeByGroup } from ".";
import { ScopeType } from "./enums";
const StyledScopeList = styled.div`
width: 100%;
@ -46,43 +46,41 @@ interface IScopeListProps {
selectedScopes: string[];
scopes: IScope[];
t: any;
t: TTranslation;
}
const ScopeList = ({ selectedScopes, scopes, t }: IScopeListProps) => {
const [renderedScopes, setRenderedScopes] = React.useState<string[]>([]);
React.useEffect(() => {
const result = [];
const result: string[] = [];
const filteredScopes: IFilteredScopes = filterScopeByGroup(
selectedScopes,
scopes
scopes,
);
for (let key in filteredScopes) {
Object.keys(filteredScopes).forEach((key) => {
if (filteredScopes[key].isChecked) {
if (
filteredScopes[key].checkedType === ScopeType.read ||
filteredScopes[key].checkedType === ScopeType.openid
) {
//@ts-ignore
result.push(filteredScopes[key].read?.tKey || "");
} else {
//@ts-ignore
result.push(filteredScopes[key].write?.tKey || "");
}
}
}
});
setRenderedScopes([...result]);
}, [selectedScopes, scopes]);
return (
<StyledScopeList className="scope-list">
{renderedScopes.map((scope, index) => (
<StyledScopeItem key={`${scope}-${index}`}>
<div className="circle"></div>
{renderedScopes.map((scope) => (
<StyledScopeItem key={`${scope}`}>
<div className="circle" />
{t(`Common:${scope}`)}
</StyledScopeItem>
))}

13
packages/common/utils/oauth/index.ts → packages/shared/utils/oauth/index.ts
View File

@ -1,7 +1,8 @@
/* eslint-disable @typescript-eslint/naming-convention */
import crypto from "crypto-js";
import sha256 from "crypto-js/sha256";
import { AuthenticationMethod, ScopeGroup, ScopeType } from "./enums";
import { AuthenticationMethod, ScopeGroup, ScopeType } from "../../enums";
import {
IClientResDTO,
IClientReqDTO,
@ -11,7 +12,7 @@ import {
} from "./interfaces";
export const transformToClientProps = (
clientDto: IClientResDTO
clientDto: IClientResDTO,
): IClientProps => {
const {
client_id,
@ -67,7 +68,7 @@ export const transformToClientProps = (
};
export const transformToClientReqDTO = (
clientProps: IClientProps
clientProps: IClientProps,
): IClientReqDTO => {
const {
name,
@ -104,7 +105,7 @@ export const transformToClientReqDTO = (
export const getScopeTKeyDescription = (group: ScopeGroup, type: ScopeType) => {
const tKey = `OAuth${group.replace(
/^./,
group[0].toUpperCase()
group[0].toUpperCase(),
)}${type.replace(/^./, type[0].toUpperCase())}Description`;
return tKey;
@ -118,7 +119,7 @@ export const getScopeTKeyName = (group: ScopeGroup) => {
export const filterScopeByGroup = (
checkedScopes: string[],
scopes: IScope[]
scopes: IScope[],
) => {
const filteredScopes: IFilteredScopes = {};
@ -170,7 +171,7 @@ export const filterScopeByGroup = (
export function generatePKCEPair() {
const NUM_OF_BYTES = 36; // Total of 44 characters (1 Bytes = 2 char) (standard states that: 43 chars <= verifier <= 128 chars)
const HASH_ALG = "sha256";
// const HASH_ALG = "sha256";
const randomVerifier = crypto.lib.WordArray.random(NUM_OF_BYTES).toString();
const randomState = crypto.lib.WordArray.random(NUM_OF_BYTES).toString();

2
packages/common/utils/oauth/interfaces.ts → packages/shared/utils/oauth/interfaces.ts
View File

@ -1,4 +1,4 @@
import { AuthenticationMethod, ScopeGroup, ScopeType } from "./enums";
import { AuthenticationMethod, ScopeGroup, ScopeType } from "../../enums";
export interface IScope {
name: string;