fix: add message when no results found in search (#3479)

Author: Palakp41

src/authorizations/components/redesigned/AllAccordionBody.tsx

@@ -82,22 +82,32 @@ export const AllAccordionBody: FC<OwnProps> = props => {
     </FlexBox>
   )
 
+  const getAccordionBody = () => {
+    return permissions.length !== 0 ? (
+      Object.keys(permissions).map(key => {
+        const names = permissions[key].name
+        const resourceName = names.charAt(0).toUpperCase() + names.slice(1)
+
+        return (
+          <Accordion.AccordionBodyItem
+            key={key}
+            className="resource-accordion-body"
+          >
+            {AllResourceAccordionBody(permissions[key], resourceName)}
+          </Accordion.AccordionBodyItem>
+        )
+      })
+    ) : (
+      <Accordion.AccordionBodyItem className="resource-accordion-error">
+        {`No ${resourceName.replace('All ', '')} match your search term`}
+      </Accordion.AccordionBodyItem>
+    )
+  }
+
   return (
     <>
       {resourceName === 'All Resources' ? (
-        Object.keys(permissions).map(key => {
-          const names = permissions[key].name
-          const resourceName = names.charAt(0).toUpperCase() + names.slice(1)
-
-          return (
-            <Accordion.AccordionBodyItem
-              key={key}
-              className="resource-accordion-body"
-            >
-              {AllResourceAccordionBody(permissions[key], resourceName)}
-            </Accordion.AccordionBodyItem>
-          )
-        })
+        getAccordionBody()
       ) : (
         <Accordion.AccordionBodyItem className="resource-accordion-body">
           {AllResourceAccordionBody()}

src/authorizations/components/redesigned/IndividualAccordionBody.tsx

@@ -94,26 +94,33 @@ export const IndividualAccordionBody: FC<Props> = props => {
     </FlexBox>
   )
 
+  const getAccordionBody = () => {
+    return sortedPermissions.length !== 0 ? (
+      Object.keys(sortedPermissions).map(key => {
+        return (
+          <Accordion.AccordionBodyItem
+            key={sortedPermissions[key].id}
+            className="resource-accordion-body"
+          >
+            {accordionBody(sortedPermissions[key])}
+          </Accordion.AccordionBodyItem>
+        )
+      })
+    ) : (
+      <Accordion.AccordionBodyItem className="resource-accordion-error">
+        {`No ${resourceName} match your search term`}
+      </Accordion.AccordionBodyItem>
+    )
+  }
+
   return (
     <>
       {title ? (
         <Accordion.AccordionBodyItem className="resource-accordion-body">
           {title}
         </Accordion.AccordionBodyItem>
       ) : null}
-
-      {permissions
-        ? Object.keys(sortedPermissions).map(key => {
-            return (
-              <Accordion.AccordionBodyItem
-                key={sortedPermissions[key].id}
-                className="resource-accordion-body"
-              >
-                {accordionBody(sortedPermissions[key])}
-              </Accordion.AccordionBodyItem>
-            )
-          })
-        : null}
+      {permissions ? getAccordionBody() : null}
     </>
   )
 }

src/authorizations/components/redesigned/customApiTokenOverlay.scss

@@ -28,4 +28,10 @@
 .resource-accordion-body {
   padding-top: 10px;
   padding-bottom: 10px;
+  font-weight: bold;
+}
+
+.resource-accordion-error {
+  justify-content: center;
+  color: gray;
 }