upcoming: [UIE-9402] - Implement Owned groups tab landing page

packages/api-v4/src/images/index.ts

@@ -1,3 +1,5 @@
 export * from './images';
 
+export * from './sharegroups';
+
 export * from './types';

packages/manager/.changeset/pr-13506-upcoming-features-1773858733897.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Implement owned groups landing page content ([#13506](https://github.com/linode/manager/pull/13506))

packages/manager/src/features/Images/ImagesLanding/v2/ImageLibrary/ImagesTable.styles.ts

@@ -31,4 +31,10 @@ export const StyledImageTableContainer = styled(Box, {
   '& [data-qa-table-pagination]': {
     border: 'none',
   },
+  // When table striping is ON, rows use `zebra` (no rowborder). Apply a bottom
+  // border to the last row so the table is visually closed before the pagination
+  // footer - matching the behaviour of non-CDS tables elsewhere in the app.
+  '& cds-table-row:last-child:not([rowborder])': {
+    borderBottom: `1px solid ${theme.tokens.component.Table.Row.Border}`,
+  },
 }));

packages/manager/src/features/Images/ImagesLanding/v2/ImagesLandingV2.tsx

@@ -14,11 +14,13 @@ export const ImagesLandingV2 = () => {
     {
       title: 'Image Library',
       to: '/images/image-library',
+      pendoId: 'Images-Library',
     },
     {
       title: 'Share Groups',
       to: '/images/share-groups',
       chip: <BetaChip />,
+      pendoId: 'Images-Groups',
     },
   ]);
 

packages/manager/src/features/Images/ImagesLanding/v2/ShareGroups/ShareGroupActionMenu.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+
+import { ActionMenu } from 'src/components/ActionMenu/ActionMenu';
+
+import type { Action } from 'src/components/ActionMenu/ActionMenu';
+
+interface Props {
+  deleteButtonDisabled: boolean;
+}
+export const ShareGroupActionMenu = (props: Props) => {
+  const { deleteButtonDisabled } = props;
+  /* TODO: Implement action menu logic for each corresponding action */
+  const actions: Action[] = [
+    {
+      title: 'Edit Group Details',
+      onClick: () => {},
+      disabled: false,
+      hidden: false,
+      pendoId: 'Images Groups Owned-Edit Group Details',
+    },
+    {
+      title: 'Add Images',
+      onClick: () => {},
+      disabled: false,
+      hidden: false,
+      pendoId: 'Images Groups Owned-Add Images',
+    },
+    {
+      title: 'Add Members',
+      onClick: () => {},
+      disabled: false,
+      hidden: false,
+      pendoId: 'Images Groups Owned-Add Members',
+    },
+    {
+      title: 'Delete',
+      onClick: () => {},
+      disabled: deleteButtonDisabled,
+      hidden: false,
+      tooltip: deleteButtonDisabled
+        ? 'Before deleting this share group, revoke access for all members first.'
+        : undefined,
+      pendoId: 'Images Groups Owned-Delete',
+    },
+  ];
+
+  return (
+    <ActionMenu
+      actionsList={actions}
+      ariaLabel="Action menu for share group"
+      data-pendo-id="Images Groups Owned-Group Action menu"
+    />
+  );
+};

packages/manager/src/features/Images/ImagesLanding/v2/ShareGroups/ShareGroupRow.tsx

