refactor: Disable templates dropdown when templates array is empty

src/Components/TemplateSelect/TemplateSelect.test.js

@@ -3,6 +3,7 @@ import TemplateSelect from '.';
 import userEvent from '@testing-library/user-event';
 import { render, screen } from '../../mocks/utils';
 import { templates } from '../../mocks/fixtures/templates.fixtures';
+import { provisioningUrl } from '../../API/helpers';
 
 describe('TemplateSelect', () => {
   test('get all templates options', async () => {
@@ -23,4 +24,20 @@ describe('TemplateSelect', () => {
     const placeholder = await screen.findByText('Select templates');
     expect(placeholder).toBeInTheDocument();
   });
+
+  test('when templates array is empty it should be disabled', async () => {
+    const { server, rest } = window.msw;
+    const chosenSource = '1';
+    server.use(
+      rest.get(provisioningUrl(`sources/${chosenSource}/launch_templates`), (req, res, ctx) => {
+        return res(ctx.status(200), ctx.json([]));
+      })
+    );
+    render(<TemplateSelect />, { provider: 'aws', contextValues: { chosenSource: chosenSource } });
+    const selectDropdown = await screen.findByText('No template found');
+    await userEvent.click(selectDropdown);
+
+    const placeholder = await screen.findByText('No template found');
+    expect(placeholder).toBeInTheDocument();
+  });
 });

src/Components/TemplateSelect/index.js

@@ -51,10 +51,11 @@ const TemplatesSelect = () => {
       onToggle={(openState) => setIsOpen(openState)}
       selections={chosenTemplateName}
       onSelect={onSelect}
-      placeholderText="Select templates"
+      placeholderText={templates?.length === 0 ? 'No template found' : 'Select templates'}
       aria-label="Select templates"
       clearSelectionsAriaLabel="clear template selection"
       onClear={onClear}
+      isDisabled={templates?.length === 0}
     >
       {templates && selectItemsMapper()}
     </Select>