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

Client:OAuth2:EditForm: add loader

Browse Source
This commit is contained in:
Timofey Boyko 2023-11-14 18:43:26 +03:00
parent ab1738172c
commit 139c1f2cb3
4 changed files with 325 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,6 @@
import styled from "styled-components";
import { mobile, tablet } from "@docspace/components/utils/device";
import { mobile } from "@docspace/components/utils/device";
const StyledContainer = styled.div`
width: 100%;
@ -10,6 +10,20 @@ const StyledContainer = styled.div`
flex-direction: column;
gap: 24px;
.loader {
rect {
width: 100%;
}
}
.scope-name-loader {
margin-bottom: 4px;
}
.scope-desc-loader {
margin-bottom: 2px;
}
`;
const StyledBlock = styled.div`

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

@ -5,6 +5,7 @@ import {
IClientReqDTO,
IScope,
} from "@docspace/common/utils/oauth/interfaces";
import { DeviceUnionType } from "@docspace/common/hooks/useViewEffect";
export interface InputProps {
value: string;
@ -52,10 +53,10 @@ export interface ClientFormProps {
regenerateSecret?: (clientId: string) => Promise<string>;
currentDeviceType?: string;
currentDeviceType?: DeviceUnionType;
}
export interface ClientStore {
auth: { settingsStore: { currentDeviceType: string } };
auth: { settingsStore: { currentDeviceType: DeviceUnionType } };
oauthStore: OAuthStoreProps;
}

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

@ -0,0 +1,302 @@
import React from "react";
//@ts-ignore
import RectangleLoader from "@docspace/common/components/Loaders/RectangleLoader";
import { DeviceUnionType } from "@docspace/common/hooks/useViewEffect";
import {
StyledBlock,
StyledButtonContainer,
StyledContainer,
StyledHeaderRow,
StyledInputBlock,
StyledInputGroup,
StyledInputRow,
StyledScopesCheckbox,
StyledScopesContainer,
StyledScopesName,
} from "./ClientForm.styled";
const HelpButtonSkeleton = () => {
return <RectangleLoader width={"12px"} height={"12px"} />;
};
const CheckboxSkeleton = ({ className }: { className?: string }) => {
return (
<RectangleLoader className={className} width={"16px"} height={"16px"} />
);
};
const ClientFormLoader = ({
currentDeviceType,
isEdit,
}: {
currentDeviceType?: DeviceUnionType;
isEdit: boolean;
}) => {
const buttonHeight = currentDeviceType !== "desktop" ? "40px" : "32px";
return (
<StyledContainer>
<StyledBlock>
<StyledHeaderRow>
<RectangleLoader width={"78px"} height={"16px"} />
</StyledHeaderRow>
<StyledInputBlock>
<StyledInputGroup>
<StyledHeaderRow>
<RectangleLoader width={"65px"} height={"13px"} />
</StyledHeaderRow>
<StyledInputRow>
<RectangleLoader width={"100%"} height={"32px"} />
</StyledInputRow>
</StyledInputGroup>
<StyledInputGroup>
<StyledHeaderRow>
<RectangleLoader width={"80px"} height={"13px"} />
</StyledHeaderRow>
<StyledInputRow>
<RectangleLoader width={"100%"} height={"32px"} />
</StyledInputRow>
</StyledInputGroup>
<StyledInputGroup>
<div className="label">
<RectangleLoader width={"60px"} height={"13px"} />
</div>
<div className="select">
<RectangleLoader width={"32px"} height={"32px"} />
<RectangleLoader width={"32px"} height={"32px"} />
<RectangleLoader width={"109px"} height={"13px"} />
</div>
<RectangleLoader width={"130px"} height={"12px"} />
</StyledInputGroup>
<StyledInputGroup>
<StyledHeaderRow>
<RectangleLoader width={"75px"} height={"13px"} />
</StyledHeaderRow>
<StyledInputRow>
<RectangleLoader width={"100%"} height={"60px"} />
</StyledInputRow>
</StyledInputGroup>
</StyledInputBlock>
</StyledBlock>
{isEdit && (
<StyledBlock>
<StyledHeaderRow>
<RectangleLoader width={"47px"} height={"16px"} />
<HelpButtonSkeleton />
</StyledHeaderRow>
<StyledInputBlock>
<StyledInputGroup>
<StyledHeaderRow>
<RectangleLoader width={"96px"} height={"13px"} />
</StyledHeaderRow>
<StyledInputRow>
<RectangleLoader width={"100%"} height={"32px"} />
</StyledInputRow>
</StyledInputGroup>
<StyledInputGroup>
<StyledHeaderRow>
<RectangleLoader width={"60px"} height={"13px"} />
</StyledHeaderRow>
<StyledInputRow>
<RectangleLoader
className={"loader"}
width={"calc(100% - 91px)"}
height={"32px"}
/>
<RectangleLoader width={"91px"} height={"32px"} />
</StyledInputRow>
</StyledInputGroup>
</StyledInputBlock>
</StyledBlock>
)}
<StyledBlock>
<StyledHeaderRow>
<RectangleLoader width={"96px"} height={"16px"} />
</StyledHeaderRow>
<StyledInputBlock>
<StyledInputGroup>
<StyledHeaderRow>
<RectangleLoader width={"87px"} height={"13px"} />
<HelpButtonSkeleton />
</StyledHeaderRow>
<StyledInputRow>
<RectangleLoader
className={"loader"}
width={"calc(100% - 40px)"}
height={"32px"}
/>
<RectangleLoader width={"32px"} height={"32px"} />
</StyledInputRow>
<RectangleLoader width={"162px"} height={"32px"} />
</StyledInputGroup>
<StyledInputGroup>
<StyledHeaderRow>
<RectangleLoader width={"96px"} height={"13px"} />
<HelpButtonSkeleton />
</StyledHeaderRow>
<StyledInputRow>
<RectangleLoader
className={"loader"}
width={"calc(100% - 40px)"}
height={"32px"}
/>
<RectangleLoader width={"32px"} height={"32px"} />
</StyledInputRow>
<RectangleLoader width={"162px"} height={"32px"} />
</StyledInputGroup>
</StyledInputBlock>
</StyledBlock>
<StyledScopesContainer>
<StyledHeaderRow className="header">
<RectangleLoader width={"111px"} height={"16px"} />
<HelpButtonSkeleton />
</StyledHeaderRow>
<RectangleLoader className="header" width={"34px"} height={"16px"} />
<RectangleLoader
className="header header-last"
width={"37px"}
height={"16px"}
/>
<StyledScopesName>
<RectangleLoader
className="scope-name-loader"
width={"98px"}
height={"14px"}
/>
<RectangleLoader
className={"scope-desc-loader"}
width={"200px"}
height={"12px"}
/>
<RectangleLoader
className={"scope-desc-loader"}
width={"230px"}
height={"12px"}
/>
</StyledScopesName>
<StyledScopesCheckbox>
<CheckboxSkeleton className="checkbox-read" />
</StyledScopesCheckbox>
<StyledScopesCheckbox>
<CheckboxSkeleton />
</StyledScopesCheckbox>
<StyledScopesName>
<RectangleLoader
className="scope-name-loader"
width={"98px"}
height={"14px"}
/>
<RectangleLoader
className={"scope-desc-loader"}
width={"200px"}
height={"12px"}
/>
<RectangleLoader
className={"scope-desc-loader"}
width={"230px"}
height={"12px"}
/>
</StyledScopesName>
<StyledScopesCheckbox>
<CheckboxSkeleton className="checkbox-read" />
</StyledScopesCheckbox>
<StyledScopesCheckbox>
<CheckboxSkeleton />
</StyledScopesCheckbox>
<StyledScopesName>
<RectangleLoader
className="scope-name-loader"
width={"98px"}
height={"14px"}
/>
<RectangleLoader
className={"scope-desc-loader"}
width={"200px"}
height={"12px"}
/>
<RectangleLoader
className={"scope-desc-loader"}
width={"230px"}
height={"12px"}
/>
</StyledScopesName>
<StyledScopesCheckbox>
<CheckboxSkeleton className="checkbox-read" />
</StyledScopesCheckbox>
<StyledScopesCheckbox>
<CheckboxSkeleton />
</StyledScopesCheckbox>
<StyledScopesName>
<RectangleLoader
className="scope-name-loader"
width={"98px"}
height={"14px"}
/>
<RectangleLoader
className={"scope-desc-loader"}
width={"200px"}
height={"12px"}
/>
<RectangleLoader
className={"scope-desc-loader"}
width={"230px"}
height={"12px"}
/>
</StyledScopesName>
<StyledScopesCheckbox>
<CheckboxSkeleton className="checkbox-read" />
</StyledScopesCheckbox>
<StyledScopesCheckbox>
<CheckboxSkeleton />
</StyledScopesCheckbox>
</StyledScopesContainer>
<StyledBlock>
<StyledHeaderRow>
<RectangleLoader width={"162px"} height={"16px"} />
</StyledHeaderRow>
<StyledInputBlock>
<StyledInputGroup>
<StyledHeaderRow>
<RectangleLoader width={"114px"} height={"13px"} />
<HelpButtonSkeleton />
</StyledHeaderRow>
<StyledInputRow>
<RectangleLoader width={"100%"} height={"32px"} />
</StyledInputRow>
</StyledInputGroup>
<StyledInputGroup>
<StyledHeaderRow>
<RectangleLoader width={"96px"} height={"13px"} />
<HelpButtonSkeleton />
</StyledHeaderRow>
<StyledInputRow>
<RectangleLoader width={"100%"} height={"32px"} />
</StyledInputRow>
</StyledInputGroup>
</StyledInputBlock>
</StyledBlock>
<StyledButtonContainer>
<RectangleLoader
width={currentDeviceType === "desktop" ? "86px" : "100%"}
height={buttonHeight}
/>
<RectangleLoader
width={currentDeviceType === "desktop" ? "86px" : "100%"}
height={buttonHeight}
/>
</StyledButtonContainer>
</StyledContainer>
);
};
export default ClientFormLoader;

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

@ -18,6 +18,7 @@ import ButtonsBlock from "./components/ButtonsBlock";
import { StyledContainer } from "./ClientForm.styled";
import { ClientFormProps, ClientStore } from "./ClientForm.types";
import ClientFormLoader from "./Loader";
const ClientForm = ({
id,
@ -237,7 +238,10 @@ const ClientForm = ({
return (
<StyledContainer>
{isLoading ? (
<div> Loading...</div>
<ClientFormLoader
isEdit={isEdit}
currentDeviceType={currentDeviceType}
/>
) : (
<>
<BasicBlock