Web: Client: OAuth: Fixed DTO and client view styles

packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/OAuthDetails/index.js

@@ -1,84 +1,73 @@
 import React, { useState, useEffect } from "react";
 import { withTranslation } from "react-i18next";
-import styled from "styled-components";
-import Box from "@docspace/components/box";
 import TextInput from "@docspace/components/text-input";
-import Textarea from "@docspace/components/textarea";
 import Label from "@docspace/components/label";
-import Checkbox from "@docspace/components/checkbox";
-import Button from "@docspace/components/button";
-import ComboBox from "@docspace/components/combobox";
-import Heading from "@docspace/components/heading";
 import { inject, observer } from "mobx-react";
-import { isMobile } from "react-device-detect";
+import StyledSettingsSeparator from "SRC_DIR/pages/PortalSettings/StyledSettingsSeparator";
-import BreakpointWarning from "SRC_DIR/components/BreakpointWarning";
+import Category from "../sub-components/Category";
-
+import { Container, Property } from "../StyledOAuth";
-const Container = styled.div`
-  width: 100%;
-  margin-top: 5px;
-`;
-
-const Property = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  margin-bottom: 16px;
-`;
 
 const OAuthDetails = (props) => {
-  const { t, setDocumentTitle, currentClient } = props;
+  const { t, setDocumentTitle, currentClient, theme } = props;
 
   setDocumentTitle("OAuth");
 
   return (
-    <>
     <Container>
+      <Category
+        t={t}
+        title={"Basic info"}
+        tooltipTitle={"Test"}
+        tooltipUrl={""}
+        currentColorScheme={theme}
+      />
       <Property>
-          <Label htmlFor="name" text="Name:" title="Fill the client name" />
+        <Label htmlFor="name" text="App name:" title="Fill app name" />
         <TextInput id="name" value={currentClient.name} />
       </Property>
+      <Property>
+        <Label htmlFor="icon" text="App icon:" title="Fill app icon" />
+        <TextInput id="icon" value={currentClient.logo_uri} />
+      </Property>
       <Property>
         <Label
           htmlFor="description"
           text="Description:"
-            title="Fill the client description"
+          title="Fill description"
         />
-          <TextInput id="description" value={currentClient.description} scale />
+        <TextInput id="description" value={currentClient.description} />
       </Property>
+      <StyledSettingsSeparator />
+      <Category
+        t={t}
+        title={"Client ID"}
+        tooltipTitle={"Test"}
+        tooltipUrl={""}
+        currentColorScheme={theme}
+      />
       <Property>
-          <Label htmlFor="id" text="Id:" title="Client id" />
+        <Label htmlFor="id" text="Client ID:" title="Client ID" />
-          <TextInput id="id" value={currentClient.client_id} isDisabled scale />
+        <TextInput id="id" value={currentClient.client_id} isDisabled />
       </Property>
       <Property>
         <Label htmlFor="secret" text="Secret:" title="Client secret" />
-          <TextInput
+        <TextInput id="secret" value={currentClient.client_secret} isDisabled />
-            id="secret"
-            value={currentClient.client_secret}
-            isDisabled
-            scale
-          />
       </Property>
-        <Property>
+      <StyledSettingsSeparator />
-          <Label htmlFor="rootUrl" text="Root url:" title="Root url" />
+      <Category
-          <TextInput
+        t={t}
-            id="rootUrl"
+        title={"OAuth urls"}
-            value={currentClient.root_url}
+        tooltipTitle={"Test"}
-            isReadOnly
+        tooltipUrl={""}
-            scale
+        currentColorScheme={theme}
       />
-        </Property>
       <Property>
         <Label
           htmlFor="redirectUris"
           text="Redirect uris:"
           title="Redirect uris"
         />
-          <TextInput
+        <TextInput id="redirectUris" value={currentClient.redirect_uris} />
-            id="redirectUris"
-            value={currentClient.redirect_uris}
-            isReadOnly
-            scale
-          />
       </Property>
       <Property>
         <Label
@@ -86,24 +75,41 @@ const OAuthDetails = (props) => {
           text="Allowed origins:"
           title="Allowed origins"
         />
-          <TextInput
+        <TextInput id="allowedOrigins" value={currentClient.allowed_origins} />
-            id="allowedOrigins"
-            value={currentClient.allowed_origins}
-            isReadOnly
-            scale
-          />
       </Property>
+      <StyledSettingsSeparator />
+      <Category
+        t={t}
+        title={"Access scopes"}
+        tooltipTitle={"Test"}
+        tooltipUrl={""}
+        currentColorScheme={theme}
+      />
       <Property>
         <Label htmlFor="scopes" text="Scopes:" title="Scopes" />
-          <TextInput
+        <TextInput id="scopes" value={currentClient.scopes} isReadOnly />
-            id="scopes"
+      </Property>
-            value={currentClient.scopes}
+      <StyledSettingsSeparator />
-            isReadOnly
+      <Category
-            scale
+        t={t}
+        title={"Support and legal info"}
+        tooltipTitle={"Test"}
+        tooltipUrl={""}
+        currentColorScheme={theme}
       />
+      <Property>
+        <Label htmlFor="rootUrl" text="Website URL:" title="Root url" />
+        <TextInput id="rootUrl" value={currentClient.root_url} />
+      </Property>
+      <Property>
+        <Label htmlFor="policy" text="Privacy policy URL:" title="Policy" />
+        <TextInput id="policy" value={currentClient.policy_uri} />
+      </Property>
+      <Property>
+        <Label htmlFor="terms" text="Terms of Service URL:" title="Terms" />
+        <TextInput id="terms" value={currentClient.terms_uri} />
       </Property>
     </Container>
-    </>
   );
 };
 

packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/StyledOAuth.js

@@ -0,0 +1,28 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  width: 100%;
+  margin-top: 5px;
+`;
+
+export const Property = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  margin-bottom: 16px;
+  width: 500px;
+`;
+
+export const StyledCategory = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: 4px;
+  margin-bottom: 16px;
+  align-items: center;
+`;
+
+export const StyledTooltip = styled.div`
+  .subtitle {
+    margin-bottom: 10px;
+  }
+`;

packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/Category.js

@@ -0,0 +1,59 @@
+import InfoReactSvgUrl from "PUBLIC_DIR/images/info.react.svg?url";
+import React from "react";
+import Text from "@docspace/components/text";
+import HelpButton from "@docspace/components/help-button";
+import Link from "@docspace/components/link";
+import { Base } from "@docspace/components/themes";
+import { StyledCategory, StyledTooltip } from "../StyledOAuth";
+
+const Category = (props) => {
+  const {
+    t,
+    title,
+    tooltipTitle,
+    tooltipUrl,
+    theme,
+    currentColorScheme,
+  } = props;
+
+  const tooltip = () => (
+    <StyledTooltip>
+      <Text className={tooltipUrl ? "subtitle" : ""} fontSize="12px">
+        {tooltipTitle}
+      </Text>
+      {tooltipUrl && (
+        <Link
+          fontSize="12px"
+          target="_blank"
+          isHovered
+          href={tooltipUrl}
+          color={currentColorScheme.main.accent}
+        >
+          {t("Common:LearnMore")}
+        </Link>
+      )}
+    </StyledTooltip>
+  );
+
+  return (
+    <StyledCategory>
+      <Text fontSize="16px" fontWeight="700">
+        {title}
+      </Text>
+      <HelpButton
+        iconName={InfoReactSvgUrl}
+        displayType="dropdown"
+        place="right"
+        offsetRight={0}
+        getContent={tooltip}
+        tooltipColor={theme.client.settings.security.owner.tooltipColor}
+      />
+    </StyledCategory>
+  );
+};
+
+Category.defaultProps = {
+  theme: Base,
+};
+
+export default Category;

packages/client/src/store/OAuthStore.js

@@ -2,9 +2,10 @@ import { makeAutoObservable, runInAction } from "mobx";
 
 const clients = [...Array(5)].map((value, index) => {
   return {
+    enabled: true,
     id: index,
-    name: `46192a5a-e19c-${index}`,
+    name: `7383bc80-b0ad-4fad-8850-${index}`,
-    description: "Demo description",
+    description: "Application description",
     client_id: "46192a5a-e19c-453c-aec3-50617290edbe",
     client_secret: "e5ff57e4-4ce2-4dac-a265-88bc7e726684",
     root_url: "https://google.com",
@@ -13,20 +14,25 @@ const clients = [...Array(5)].map((value, index) => {
       "https://google.com",
       "https://openidconnect.net/callback",
     ],
-    scopes: [
+    scopes: ["accounts:write", "accounts:read"],
-      "files:write",
+    logo_uri: "https://logo2.example",
-      "accounts:write",
+    policy_uri: "https://policy2.example",
-      "files:read",
+    terms_uri: "https://terms2.example",
-      "account.self:write",
+    state: "draft",
-      "rooms:read",
-      "accounts:read",
-      "account.self:read",
-      "rooms:write",
-    ],
-    enabled: true,
   };
 });
 
+const scopes = [
+  "files:read",
+  "files:write",
+  "rooms:read",
+  "rooms:write",
+  "account.self:read",
+  "account.self:write",
+  "accounts:read",
+  "accounts:write",
+];
+
 class OAuthStore {
   clients = [];
   currentClient = clients[0];