Merge pull request #1707 from akto-api-security/hotfix/fix_minor_ui_bugs

Fixing integrations page and ui for sso
akto-api-security · Nov 9, 2024 · ddb56f6 · ddb56f6
2 parents 709ce08 + 27bd551
commit ddb56f6
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 10 deletions.
diff --git a/...board/web/polaris_web/web/src/apps/dashboard/pages/settings/integrations/Integrations.jsx b/...board/web/polaris_web/web/src/apps/dashboard/pages/settings/integrations/Integrations.jsx
@@ -92,10 +92,7 @@ function Integrations() {
       source: '/public/gcp.svg'
     }
 
-    let ssoItems = [githubSsoObj, oktaSsoObj, azureAdSsoObj, githubAppObj, googleWorkSpaceObj]
-
-    let allItems = [burpSuiteObj,postmanObj,aktoApiObj,ciCdObj,aktoGptObj,slackObj,webhooksObj, jiraObj, ...ssoItems]
-    let currObjs = allItems
+    let ssoItems = [githubSsoObj, oktaSsoObj, azureAdSsoObj, googleWorkSpaceObj]
     const [currItems , setCurrentItems] = useState(getTabItems('all'))
     const tabs = [
         {
@@ -146,7 +143,7 @@ function Integrations() {
       case 'traffic':
         return trafficItems;
       case 'reporting':
-        if (func.checkLocal()) {
+        if (!func.checkOnPrem()) {
           return emptyItem;
         }
         return reportingItems;
@@ -170,7 +167,7 @@ function Integrations() {
       default:
         let allItems = [...trafficItems, ...aiItems]
         if (!func.checkLocal()){
-          allItems = [...allItems, ...alertsItems, ...automationItems]
+          allItems = [...allItems, ...alertsItems, ...automationItems, ...ssoItems]
         }
         if(func.checkOnPrem()){
           allItems = [...allItems, ...reportingItems]

diff --git a/...web/polaris_web/web/src/apps/dashboard/pages/settings/integrations/IntegrationsLayout.jsx b/...web/polaris_web/web/src/apps/dashboard/pages/settings/integrations/IntegrationsLayout.jsx
@@ -7,7 +7,7 @@ function IntegrationsLayout(props) {
 
   const components = [      
       <LegacyCard title="About the Integration" sectioned key="aboutSection">
-        <p>{props.cardContent}</p>
+        {(typeof (props.cardContent) === 'string') ? <p>{props.cardContent}</p> : props.cardContent}
       </LegacyCard>,
       <div key="primaryComponent">{props.component}</div>,
       <div key="secondaryComponent">{props.secondaryComponent}</div>,

diff --git a/...web/polaris_web/web/src/apps/dashboard/pages/settings/integrations/components/Details.jsx b/...web/polaris_web/web/src/apps/dashboard/pages/settings/integrations/components/Details.jsx
@@ -1,4 +1,4 @@
-import { Button, HorizontalStack, LegacyCard, VerticalStack } from '@shopify/polaris'
+import { Button, HorizontalStack, LegacyCard, Link, Text, VerticalStack } from '@shopify/polaris'
 import React from 'react'
 import LineComponent from './LineComponent'
 
@@ -13,6 +13,11 @@ function Details({onClickFunc, values}) {
                             <LineComponent title={x.title} value={x.value} key={index}/>
                         )
                     })}
+                    <HorizontalStack gap={"1"}>
+                        <Text>Use</Text>
+                        <Link>https://app.akto.io/sso-login</Link>
+                        <Text>for signing into AKTO dashboard via SSO.</Text>
+                    </HorizontalStack>
                 </VerticalStack>
                 <HorizontalStack align="end">
                     <Button primary onClick={onClickFunc} >Delete SSO</Button>

diff --git a/.../web/polaris_web/web/src/apps/dashboard/pages/settings/integrations/sso/CustomSamlSso.jsx b/.../web/polaris_web/web/src/apps/dashboard/pages/settings/integrations/sso/CustomSamlSso.jsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import StepsComponent from '../components/StepsComponent';
-import { Button, Form, FormLayout, HorizontalStack, LegacyCard, Tag, Text, TextField, VerticalStack } from '@shopify/polaris';
+import { Button, Form, FormLayout, HorizontalStack, LegacyCard, Link, Tag, Text, TextField, VerticalStack } from '@shopify/polaris';
 import FileUpload from '../../../../components/shared/FileUpload';
 import SpinnerCentered from '../../../../components/progress/SpinnerCentered';
 import IntegrationsLayout from '../IntegrationsLayout';
@@ -106,10 +106,21 @@ function CustomSamlSso({ssoType,entityTitle, entityId, loginURL,pageTitle, signi
             {componentType === 0 ? stepsComponent : componentType === 1 ? formComponent : <Details values={listValues} onClickFunc={() => setShowDeleteModal(true)} /> }
         </LegacyCard>
     )
+
+    const useCardContent = (
+        <VerticalStack gap={"2"}>
+            <Text>{cardContent}</Text>
+            <HorizontalStack gap={"1"}>
+                <Text>Use</Text>
+                <Link>https://app.akto.io/sso-login</Link>
+                <Text>for signing into AKTO dashboard via SSO.</Text>
+            </HorizontalStack>
+        </VerticalStack>
+    )
 
     return (
         <>
-            <IntegrationsLayout title={pageTitle} cardContent={cardContent} component={azureSSOComponent} docsUrl={"https://docs.akto.io/sso/" + samlUrlDocs} />
+            <IntegrationsLayout title={pageTitle} cardContent={useCardContent} component={azureSSOComponent} docsUrl={"https://docs.akto.io/sso/" + samlUrlDocs} />
             <DeleteModal setShowDeleteModal={setShowDeleteModal} showDeleteModal={showDeleteModal} SsoType={ssoType} onAction={handleDelete} />
         </>
     )