upcoming: [M3-7608]: Placement Groups Landing page empty state (linod…

…e#10075)

* upcoming: [M3-7608]: Placement Groups Landing page empty state

* upcoming: [M3-7608]: Add changeset and remove unnecessary file

* fix docs link unit test

packages/manager/.changeset/pr-10075-upcoming-features-1705615244383.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Placement Groups Landing Page empty state ([#10075](https://github.com/linode/manager/pull/10075))

packages/manager/src/features/PlacementGroups/PlacementGroupsLanding/PlacementGroupsLanding.test.tsx

@@ -41,8 +41,12 @@ describe('PlacementGroupsLanding', () => {
   it('renders docs link and create button', () => {
     queryMocks.usePlacementGroupsQuery.mockReturnValue({
       data: {
-        data: [],
-        results: 0,
+        data: [
+          placementGroupFactory.build({
+            label: 'group 1',
+          }),
+        ],
+        results: 1,
       },
     });
 
@@ -72,4 +76,21 @@ describe('PlacementGroupsLanding', () => {
     expect(getByText(/group 1/i)).toBeInTheDocument();
     expect(getByText(/group 2/i)).toBeInTheDocument();
   });
+
+  it('should render placement group landing with empty state', () => {
+    queryMocks.usePlacementGroupsQuery.mockReturnValue({
+      data: {
+        data: [],
+        results: 0,
+      },
+    });
+
+    const { getByText } = renderWithTheme(<PlacementGroupsLanding />);
+
+    expect(
+      getByText(
+        'Control the physical placement or distribution of virtual machines (VMs) instances within a data center or availability zone.'
+      )
+    ).toBeInTheDocument();
+  });
 });

packages/manager/src/features/PlacementGroups/PlacementGroupsLanding/PlacementGroupsLanding.tsx

@@ -23,6 +23,7 @@ import { usePlacementGroupsQuery } from 'src/queries/placementGroups';
 import { getAPIErrorOrDefault } from 'src/utilities/errorUtils';
 
 import { MAX_NUMBER_OF_PLACEMENT_GROUPS } from '../constants';
+import { PlacementGroupsLandingEmptyState } from './PlacementGroupsLandingEmptyState';
 import { PlacementGroupsRow } from './PlacementGroupsRow';
 
 import type { PlacementGroup } from '@linode/api-v4';
@@ -63,15 +64,21 @@ export const PlacementGroupsLanding = React.memo(() => {
     filter
   );
 
+  const onOpenCreateDrawer = () => {
+    history.push('/placement-groups/create');
+  };
+
   if (isLoading) {
     return <CircleProgress />;
   }
 
-  // if (placementGroups?.results === 0) {
-  //   return {
-  //     /* TODO VM_Placement: add <PlacementGroupsEmptyState /> */
-  //   };
-  // }
+  if (placementGroups?.results === 0) {
+    return (
+      <PlacementGroupsLandingEmptyState
+        openCreatePlacementGroupDrawer={onOpenCreateDrawer}
+      />
+    );
+  }
 
   if (error) {
     return (
@@ -84,10 +91,6 @@ export const PlacementGroupsLanding = React.memo(() => {
     );
   }
 
-  const onOpenCreateDrawer = () => {
-    history.push('/placement-groups/create');
-  };
-
   const handleRenamePlacementGroup = (placementGroup: PlacementGroup) => {
     setSelectedPlacementGroup(placementGroup);
   };

packages/manager/src/features/PlacementGroups/PlacementGroupsLanding/PlacementGroupsLandingEmptyState.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react';
+
+import PlacementGroups from 'src/assets/icons/entityIcons/placement-groups.svg';
+import { ResourcesSection } from 'src/components/EmptyLandingPageResources/ResourcesSection';
+import { sendEvent } from 'src/utilities/analytics';
+
+import {
+  gettingStartedGuides,
+  headers,
+  linkAnalyticsEvent,
+} from './PlacementGroupsLandingEmptyStateData';
+
+interface Props {
+  openCreatePlacementGroupDrawer: () => void;
+}
+
+export const PlacementGroupsLandingEmptyState = (props: Props) => {
+  const { openCreatePlacementGroupDrawer } = props;
+
+  return (
+    <ResourcesSection
+      buttonProps={[
+        {
+          children: 'Create Placement Groups',
+          onClick: () => {
+            sendEvent({
+              action: 'Click:button',
+              category: linkAnalyticsEvent.category,
+              label: 'Create Placement Group',
+            });
+            openCreatePlacementGroupDrawer();
+          },
+        },
+      ]}
+      gettingStartedGuidesData={gettingStartedGuides}
+      headers={headers}
+      icon={PlacementGroups}
+      linkAnalyticsEvent={linkAnalyticsEvent}
+    />
+  );
+};

packages/manager/src/features/PlacementGroups/PlacementGroupsLanding/PlacementGroupsLandingEmptyStateData.ts

@@ -0,0 +1,33 @@
+import { PLACEMENT_GROUP_LABEL } from 'src/features/PlacementGroups/constants';
+
+import type {
+  ResourcesHeaders,
+  ResourcesLinkSection,
+  ResourcesLinks,
+} from 'src/components/EmptyLandingPageResources/ResourcesLinksTypes';
+
+export const headers: ResourcesHeaders = {
+  description:
+    'Control the physical placement or distribution of virtual machines (VMs) instances within a data center or availability zone.',
+  subtitle: '',
+  title: PLACEMENT_GROUP_LABEL,
+};
+
+export const gettingStartedGuides: ResourcesLinkSection = {
+  links: [
+    {
+      text: '',
+      to: '',
+    },
+  ],
+  moreInfo: {
+    text: '',
+    to: '',
+  },
+  title: '',
+};
+
+export const linkAnalyticsEvent: ResourcesLinks['linkAnalyticsEvent'] = {
+  action: 'Click:link',
+  category: 'Placement Groups landing page empty',
+};

packages/manager/src/features/PlacementGroups/constants.ts

@@ -1 +1,4 @@
+// Labels
+export const PLACEMENT_GROUP_LABEL = 'Placement Groups';
+
 export const MAX_NUMBER_OF_PLACEMENT_GROUPS = 5;