Client:OAuth2: fix styles for edit form

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 };

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"}

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);
             }}

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,
 };