From 24d6883e596d7c9b194d2dbac2b4aa72e44422c8 Mon Sep 17 00:00:00 2001
From: soupette <cyril.lpz@gmail.com>
Date: Thu, 24 Dec 2020 11:17:50 +0100
Subject: [PATCH] Add error state

Signed-off-by: soupette <cyril.lpz@gmail.com>
---
 .../SettingsPage/SingleSignOn/index.js           |  5 +++--
 .../lib/src/components/NotAllowedInput/Field.js  |  7 ++++++-
 .../lib/src/components/NotAllowedInput/index.js  | 16 +++++++++++-----
 3 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/packages/strapi-admin/ee/admin/containers/SettingsPage/SingleSignOn/index.js b/packages/strapi-admin/ee/admin/containers/SettingsPage/SingleSignOn/index.js
index 4f32c75a94..bb4273cd72 100644
--- a/packages/strapi-admin/ee/admin/containers/SettingsPage/SingleSignOn/index.js
+++ b/packages/strapi-admin/ee/admin/containers/SettingsPage/SingleSignOn/index.js
@@ -74,8 +74,9 @@ const SingleSignOn = () => {
           <BaselineAlignment top size="3px" />
           <FormBloc isLoading={showLoader}>
             {Object.keys(form).map(key => {
-              let type = key === 'defaultRole' && !canReadRoles ? 'notAllowed' : form[key].type;
-              let description =
+              // TODO: at some point it would be great to handle this in the upcoming input layout
+              const type = key === 'defaultRole' && !canReadRoles ? 'notAllowed' : form[key].type;
+              const description =
                 key === 'defaultRole' && !canReadRoles
                   ? form[key].notAllowedDescription
                   : form[key].description;
diff --git a/packages/strapi-helper-plugin/lib/src/components/NotAllowedInput/Field.js b/packages/strapi-helper-plugin/lib/src/components/NotAllowedInput/Field.js
index 13c79a267d..2214463da1 100644
--- a/packages/strapi-helper-plugin/lib/src/components/NotAllowedInput/Field.js
+++ b/packages/strapi-helper-plugin/lib/src/components/NotAllowedInput/Field.js
@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
 const Field = styled.div`
   height: 34px;
@@ -10,6 +10,11 @@ const Field = styled.div`
   padding-top: 2px;
   border-radius: 2px;
   background-color: ${({ theme }) => theme.main.colors.mediumGrey};
+  ${({ error }) =>
+    error &&
+    css`
+      border: 1px solid ${({ theme }) => theme.main.colors.lightOrange};
+    `}
 `;
 
 export default Field;
diff --git a/packages/strapi-helper-plugin/lib/src/components/NotAllowedInput/index.js b/packages/strapi-helper-plugin/lib/src/components/NotAllowedInput/index.js
index 47441f6eec..d17e9621a5 100644
--- a/packages/strapi-helper-plugin/lib/src/components/NotAllowedInput/index.js
+++ b/packages/strapi-helper-plugin/lib/src/components/NotAllowedInput/index.js
@@ -6,7 +6,7 @@ import EyeSlashed from '../../svgs/EyeSlashed';
 import BaselineAlignment from '../BaselineAlignment';
 import Field from './Field';
 
-const NotAllowedInput = ({ label, description, spacerHeight }) => {
+const NotAllowedInput = ({ label, description, error, spacerHeight }) => {
   const { formatMessage } = useIntl();
   const formatMessageRef = useRef(formatMessage);
   const text = useMemo(
@@ -19,7 +19,7 @@ const NotAllowedInput = ({ label, description, spacerHeight }) => {
       <Text fontWeight="semiBold" lineHeight="18px">
         {label}
       </Text>
-      <Field>
+      <Field error={error}>
         <Padded left right size="sm">
           <Flex>
             <Padded right size="sm">
@@ -32,15 +32,21 @@ const NotAllowedInput = ({ label, description, spacerHeight }) => {
           </Flex>
         </Padded>
       </Field>
-      {description ? (
+      {!error && description && (
         <BaselineAlignment top size="9px">
           <Text fontSize="md" color="grey" lineHeight="18px" ellipsis>
             {description}
           </Text>
         </BaselineAlignment>
-      ) : (
-        <BaselineAlignment top size={spacerHeight} />
       )}
+      {error && (
+        <BaselineAlignment top size="9px">
+          <Text fontSize="md" color="lightOrange" lineHeight="18px" ellipsis>
+            {error}
+          </Text>
+        </BaselineAlignment>
+      )}
+      {!error && !description && <BaselineAlignment top size={spacerHeight} />}
     </BaselineAlignment>
   );
 };