Autocomplete Tag field

frontend/packages/console-shared/src/components/formik-fields/__tests__/DropdownField.spec.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { shallow } from 'enzyme';
+import { Dropdown } from '@console/internal/components/utils';
+import DropdownField from '../DropdownField';
+
+jest.mock('formik', () => ({
+  useField: jest.fn(() => [{}, {}]),
+  useFormikContext: jest.fn(() => ({
+    setFieldValue: jest.fn(),
+    setFieldTouched: jest.fn(),
+    validateForm: jest.fn(),
+  })),
+  getFieldId: jest.fn(),
+}));
+describe('DropdownField', () => {
+  it('should pass through autocompleteFilter to Dropdown', () => {
+    const filterFn = jest.fn<React.ComponentProps<typeof DropdownField>['autocompleteFilter']>();
+    const wrapper = shallow(<DropdownField name="test" items={{}} autocompleteFilter={filterFn} />);
+    expect(
+      wrapper
+        .find(Dropdown)
+        .first()
+        .props().autocompleteFilter,
+    ).toBe(filterFn);
+  });
+});

frontend/packages/console-shared/src/components/formik-fields/field-types.ts

@@ -44,6 +44,7 @@ export interface DropdownFieldProps extends FieldProps {
   title?: React.ReactNode;
   fullWidth?: boolean;
   disabled?: boolean;
+  autocompleteFilter?: (text: string, item: object, key: string) => boolean;
   onChange?: (value: string) => void;
 }
 

frontend/packages/dev-console/src/components/import/__tests__/DeployImage.spec.tsx

@@ -0,0 +1,92 @@
+import * as React from 'react';
+import { mount, ReactWrapper } from 'enzyme';
+import { Provider } from 'react-redux';
+import { Radio } from '@patternfly/react-core';
+import store from '@console/internal/redux';
+import { PageHeading, ButtonBar } from '@console/internal/components/utils/';
+import NamespacedPage from '../../NamespacedPage';
+import DeployImagePage from '../DeployImagePage';
+import DeployImage from '../DeployImage';
+import ImageSearchSection from '../image-search/ImageSearchSection';
+import AppSection from '../app/AppSection';
+import AdvancedSection from '../advanced/AdvancedSection';
+import ResourceSection from '../section/ResourceSection';
+
+describe('DeployImage Page Test', () => {
+  type DeployImagePageProps = React.ComponentProps<typeof DeployImagePage>;
+  let deployImagePageProps: DeployImagePageProps;
+  let deployImagePageWrapper: ReactWrapper;
+  beforeAll(() => {
+    deployImagePageProps = {
+      history: null,
+      location: {
+        pathname: 'deploy-image/ns/openshift?preselected-ns=openshift',
+        search: 'deploy-image/ns/openshift?preselected-ns=openshift',
+        state: null,
+        hash: null,
+      },
+      match: {
+        isExact: true,
+        path: 'deploy-image/ns/openshift?preselected-ns=openshift',
+        url: 'deploy-image/ns/openshift?preselected-ns=openshift',
+        params: {
+          ns: 'openshift',
+        },
+      },
+    };
+    deployImagePageWrapper = mount(<DeployImagePage {...deployImagePageProps} />, {
+      wrappingComponent: ({ children }) => <Provider store={store}>{children}</Provider>,
+    });
+  });
+  it('should render a namespaced page', () => {
+    expect(deployImagePageWrapper.find(NamespacedPage).exists()).toBe(true);
+  });
+  it('should render correct page title', () => {
+    expect(deployImagePageWrapper.find(PageHeading).exists()).toBe(true);
+    expect(deployImagePageWrapper.find(PageHeading).prop('title')).toBe('Deploy Image');
+  });
+});
+
+describe('Deploy Image Test', () => {
+  type DeployImageProps = React.ComponentProps<typeof DeployImage>;
+  let deployImageProps: DeployImageProps;
+  let deployImageWrapper: ReactWrapper;
+  beforeAll(() => {
+    deployImageProps = {
+      projects: {
+        data: [],
+        loaded: false,
+      },
+      namespace: 'my-project',
+    };
+    deployImageWrapper = mount(<DeployImage {...deployImageProps} />, {
+      wrappingComponent: ({ children }) => <Provider store={store}>{children}</Provider>,
+    });
+  });
+
+  it('should load correct image search section radiobutton group', () => {
+    expect(deployImageWrapper.find(ImageSearchSection).exists()).toBe(true);
+    const radioButtons = deployImageWrapper.find(ImageSearchSection).find(Radio);
+    expect(radioButtons.exists()).toBe(true);
+    expect(radioButtons.length).toEqual(2);
+    expect(radioButtons.at(0).prop('value')).toBe('external');
+    expect(radioButtons.at(0).prop('label')).toBe('Image name from external registry');
+    expect(radioButtons.at(0).prop('isChecked')).toBe(true);
+    expect(radioButtons.at(1).prop('value')).toBe('internal');
+    expect(radioButtons.at(1).prop('label')).toBe('Image stream tag from internal registry');
+    expect(radioButtons.at(1).prop('isChecked')).toBe(false);
+  });
+
+  it('should load  correct app section', () => {
+    expect(deployImageWrapper.find(AppSection).exists()).toBe(true);
+  });
+  it('should load  correct resource section', () => {
+    expect(deployImageWrapper.find(ResourceSection).exists()).toBe(true);
+  });
+  it('should load  correct advanced section', () => {
+    expect(deployImageWrapper.find(AdvancedSection).exists()).toBe(true);
+  });
+  it('should load  correct button bar', () => {
+    expect(deployImageWrapper.find(ButtonBar).exists()).toBe(true);
+  });
+});

frontend/packages/dev-console/src/components/import/image-search/ImageStreamTagDropdown.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import * as _ from 'lodash';
+import * as fuzzy from 'fuzzysearch';
 import { useFormikContext, FormikValues, getIn } from 'formik';
 import { ValidatedOptions } from '@patternfly/react-core';
 import { DropdownField } from '@console/shared';
@@ -111,6 +112,7 @@ const ImageStreamTagDropdown: React.FC = () => {
       label="Tag"
       items={imageStreamTagList}
       key={imageStream.image}
+      autocompleteFilter={fuzzy}
       title={
         imageStream.tag ||
         (isNamespaceSelected && isImageStreamSelected && !isTagsAvailable ? 'No Tag' : 'Select Tag')