Client:OAuth: fix table for rtl

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

@@ -66,6 +66,7 @@ export const OAuthRow = (props: RowProps) => {
       checked={isChecked}
       inProgress={inProgress}
       onSelect={() => setSelection && setSelection(item.clientId)}
+      className={`oauth2-row${isChecked ? " oauth2-row-selected" : ""}`}
     >
       <RowContent
         sectionWidth={sectionWidth}

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

@@ -2,6 +2,7 @@ import styled from "styled-components";
 
 import { RowContainer } from "@docspace/shared/components/row-container";
 import { RowContent } from "@docspace/shared/components/row-content";
+import { tablet } from "@docspace/shared/utils/device";
 
 export const StyledRowContainer = styled(RowContainer)`
   margin-top: 0px;
@@ -22,6 +23,51 @@ export const StyledRowContainer = styled(RowContainer)`
     height: 32px;
     max-height: 32px;
   }
+
+  .oauth2-row-selected {
+    background: ${(props) =>
+      props.theme.filesSection.rowView.checkedBackground};
+
+    cursor: pointer;
+    border-bottom: none;
+
+    margin-left: -24px;
+    margin-right: -24px;
+    padding-left: 24px;
+    padding-right: 24px;
+
+    @media ${tablet} {
+      margin-left: -16px;
+      margin-right: -16px;
+      padding-left: 16px;
+      padding-right: 16px;
+    }
+  }
+
+  .oauth2-row {
+    margin-top: -3px;
+    padding-top: 3px;
+
+    :hover {
+      background: ${(props) =>
+        props.theme.filesSection.rowView.checkedBackground};
+
+      cursor: pointer;
+      border-bottom: none;
+
+      margin-left: -24px;
+      margin-right: -24px;
+      padding-left: 24px;
+      padding-right: 24px;
+
+      @media ${tablet} {
+        margin-left: -16px;
+        margin-right: -16px;
+        padding-left: 16px;
+        padding-right: 16px;
+      }
+    }
+  }
 `;
 
 export const StyledRowContent = styled(RowContent)`

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

@@ -87,7 +87,7 @@ const Row = (props: RowProps) => {
             setSelection={setSelection}
           />
         </TableCell>
-        <TableCell className="">
+        <TableCell className="author-cell">
           <CreatorCell
             avatar={item.creatorAvatar || ""}
             displayName={item.creatorDisplayName || ""}

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

@@ -23,11 +23,11 @@ const StyledTableRow = styled(TableRow)`
   .table-container_cell {
     text-overflow: ellipsis;
 
-    padding-right: 8px;
+    padding-inline-end: 8px;
   }
 
   .mr-8 {
-    margin-right: 8px;
+    margin-inline-end: 8px;
   }
 
   .textOverflow {
@@ -46,7 +46,7 @@ const StyledTableRow = styled(TableRow)`
     input {
       position: relative;
 
-      margin-left: -8px;
+      margin-inline-start: -8px;
     }
   }
 

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

@@ -9,11 +9,11 @@ import {
 
 const StyledAvatar = styled(Avatar)`
   width: 16px;
-  min-width: 16px;
-  max-width: 16px;
+  margin-inline-end: 4px;
+  max-width: 100%;
   height: 16px;
 
-  margin-right: 4px;
+  min-width: unset;
 `;
 
 interface CreatorCellProps {
@@ -28,9 +28,14 @@ const CreatorCell = ({ avatar, displayName }: CreatorCellProps) => {
         source={avatar}
         size={AvatarSize.min}
         role={AvatarRole.user}
+        className="textOverflow"
       />
 
-      <Text className="description-text" fontWeight="600" fontSize="13px">
+      <Text
+        className="description-text textOverflow"
+        fontWeight="600"
+        fontSize="13px"
+      >
         {displayName}
       </Text>
     </>

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

@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 
 import { Text } from "@docspace/shared/components/text";
 import { Checkbox } from "@docspace/shared/components/checkbox";
@@ -7,11 +7,18 @@ import { Loader, LoaderTypes } from "@docspace/shared/components/loader";
 
 const StyledContainer = styled.div`
   .table-container_row-checkbox {
-    margin-left: -8px;
+    margin-inline-start: -8px;
 
     width: 16px;
 
-    padding: 16px 8px 16px 16px;
+    ${(props) =>
+      props.theme.interfaceDirection === "rtl"
+        ? css`
+            padding: 16px 16px 16px 8px;
+          `
+        : css`
+            padding: 16px 8px 16px 16px;
+          `}
   }
 `;
 
@@ -52,7 +59,11 @@ const NameCell = ({
           size="16px"
         />
       ) : (
-        <TableCell className="table-container_element-wrapper">
+        <TableCell
+          className="table-container_element-wrapper"
+          hasAccess
+          checked={isChecked}
+        >
           <StyledContainer className="table-container_element-container">
             <div className="table-container_element">
               {icon && <StyledImage src={icon} alt="App icon" />}

packages/runtime.json

@@ -1,5 +1,5 @@
 {
-  "date": "2024626_125743",
+  "date": "2024626_163846",
   "checksums": {
     "api.js": "0efbae3383bf6c6b6f26d573eee164d2",
     "api.poly.js": "2a2ac2c0e4a7007b61d2d1ff7b00a22e",

packages/shared/api/oauth/index.ts

@@ -141,7 +141,8 @@ export const revokeUserClient = async (clientId: string): Promise<void> => {
 export const onOAuthLogin = (clientId: string) => {
   const formData = new FormData();
 
-  formData.set("client_id", clientId);
+  formData.set("username", clientId);
+  formData.set("password", clientId);
 
   return request({
     method: "post",