@@ -0,0 +1,75 @@
+import { usePreferences, useProfile } from '@linode/queries';
+import { Hidden, LinkButton } from '@linode/ui';
+import { TableCell, TableRow } from 'akamai-cds-react-components/Table';
+import React from 'react';
+
+import { getIsTableStripingEnabled } from 'src/features/Profile/Settings/TableStriping.utils';
+import { formatDate } from 'src/utilities/formatDate';
+
+import { ShareGroupActionMenu } from './ShareGroupActionMenu';
+import { StyledActionMenuWrapper } from './ShareGroupTable.styles';
+
+import type { Sharegroup } from '@linode/api-v4';
+
+interface Props {
+  shareGroup: Sharegroup;
+}
+
+export const ShareGroupRow = (props: Props) => {
+  const { shareGroup } = props;
+  const { data: profile } = useProfile();
+
+  const {
+    created,
+    description,
+    images_count,
+    label,
+    members_count,
+    updated,
+    id,
+  } = shareGroup;
+
+  const { data: tableStripingPreference } = usePreferences(
+    (preferences) => preferences?.isTableStripingEnabled
+  );
+
+  const isTableStripingEnabled = getIsTableStripingEnabled(
+    tableStripingPreference
+  );
+
+  return (
+    <TableRow
+      data-qa-sharegroup-row={id}
+      key={id}
+      rowborder={!isTableStripingEnabled}
+      zebra={isTableStripingEnabled}
+    >
+      <TableCell data-pendo-id={`Images Groups Owned-Group name`}>
+        <LinkButton onClick={() => {}}>{label}</LinkButton>
+      </TableCell>
+      <TableCell>{description}</TableCell>
+      <TableCell>{members_count}</TableCell>
+      <Hidden smDown>
+        <TableCell>{images_count}</TableCell>
+      </Hidden>
+      <Hidden lgDown>
+        <TableCell style={{ whiteSpace: 'nowrap' }}>
+          {created &&
+            formatDate(created, {
+              timezone: profile?.timezone,
+            })}
+        </TableCell>
+      </Hidden>
+      <Hidden lgDown>
+        <TableCell style={{ whiteSpace: 'nowrap' }}>
+          {updated !== null
+            ? formatDate(updated, { timezone: profile?.timezone })
+            : '–'}
+        </TableCell>
+      </Hidden>
+      <StyledActionMenuWrapper>
+        <ShareGroupActionMenu deleteButtonDisabled={!!members_count} />
+      </StyledActionMenuWrapper>
+    </TableRow>
+  );
+};

packages/manager/src/features/Images/ImagesLanding/v2/ShareGroups/ShareGroupTable.styles.ts

@@ -0,0 +1,20 @@
+import { styled } from '@mui/material/styles';
+import { TableCell } from 'akamai-cds-react-components/Table';
+
+export const StyledActionMenuWrapper = styled(TableCell, {
+  label: 'StyledActionMenuWrapper',
+})(({ theme }) => ({
+  justifyContent: 'flex-end',
+  display: 'flex',
+  alignItems: 'center',
+  maxWidth: 40,
+  '& button': {
+    padding: 0,
+    color: theme.tokens.alias.Content.Icon.Primary.Default,
+    backgroundColor: 'transparent',
+  },
+  '& button:hover': {
+    backgroundColor: 'transparent',
+    color: theme.tokens.alias.Content.Icon.Primary.Hover,
+  },
+}));

packages/manager/src/features/Images/ImagesLanding/v2/ShareGroups/ShareGroupsTabs.tsx → packages/manager/src/features/Images/ImagesLanding/v2/ShareGroups/ShareGroupsLanding.tsx

@@ -11,6 +11,7 @@ import { Tabs } from 'src/components/Tabs/Tabs';
 import { getSubTabIndex } from 'src/features/Images/utils';
 
 import { shareGroupsSubTabs as subTabs } from './shareGroupsTabsConfig';
+import { ShareGroupsView } from './ShareGroupsView';
 
 export const ShareGroupsTabs = () => {
   const navigate = useNavigate();
@@ -39,7 +40,7 @@ export const ShareGroupsTabs = () => {
       <Tabs index={subTabIndex} onChange={onTabChange}>
         <TabList>
           {subTabs.map((tab) => (
-            <Tab key={`images-${tab.type}`}>
+            <Tab data-pendo-id={tab.pendoId} key={`images-${tab.type}`}>
               {tab.title} {tab.isBeta ? <BetaChip /> : null}
             </Tab>
           ))}
@@ -49,7 +50,7 @@ export const ShareGroupsTabs = () => {
             {subTabs.map((tab, index) => (
               <SafeTabPanel index={index} key={`images-${tab.type}-content`}>
                 {tab.type === 'owned-groups' && (
-                  <Notice variant="info">Owned Groups is coming soon...</Notice>
+                  <ShareGroupsView type="owned-groups" />
                 )}
                 {tab.type === 'joined-groups' && (
                   <Notice variant="info">