Remove integrations content

public/components/integrations/components/__tests__/__snapshots__/available_integration_card_view.test.tsx.snap

@@ -444,6 +444,54 @@ exports[`Available Integration Card View Test Renders nginx integration card vie
           className="euiSpacer euiSpacer--l"
         />
       </EuiSpacer>
+      <RenderRows
+        integrations={Array []}
+      >
+        <NoIntegrationsAvailable>
+          <EuiSpacer
+            size="xxl"
+          >
+            <div
+              className="euiSpacer euiSpacer--xxl"
+            />
+          </EuiSpacer>
+          <EuiText
+            textAlign="center"
+          >
+            <div
+              className="euiText euiText--medium"
+            >
+              <EuiTextAlign
+                textAlign="center"
+              >
+                <div
+                  className="euiTextAlign euiTextAlign--center"
+                >
+                  <h2>
+                    No Integrations Available
+                  </h2>
+                  <p>
+                    You can get bundles from
+
+                    <a
+                      href="https://github.com/opensearch-project/opensearch-catalog"
+                    >
+                      the OpenSearch Catalog.
+                    </a>
+                  </p>
+                </div>
+              </EuiTextAlign>
+            </div>
+          </EuiText>
+          <EuiSpacer
+            size="m"
+          >
+            <div
+              className="euiSpacer euiSpacer--m"
+            />
+          </EuiSpacer>
+        </NoIntegrationsAvailable>
+      </RenderRows>
     </div>
   </EuiPanel>
 </AvailableIntegrationsCardView>

public/components/integrations/components/available_integration_card_view.tsx

@@ -11,6 +11,8 @@ import {
   EuiSpacer,
   EuiFieldSearch,
   EuiButtonGroup,
+  EuiText,
+  EuiLoadingDashboards,
 } from '@elastic/eui';
 import _ from 'lodash';
 import React, { useState } from 'react';
@@ -20,11 +22,47 @@ import {
 } from './available_integration_overview_page';
 import { INTEGRATIONS_BASE } from '../../../../common/constants/shared';
 import { badges } from './integration_category_badge_group';
+import { HttpSetup } from '../../../../../../src/core/public';
 
-export function AvailableIntegrationsCardView(props: AvailableIntegrationsCardViewProps) {
-  const http = props.http;
-  const [toggleIconIdSelected, setToggleIconIdSelected] = useState('1');
+function NoIntegrationsAvailable() {
+  return (
+    <>
+      <EuiSpacer size="xxl" />
+      <EuiText textAlign="center">
+        <h2>No Integrations Available</h2>
+        <p>
+          You can get bundles from{' '}
+          <a href="https://github.com/opensearch-project/opensearch-catalog">
+            the OpenSearch Catalog.
+          </a>
+        </p>
+      </EuiText>
+      <EuiSpacer size="m" />
+    </>
+  );
+}
 
+function LoadingIntegrations() {
+  return (
+    <>
+      <EuiSpacer size="xxl" />
+      <EuiText textAlign="center">
+        <EuiLoadingDashboards size="xxl" />
+        <p>Loading Integrations...</p>
+      </EuiText>
+    </>
+  );
+}
+
+function RenderRows({
+  loading,
+  integrations,
+  http,
+}: {
+  loading: boolean;
+  integrations: AvailableIntegrationType[];
+  http: HttpSetup;
+}) {
   const getImage = (url?: string) => {
     let optionalImg;
     if (url) {
@@ -35,6 +73,39 @@ export function AvailableIntegrationsCardView(props: AvailableIntegrationsCardVi
     return optionalImg;
   };
 
+  if (loading) return <LoadingIntegrations />;
+  if (!integrations.length) return <NoIntegrationsAvailable />;
+  return (
+    <>
+      <EuiFlexGroup gutterSize="l" style={{ flexWrap: 'wrap' }}>
+        {integrations.map((i, v) => {
+          return (
+            <EuiFlexItem key={v} style={{ minWidth: '14rem', maxWidth: '14rem' }}>
+              <EuiCard
+                icon={getImage(
+                  http.basePath.prepend(
+                    `${INTEGRATIONS_BASE}/repository/${i.name}/static/${i.statics.logo.path}`
+                  )
+                )}
+                title={i.displayName ? i.displayName : i.name}
+                description={i.description}
+                data-test-subj={`integration_card_${i.name.toLowerCase()}`}
+                titleElement="span"
+                onClick={() => (window.location.hash = `#/available/${i.name}`)}
+                footer={badges(i.labels ?? [])}
+              />
+            </EuiFlexItem>
+          );
+        })}
+      </EuiFlexGroup>
+      <EuiSpacer />
+    </>
+  );
+}
+
+export function AvailableIntegrationsCardView(props: AvailableIntegrationsCardViewProps) {
+  const [toggleIconIdSelected, setToggleIconIdSelected] = useState('1');
+
   const toggleButtonsIcons = [
     {
       id: '0',
@@ -57,36 +128,6 @@ export function AvailableIntegrationsCardView(props: AvailableIntegrationsCardVi
     }
   };
 
-  const renderRows = (integrations: AvailableIntegrationType[]) => {
-    if (!integrations || !integrations.length) return null;
-    return (
-      <>
-        <EuiFlexGroup gutterSize="l" style={{ flexWrap: 'wrap' }}>
-          {integrations.map((i, v) => {
-            return (
-              <EuiFlexItem key={v} style={{ minWidth: '14rem', maxWidth: '14rem' }}>
-                <EuiCard
-                  icon={getImage(
-                    http.basePath.prepend(
-                      `${INTEGRATIONS_BASE}/repository/${i.name}/static/${i.statics.logo.path}`
-                    )
-                  )}
-                  title={i.displayName ? i.displayName : i.name}
-                  description={i.description}
-                  data-test-subj={`integration_card_${i.name.toLowerCase()}`}
-                  titleElement="span"
-                  onClick={() => (window.location.hash = `#/available/${i.name}`)}
-                  footer={badges(i.labels ?? [])}
-                />
-              </EuiFlexItem>
-            );
-          })}
-        </EuiFlexGroup>
-        <EuiSpacer />
-      </>
-    );
-  };
-
   return (
     <EuiPanel>
       <EuiFlexGroup gutterSize="s">
@@ -113,7 +154,11 @@ export function AvailableIntegrationsCardView(props: AvailableIntegrationsCardVi
         </EuiFlexItem>
       </EuiFlexGroup>
       <EuiSpacer />
-      {renderRows(props.data.hits.filter((x) => x.name.includes(props.query)))}
+      <RenderRows
+        loading={props.loading}
+        integrations={props.data.hits.filter((x) => x.name.includes(props.query))}
+        http={props.http}
+      />
     </EuiPanel>
   );
 }

public/components/integrations/components/available_integration_overview_page.tsx

@@ -21,7 +21,6 @@ import { AvailableIntegrationsTable } from './available_integration_table';
 import { AvailableIntegrationsCardView } from './available_integration_card_view';
 import { INTEGRATIONS_BASE } from '../../../../common/constants/shared';
 import { AvailableIntegrationOverviewPageProps } from './integration_types';
-import { useToast } from '../../../../public/components/common/toast';
 import { HttpStart } from '../../../../../../src/core/public';
 
 export interface AvailableIntegrationType {
@@ -57,15 +56,16 @@ export interface AvailableIntegrationsCardViewProps {
   setQuery: (input: string) => void;
   renderCateogryFilters: () => React.JSX.Element;
   http: HttpStart;
+  loading: boolean;
 }
 
 export function AvailableIntegrationOverviewPage(props: AvailableIntegrationOverviewPageProps) {
   const { chrome, http } = props;
 
   const [query, setQuery] = useState('');
   const [isCardView, setCardView] = useState(true);
-  const { setToast } = useToast();
   const [data, setData] = useState<AvailableIntegrationsList>({ hits: [] });
+  const [loading, setLoading] = useState<boolean>(true);
 
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
 
@@ -116,6 +116,7 @@ export function AvailableIntegrationOverviewPage(props: AvailableIntegrationOver
   async function handleDataRequest() {
     http.get(`${INTEGRATIONS_BASE}/repository`).then((exists) => {
       setData(exists.data);
+      setLoading(false);
 
       let newItems = exists.data.hits.flatMap(
         (hit: { labels?: string[] }) => hit.labels?.sort() ?? []
@@ -130,24 +131,6 @@ export function AvailableIntegrationOverviewPage(props: AvailableIntegrationOver
     });
   }
 
-  async function addIntegrationRequest(name: string) {
-    http
-      .post(`${INTEGRATIONS_BASE}/store`)
-      .then((res) => {
-        setToast(
-          `${name} integration successfully added!`,
-          'success',
-          `View the added assets from ${name} in the Added Integrations list`
-        );
-      })
-      .catch((err) =>
-        setToast(
-          'Failed to load integration. Check Added Integrations table for more details',
-          'danger'
-        )
-      );
-  }
-
   const renderCateogryFilters = () => {
     return (
       <EuiFilterGroup>
@@ -180,7 +163,7 @@ export function AvailableIntegrationOverviewPage(props: AvailableIntegrationOver
   return (
     <EuiPage>
       <EuiPageBody>
-        {IntegrationHeader()}
+        <IntegrationHeader />
         {isCardView
           ? AvailableIntegrationsCardView({
               data: {
@@ -192,6 +175,7 @@ export function AvailableIntegrationOverviewPage(props: AvailableIntegrationOver
               setQuery,
               renderCateogryFilters,
               http,
+              loading,
             })
           : AvailableIntegrationsTable({
               loading: false,