diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/RowView/Row.tsx b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/RowView/Row.tsx
index 62328b4895..908a313c7e 100644
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/RowView/Row.tsx
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/RowView/Row.tsx
@@ -53,7 +53,9 @@ export const OAuthRow = (props: RowProps) => {
const contextOptions = getContextMenuItems && getContextMenuItems(t, item);
- const element = ;
+ const element = (
+
+ );
return (
<>
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/RowView/RowView.types.ts b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/RowView/RowView.types.ts
index fc3ab07033..0736053b47 100644
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/RowView/RowView.types.ts
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/RowView/RowView.types.ts
@@ -1,10 +1,10 @@
-import { ClientProps } from "@docspace/common/utils/oauth/interfaces";
+import { IClientProps } from "@docspace/common/utils/oauth/interfaces";
//@ts-ignore
import { ViewAsType } from "SRC_DIR/store/OAuthStore";
export interface RowViewProps {
- items: ClientProps[];
+ items: IClientProps[];
sectionWidth: number;
viewAs?: ViewAsType;
setViewAs?: (value: ViewAsType) => void;
@@ -12,25 +12,25 @@ export interface RowViewProps {
setSelection?: (clientId: string) => void;
getContextMenuItems?: (
t: any,
- item: ClientProps
+ item: IClientProps
) => {
[key: string]: any | string | boolean | ((clientId: string) => void);
}[];
activeClients?: string[];
hasNextPage?: boolean;
- totalElements?: number;
+ itemCount?: number;
fetchNextClients?: (startIndex: number) => Promise;
changeClientStatus?: (clientId: string, status: boolean) => Promise;
}
export interface RowProps {
- item: ClientProps;
+ item: IClientProps;
isChecked: boolean;
inProgress: boolean;
sectionWidth: number;
getContextMenuItems?: (
t: any,
- item: ClientProps
+ item: IClientProps
) => {
[key: string]: any | string | boolean | ((clientId: string) => void);
}[];
@@ -40,7 +40,7 @@ export interface RowProps {
export interface RowContentProps {
sectionWidth: number;
- item: ClientProps;
+ item: IClientProps;
isChecked: boolean;
inProgress: boolean;
handleToggleEnabled: () => void;
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/RowView/index.tsx b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/RowView/index.tsx
index d4e2a1d166..698e5f315d 100644
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/RowView/index.tsx
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/RowView/index.tsx
@@ -24,20 +24,10 @@ const RowView = (props: RowViewProps) => {
activeClients,
getContextMenuItems,
hasNextPage,
- totalElements,
+ itemCount,
fetchNextClients,
} = props;
- React.useEffect(() => {
- if (viewAs !== "table" && viewAs !== "row") return;
-
- if (sectionWidth < 1025 || isMobile) {
- viewAs !== "row" && setViewAs && setViewAs("row");
- } else {
- viewAs !== "table" && setViewAs && setViewAs("table");
- }
- }, [viewAs, setViewAs, sectionWidth]);
-
return (
{
stopIndex: number;
}) => fetchNextClients && fetchNextClients(startIndex)}
hasMoreFiles={hasNextPage}
- itemCount={totalElements}
+ itemCount={itemCount}
useReactWindow={true}
>
{items.map((item) => (
@@ -79,7 +69,7 @@ export default inject(
getContextMenuItems,
activeClients,
hasNextPage,
- totalElements,
+ itemCount,
fetchNextClients,
} = oauthStore;
@@ -92,7 +82,7 @@ export default inject(
activeClients,
getContextMenuItems,
hasNextPage,
- totalElements,
+ itemCount,
fetchNextClients,
};
}
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/TableView/Header.tsx b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/TableView/Header.tsx
index 8e6c147be7..d14aede963 100644
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/TableView/Header.tsx
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/TableView/Header.tsx
@@ -6,8 +6,8 @@ import TableHeader from "@docspace/components/table-container/TableHeader";
import { HeaderProps } from "./TableView.types";
const Header = (props: HeaderProps) => {
- const { sectionWidth, tableRef, columnStorageName } = props;
- const { t } = useTranslation(["Webhooks", "Common"]);
+ const { sectionWidth, tableRef, columnStorageName, tagRef } = props;
+ const { t } = useTranslation(["Common"]);
const defaultColumns: {
[key: string]:
@@ -44,11 +44,12 @@ const Header = (props: HeaderProps) => {
title: "Scopes",
resizable: true,
enable: true,
+ withTagRef: true,
minWidth: 150,
},
{
- key: "Enable",
- title: "Enable",
+ key: "State",
+ title: "State",
enable: true,
resizable: false,
defaultSize: 64,
@@ -66,6 +67,7 @@ const Header = (props: HeaderProps) => {
showSettings={false}
useReactWindow
infoPanelVisible={false}
+ tagRef={tagRef}
/>
);
};
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/TableView/Row.tsx b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/TableView/Row.tsx
index 7b1f9ad2a7..c1ebc5c537 100644
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/TableView/Row.tsx
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/TableView/Row.tsx
@@ -3,14 +3,20 @@ 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 NameCell from "./columns/name";
+import CreatorCell from "./columns/creator";
import { StyledRowWrapper, StyledTableRow } from "./TableView.styled";
import { RowProps } from "./TableView.types";
-import CreatorCell from "./columns/creator";
const Row = (props: RowProps) => {
const {
@@ -20,6 +26,7 @@ const Row = (props: RowProps) => {
inProgress,
getContextMenuItems,
setSelection,
+ tagCount,
} = props;
const navigate = useNavigate();
@@ -38,6 +45,8 @@ const Row = (props: RowProps) => {
if (
e.target.closest(".checkbox") ||
e.target.closest(".table-container_row-checkbox") ||
+ e.target.closest(".advanced-tag") ||
+ e.target.closest(".tag") ||
e.detail === 0
) {
return;
@@ -56,6 +65,9 @@ const Row = (props: RowProps) => {
const contextOptions = getContextMenuItems && getContextMenuItems(t, item);
+ const local = getCookie("asc_language");
+ const modifiedDate = getCorrectDate(local, item.modifiedOn);
+
return (
<>
@@ -81,8 +93,26 @@ const Row = (props: RowProps) => {
{/* @ts-ignore */}
-
- {item.description}
+
+ {modifiedDate}
+
+
+
+ {/* @ts-ignore */}
+
+ {}}
+ />
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/TableView/TableView.styled.ts b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/TableView/TableView.styled.ts
index b9d53df1b0..6fe25c6f9b 100644
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/TableView/TableView.styled.ts
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/TableView/TableView.styled.ts
@@ -39,6 +39,10 @@ const StyledTableRow = styled(TableRow)`
text-overflow: ellipsis;
}
+ .description-text {
+ color: #858585;
+ }
+
.toggleButton {
display: contents;
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/TableView/TableView.types.ts b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/TableView/TableView.types.ts
index 2038da98cc..2a0cfa6f94 100644
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/TableView/TableView.types.ts
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/TableView/TableView.types.ts
@@ -25,12 +25,14 @@ export interface HeaderProps {
sectionWidth: number;
tableRef: HTMLDivElement;
columnStorageName: string;
+ tagRef: (node: HTMLDivElement) => void;
}
export interface RowProps {
item: IClientProps;
isChecked: boolean;
inProgress: boolean;
+ tagCount: number;
getContextMenuItems?: (
t: any,
item: IClientProps
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/TableView/columns/creator.tsx b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/TableView/columns/creator.tsx
index c9ffef4b99..3306b5d60e 100644
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/TableView/columns/creator.tsx
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/TableView/columns/creator.tsx
@@ -2,22 +2,8 @@ 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 Avatar from "@docspace/components/avatar";
-const StyledContainer = styled.div`
- .table-container_row-checkbox {
- margin-left: -8px;
-
- width: 16px;
-
- padding: 16px 8px 16px 16px;
- }
-`;
-
const StyledAvatar = styled(Avatar)`
width: 16px;
min-width: 16px;
@@ -39,8 +25,8 @@ const CreatorCell = ({ avatar, displayName }: CreatorCellProps) => {
{/* @ts-ignore */}
{
const tableRef = React.useRef(null);
+ const tagRef = React.useRef(null);
+
+ const [tagCount, setTagCount] = React.useState(0);
+
+ React.useEffect(() => {
+ return () => {
+ if (!tagRef?.current) return;
+
+ elementResizeDetector.uninstall(tagRef.current);
+ };
+ }, []);
+
+ const onResize = React.useCallback(
+ (node: HTMLDivElement) => {
+ const element = tagRef?.current ? tagRef?.current : node;
+
+ if (element) {
+ const { width } = element.getBoundingClientRect();
+
+ const columns = Math.floor(width / 100);
+
+ if (columns != tagCount) setTagCount(columns);
+ }
+ },
+ [tagCount]
+ );
+
+ const onSetTagRef = React.useCallback((node: HTMLDivElement) => {
+ if (node) {
+ //@ts-ignore
+ tagRef.current = node;
+ onResize(node);
+
+ elementResizeDetector.listenTo(node, onResize);
+ }
+ }, []);
const clickOutside = React.useCallback(
(e: any) => {
@@ -62,6 +105,7 @@ const TableView = ({
//@ts-ignore
tableRef={tableRef}
columnStorageName={columnStorageName}
+ tagRef={onSetTagRef}
/>
))}
@@ -97,8 +142,6 @@ export default inject(
({ auth, oauthStore }: { auth: any; oauthStore: OAuthStoreProps }) => {
const { id: userId } = auth.userStore.user;
- const { currentDeviceType } = auth.settingsStore;
-
const {
viewAs,
setViewAs,
@@ -126,7 +169,6 @@ export default inject(
hasNextPage,
itemCount,
fetchNextClients,
- currentDeviceType,
};
}
)(observer(TableView));