🦋 Add EmptyState component

app/javascript/src/AuthenticationProviders/components/AccountAuthenticationProviders.tsx

@@ -10,6 +10,7 @@ import { useState } from 'react'
 
 import { EnforceSSOSwitch } from 'AuthenticationProviders/components/EnforceSSOSwitch'
 import { AuthenticationProvidersTable } from 'AuthenticationProviders/components/AuthenticationProvidersTable'
+import { AuthenticationProvidersEmptyState } from 'AuthenticationProviders/components/AuthenticationProvidersEmptyState'
 import { createReactWrapper } from 'utilities/createReactWrapper'
 import { ajaxJSON } from 'utilities/ajax'
 import * as flash from 'utilities/flash'
@@ -110,10 +111,12 @@ const AccountAuthenticationProviders: FunctionComponent<Props> = ({
         </FlexItem>
       )}
       <FlexItem>
-        <Card>
-          {/* eslint-disable-next-line react/jsx-props-no-spreading */}
-          <AuthenticationProvidersTable {...table} />
-        </Card>
+        {!table.count ? <AuthenticationProvidersEmptyState newHref={table.newHref} /> : (
+          <Card>
+            {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+            <AuthenticationProvidersTable {...table} />
+          </Card>
+        )}
       </FlexItem>
 
       {openModal === 'enable' && (

app/javascript/src/AuthenticationProviders/components/AuthenticationProvidersEmptyState.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import {
+  Title,
+  Button,
+  EmptyState,
+  EmptyStateIcon,
+  EmptyStateBody
+} from '@patternfly/react-core'
+import UserIcon from '@patternfly/react-icons/dist/esm/icons/user-icon'
+
+interface Props {
+  newHref: string;
+}
+
+const AuthenticationProvidersEmptyState: React.FC<Props> = ({ newHref }) => (
+  <EmptyState>
+    <EmptyStateIcon icon={UserIcon} />
+    <Title headingLevel="h4" size="lg">
+      No SSO integrations
+    </Title>
+    <EmptyStateBody>
+      Choose a Single Sign-On (SSO) provider and create an integration to access the Admin Portal.
+    </EmptyStateBody>
+    <Button
+      component="a"
+      href={newHref}
+      variant="primary"
+    >
+      Add a SSO integration
+    </Button>
+  </EmptyState>
+)
+
+export type { Props }
+export { AuthenticationProvidersEmptyState }