upcoming: [M3-7874] - Linode Create Refactor - Marketplace - Part 1

packages/manager/.changeset/pr-10401-upcoming-features-1713899458134.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Linode Create Refactor - Marketplace - Part 1 ([#10401](https://github.com/linode/manager/pull/10401))

packages/manager/src/features/Linodes/LinodeCreatev2/Tabs/Marketplace/Marketplace.test.tsx

@@ -0,0 +1,74 @@
+import { userEvent } from '@testing-library/user-event';
+import React from 'react';
+
+import { renderWithThemeAndHookFormContext } from 'src/utilities/testHelpers';
+
+import { Marketplace } from './Marketplace';
+import { uniqueCategories } from './utilities';
+
+describe('Marketplace', () => {
+  it('should render a header', () => {
+    const { getByText } = renderWithThemeAndHookFormContext({
+      component: <Marketplace />,
+    });
+
+    const heading = getByText('Select an App');
+
+    expect(heading).toBeVisible();
+    expect(heading.tagName).toBe('H2');
+  });
+
+  it('should render a search field', () => {
+    const { getByPlaceholderText } = renderWithThemeAndHookFormContext({
+      component: <Marketplace />,
+    });
+
+    const input = getByPlaceholderText('Search for app name');
+
+    expect(input).toBeVisible();
+    expect(input).toBeEnabled();
+  });
+
+  it('should render a category select', () => {
+    const { getByPlaceholderText } = renderWithThemeAndHookFormContext({
+      component: <Marketplace />,
+    });
+
+    const input = getByPlaceholderText('Select category');
+
+    expect(input).toBeVisible();
+    expect(input).toBeEnabled();
+  });
+
+  it('should allow the user to select a category', async () => {
+    const {
+      getByLabelText,
+      getByPlaceholderText,
+      getByText,
+    } = renderWithThemeAndHookFormContext({
+      component: <Marketplace />,
+    });
+
+    const select = getByPlaceholderText('Select category');
+
+    await userEvent.click(select);
+
+    // Verify all categories are rendered in the dropdown list
+    for (const category of uniqueCategories) {
+      expect(getByText(category)).toBeVisible();
+    }
+
+    // Select a category
+    await userEvent.click(getByText('Databases'));
+
+    // Verify value updates
+    expect(select).toHaveDisplayValue('Databases');
+
+    // Verify the category can be cleared
+    const clearButton = getByLabelText('Clear');
+
+    await userEvent.click(clearButton);
+
+    expect(select).toHaveDisplayValue('');
+  });
+});

packages/manager/src/features/Linodes/LinodeCreatev2/Tabs/Marketplace/Marketplace.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+
+import { Autocomplete } from 'src/components/Autocomplete/Autocomplete';
+import { DebouncedSearchTextField } from 'src/components/DebouncedSearchTextField';
+import { Paper } from 'src/components/Paper';
+import { Stack } from 'src/components/Stack';
+import { Typography } from 'src/components/Typography';
+
+import { categoryOptions } from './utilities';
+
+export const Marketplace = () => {
+  return (
+    <Paper>
+      <Stack spacing={2}>
+        <Typography variant="h2">Select an App</Typography>
+        <Stack direction="row" flexWrap="wrap" gap={1}>
+          <DebouncedSearchTextField
+            InputProps={{ sx: { maxWidth: 'unset !important' } }}
+            containerProps={{ flexGrow: 1 }}
+            fullWidth
+            hideLabel
+            label="Search marketplace"
+            noMarginTop
+            placeholder="Search for app name"
+          />
+          <Autocomplete
+            textFieldProps={{
+              containerProps: { sx: { minWidth: 250 } },
+              hideLabel: true,
+            }}
+            label="Select category"
+            options={categoryOptions}
+            placeholder="Select category"
+          />
+        </Stack>
+      </Stack>
+    </Paper>
+  );
+};

packages/manager/src/features/Linodes/LinodeCreatev2/Tabs/Marketplace/utilities.ts

@@ -0,0 +1,18 @@
+import { oneClickApps } from 'src/features/OneClickApps/oneClickApps';
+
+/**
+ * Get all categories from our marketplace apps list so
+ * we can generate a dynamic list of category options.
+ */
+const categories = oneClickApps.reduce((acc, app) => {
+  return [...acc, ...app.categories];
+}, []);
+
+export const uniqueCategories = Array.from(new Set(categories));
+
+/**
+ * A list of unique categories to be shown in a Select/Autocomplete
+ */
+export const categoryOptions = uniqueCategories.map((category) => ({
+  label: category,
+}));

packages/manager/src/features/Linodes/LinodeCreatev2/index.tsx

@@ -23,6 +23,7 @@ import { Region } from './Region';
 import { Summary } from './Summary';
 import { Distributions } from './Tabs/Distributions';
 import { Images } from './Tabs/Images';
+import { Marketplace } from './Tabs/Marketplace/Marketplace';
 import { StackScripts } from './Tabs/StackScripts/StackScripts';
 import { UserData } from './UserData/UserData';
 import {
@@ -105,7 +106,9 @@ export const LinodeCreatev2 = () => {
               <SafeTabPanel index={0}>
                 <Distributions />
               </SafeTabPanel>
-              <SafeTabPanel index={1}>Marketplace</SafeTabPanel>
+              <SafeTabPanel index={1}>
+                <Marketplace />
+              </SafeTabPanel>
               <SafeTabPanel index={2}>
                 <StackScripts />
               </SafeTabPanel>