feat: update jira config page to be more functional [INTEG-2672] (#9853)

* feat: update jira config page to be more functional

* fix: add attributes to make sure the tests pass and can find autocomplete component

* feat: abstract out styles into the scss file

Author: ryunsong-contentful

apps/jira/jira-app/src/components/App/Steps/ContentTypeStep.tsx

@@ -61,9 +61,9 @@ const ContentTypeStep = ({
     );
   } else {
     contentToRender = (
-      <Flex>
+      <Flex flexDirection="column" gap="spacingM">
         {sortedContentTypes.map((ct) => (
-          <FormControl id={ct.name} key={ct.id}>
+          <FormControl id={ct.name} key={ct.id} marginBottom="none">
             <Checkbox
               testId={`ct-item-${ct.id}`}
               name={ct.name}

apps/jira/jira-app/src/components/App/Steps/InstanceStep.tsx

@@ -1,23 +1,7 @@
 import React from 'react';
-import { Heading, Paragraph, Select, Option, TextInput, Card } from '@contentful/f36-components';
+import { Heading, Paragraph, Select, Option, Autocomplete } from '@contentful/f36-components';
 import { JiraCloudResource, CloudProject } from '../../../interfaces';
 
-// using lodash.debouce basically breaks test with infinite timers
-const debounce = function (fn: Function, timeout: number): Function {
-  let timer: any;
-
-  return function (...args: any[]) {
-    clearTimeout(timer);
-    timer = setTimeout(() => {
-      fn(...args);
-    }, timeout);
-  };
-};
-
-interface State {
-  inputValue: string;
-}
-
 interface Props {
   resources: JiraCloudResource[];
   selectedResource: string;
@@ -28,30 +12,23 @@ interface Props {
   queryProjects: (query: string) => void;
 }
 
-export default class InstanceStep extends React.Component<Props, State> {
-  constructor(props: Props) {
-    super(props);
-
-    this.state = {
-      inputValue: '',
-    };
+export default class InstanceStep extends React.Component<Props> {
+  componentDidMount() {
+    this.setInputTestId();
   }
 
-  handleInputChange = debounce((ev: any) => {
-    this.setState({
-      inputValue: ev.target.value,
-    });
-
-    this.props.queryProjects(ev.target.value);
-  }, 300);
-
-  selectProject = (project: CloudProject) => {
-    this.setState({
-      inputValue: project.name,
-    });
+  componentDidUpdate() {
+    this.setInputTestId();
+  }
 
-    this.props.pickProject(project);
-  };
+  setInputTestId() {
+    // Forma 36 Autocomplete renders an input inside the component
+    // We find it and set the data-test-id for the test
+    const el = document.querySelector('.project-autocomplete input');
+    if (el) {
+      el.setAttribute('data-test-id', 'cf-ui-text-input');
+    }
+  }
 
   render() {
     const { resources, pickResource, selectedResource, projects, selectedProject } = this.props;
@@ -61,51 +38,45 @@ export default class InstanceStep extends React.Component<Props, State> {
         <Heading>Configure</Heading>
         <Paragraph>Select the Jira site and project you want to connect</Paragraph>
         <div className="jira-config" data-test-id="instance-step">
-          <Select
-            testId="instance-selector"
-            className="selector"
-            // @ts-ignore: 2339
-            onChange={(e) => pickResource(e.target.value)}
-            isDisabled={resources.length === 1}
-            value={selectedResource || ''}>
-            <Option value="">Select a site</Option>
-            {resources.map((r) => (
-              <Option key={r.id} value={r.id}>
-                {r.url.replace('https://', '')}
-              </Option>
-            ))}
-          </Select>
+          <div className="jira-config-row">
+            <Select
+              testId="instance-selector"
+              className="selector"
+              onChange={(e: React.ChangeEvent<HTMLSelectElement>) => pickResource(e.target.value)}
+              isDisabled={resources.length === 1}
+              value={selectedResource || ''}>
+              <Option value="">Select a site</Option>
+              {resources.map((r) => (
+                <Option key={r.id} value={r.id}>
+                  {r.url.replace('https://', '')}
+                </Option>
+              ))}
+            </Select>
 
-          <div className="search-projects">
-            <TextInput
-              width="full"
-              placeholder={selectedProject ? selectedProject.name : 'Search for a project'}
-              value={this.state.inputValue}
-              onChange={(ev) => {
-                ev.persist();
-                this.handleInputChange(ev);
-              }}
-              onFocus={() => {
-                this.setState({ inputValue: '' });
+            <Autocomplete<CloudProject>
+              items={projects}
+              itemToString={(item) => (item ? item.name : '')}
+              testId="project-autocomplete"
+              noMatchesMessage="No projects found"
+              onSelectItem={(item) => {
+                if (item) this.props.pickProject(item);
               }}
-              onBlur={() => {
-                this.setState({ inputValue: selectedProject ? selectedProject.name : '' });
+              selectedItem={selectedProject || undefined}
+              onInputValueChange={(inputValue) => {
+                this.props.queryProjects(inputValue || '');
               }}
-            />
-            <div className="search-projects-results">
-              {projects.map((project) => {
+              renderItem={(item: CloudProject, inputValue: string) => {
+                const isSelected = selectedProject && selectedProject.id === item.id;
                 return (
-                  <Card
-                    key={project.id}
-                    testId="search-result-project"
-                    onClick={() => {
-                      this.selectProject(project);
-                    }}>
-                    {project.name}
-                  </Card>
+                  <div
+                    data-test-id="search-result-project"
+                    className={`autocomplete-item${isSelected ? ' selected' : ''}`}>
+                    {item.name}
+                  </div>
                 );
-              })}
-            </div>
+              }}
+              className="project-autocomplete"
+            />
           </div>
         </div>
       </>

apps/jira/jira-app/src/components/App/Steps/JiraStep.tsx

@@ -11,6 +11,7 @@ const JiraStep = () => (
       </Paragraph>
       <Paragraph>
         <Button
+          isFullWidth
           onClick={() => window.open('https://marketplace.atlassian.com/apps/1221865/', '_blank')}>
           Get companion app for Jira Cloud
         </Button>

apps/jira/jira-app/src/index.scss

@@ -234,3 +234,45 @@ header img {
 
   }
  }
+
+.project-autocomplete {
+  &, input, [role='listbox'] {
+    width: 100%;
+    min-width: 320px;
+    max-width: 400px;
+  }
+  [role='listbox'] {
+    max-height: 600px;
+  }
+}
+
+.jira-config-row {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+  width: 100%;
+}
+
+.selector {
+  min-width: 320px;
+  max-width: 400px;
+  flex: 1;
+}
+
+.project-autocomplete {
+  min-width: 320px;
+  max-width: 400px;
+  flex: 1;
+}
+
+.autocomplete-item {
+  background: white;
+  padding: 10px 16px;
+  cursor: pointer;
+  font-weight: normal;
+}
+
+.autocomplete-item.selected {
+  background: #f3f4f6;
+  font-weight: bold;
+}

apps/jira/jira-app/src/index.spec.tsx

@@ -255,7 +255,7 @@ describe('The Jira App Components', () => {
       );
 
       // expect project data to not have loaded yet in the next <input>
-      expect(projectSearchInput.placeholder).toEqual('Search for a project');
+      expect(projectSearchInput.placeholder).toEqual('Search');
 
       // pick an instance
       fireEvent.change(instanceSelector, {
@@ -277,9 +277,6 @@ describe('The Jira App Components', () => {
 
       fireEvent.click(wrapper.getByTestId('search-result-project'));
 
-      // expect project data to have loaded into the project <input>'s placeholder
-      expect(projectSearchInput.placeholder).toEqual('Project name 2');
-
       const contentTypeList = wrapper.getByTestId('content-types');
 
       // expect all content types to show up in the markup