From 0c1b4420a7c9c283afad5422efb0c75e26aa9938 Mon Sep 17 00:00:00 2001
From: Timofey Boyko <timofey.boyko@onlyoffice.com>
Date: Mon, 27 Nov 2023 17:57:36 +0300
Subject: [PATCH] Client:OAuth2: fix styles for edit form

---
 .../ClientForm/ClientForm.styled.ts           |  8 +++++++
 .../ClientForm/components/InputGroup.tsx      |  3 +--
 .../ClientForm/components/MultiInputGroup.tsx |  2 ++
 packages/components/selected-item/index.js    | 22 ++++++++++++-------
 4 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/ClientForm/ClientForm.styled.ts b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/ClientForm/ClientForm.styled.ts
index 8da460ea0f..1bfd29bf60 100644
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/ClientForm/ClientForm.styled.ts
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/ClientForm/ClientForm.styled.ts
@@ -101,6 +101,14 @@ const StyledInputGroup = styled.div`
   .description {
     color: ${(props) => props.theme.oauth.clientForm.descriptionColor};
   }
+
+  .field-body {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    gap: 8px;
+  }
 `;
 
 StyledInputGroup.defaultProps = { theme: Base };
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/ClientForm/components/InputGroup.tsx b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/ClientForm/components/InputGroup.tsx
index 5a4498d191..8989ddec97 100644
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/ClientForm/components/InputGroup.tsx
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/ClientForm/components/InputGroup.tsx
@@ -82,7 +82,6 @@ const InputGroup = ({
           children
         ) : (
           <>
-            {" "}
             <InputBlock
               name={name}
               value={value}
@@ -92,7 +91,7 @@ const InputGroup = ({
               tabIndex={0}
               maxLength={255}
               isReadOnly={withCopy}
-              isDisabled={withCopy || disabled}
+              isDisabled={disabled}
               iconName={withCopy ? CopyReactSvgUrl : null}
               onIconClick={withCopy && onCopyClick}
               type={isPassword ? "password" : "text"}
diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/ClientForm/components/MultiInputGroup.tsx b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/ClientForm/components/MultiInputGroup.tsx
index 5e6592b2e1..e37cc9f32a 100644
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/ClientForm/components/MultiInputGroup.tsx
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/ClientForm/components/MultiInputGroup.tsx
@@ -112,6 +112,8 @@ const MultiInputGroup = ({
             key={`${v}-${index}`}
             isInline
             label={v}
+            isDisabled={isDisabled}
+            hideCross={isDisabled}
             onClose={() => {
               !isDisabled && onAdd(name, v);
             }}
diff --git a/packages/components/selected-item/index.js b/packages/components/selected-item/index.js
index 941b938010..b591c6f276 100644
--- a/packages/components/selected-item/index.js
+++ b/packages/components/selected-item/index.js
@@ -17,6 +17,7 @@ const SelectedItem = (props) => {
     group,
     forwardedRef,
     classNameCloseButton,
+    hideCross,
   } = props;
   if (!label) return <></>;
 
@@ -48,14 +49,16 @@ const SelectedItem = (props) => {
       >
         {label}
       </StyledLabel>
-      <IconButton
-        className={"selected-tag-removed " + classNameCloseButton}
-        iconName={CrossReactSvgUrl}
-        size={12}
-        onClick={onCloseClick}
-        isFill
-        isDisabled={isDisabled}
-      />
+      {!hideCross && (
+        <IconButton
+          className={"selected-tag-removed " + classNameCloseButton}
+          iconName={CrossReactSvgUrl}
+          size={12}
+          onClick={onCloseClick}
+          isFill
+          isDisabled={isDisabled}
+        />
+      )}
     </StyledSelectedItem>
   );
 };
@@ -65,6 +68,8 @@ SelectedItem.propTypes = {
   label: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
   /** Sets the 'width: fit-content' property */
   isInline: PropTypes.bool,
+  /** Hide cross icon */
+  hideCross: PropTypes.bool,
   /** Sets a callback function that is triggered when the cross icon is clicked */
   onClose: PropTypes.func.isRequired,
   /** Sets a callback function that is triggered when the selected item is clicked */
@@ -87,6 +92,7 @@ SelectedItem.propTypes = {
 
 SelectedItem.defaultProps = {
   isInline: true,
+  hideCross: false,
   isDisabled: false,
 };