Feat(ImageStream): Autocomplete ISTag dropdown #4714

abhinandan13jan · 2020-03-11T10:18:10Z

Fixes:
Addresses https://issues.redhat.com/browse/ODC-2430

Analysis / Root cause:
TypeAhead missing in imagestreamTag dropdown

Solution Description:
TypeAhead(autocompleteFilter) added to imagestreamTagdropdown at the child Dropdown Component

Screenshot

Test coverage
Added test Suite for Deploy image. Added test for DropdownField

Browser conformation
Chrome 73

karthikjeeyar · 2020-03-11T11:41:30Z

@abhinandan13jan I have verified locally, works as expected
Please use the template in PR description and test case could have assertions like autocomplete property is set or not in the dropdown component.

andrewballantyne · 2020-03-11T15:00:29Z

/kind feature

christianvogt · 2020-03-11T22:03:40Z

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;
+  autoComplete?: boolean;


There are several instances in the console where an autocompleteFilter other than fuzzy is being used. I suggest we keep the DropdownField generic and accept an auto complete filter function.

Suggested change

autoComplete?: boolean;

autocompleteFilter?: (text: string, item: object, key: string) => boolean;

christianvogt · 2020-03-11T22:03:57Z

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

@@ -28,6 +29,7 @@ const DropdownField: React.FC<DropdownFieldProps> = ({ label, helpText, required
      <Dropdown
        {...props}
        id={fieldId}
+        autocompleteFilter={props.autoComplete ? fuzzy : undefined}


DropdownField is used in other places like builder image Tag selection. So if it is not configurable we will end up having autocomplete in all the dropdowns.

eg:

christianvogt · 2020-03-11T22:04:03Z

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import cx from 'classnames';
+import * as fuzzy from 'fuzzysearch';


christianvogt · 2020-03-11T22:05:10Z

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

@@ -111,6 +111,7 @@ const ImageStreamTagDropdown: React.FC = () => {
      label="Tag"
      items={imageStreamTagList}
      key={imageStream.image}
+      autoComplete


Import fuzzy then:

Suggested change

autoComplete

autocompleteFilter={fuzzy}

sahil143 · 2020-03-16T15:42:06Z

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

+  const deployImagePageProps: 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: 'my-project',
+      },
+    },
+  };
+  const deployImagePageWrapper: ReactWrapper = mount(
+    <DeployImagePage {...deployImagePageProps} />,
+    {
+      wrappingComponent: ({ children }) => <Provider store={store}>{children}</Provider>,
+    },
+  );


should put this setup in beforeAll() block and declare the variables in describe block

The props initialization is not working when put in beforeEach/beforeAll? what is wrong with the existing scoping?

All the setup for unit-tests should be done in either beforeAll or beforeEach depending on the usage. it works when put in beforeAll block.

I've updated...

sahil143 · 2020-03-16T15:42:24Z

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

+  const deployImageProps: DeployImageProps = {
+    projects: {
+      data: [],
+      loaded: false,
+    },
+    namespace: 'my-project',
+  };
+
+  const deployImageWrapper: ReactWrapper = mount(<DeployImage {...deployImageProps} />, {
+    wrappingComponent: ({ children }) => <Provider store={store}>{children}</Provider>,
+  });


same as above

sahil143

/lgtm

abhinandan13jan · 2020-03-18T08:45:32Z

/test images
/test e2e-gcp-console

invincibleJai · 2020-03-18T13:50:35Z

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

+        path: 'deploy-image/ns/openshift?preselected-ns=openshift',
+        url: 'deploy-image/ns/openshift?preselected-ns=openshift',
+        params: {
+          ns: 'my-project',
+        },


nit: we can use same namespace in params and url/path

invincibleJai · 2020-03-18T15:45:11Z

/lgtm

christianvogt · 2020-03-20T18:41:26Z

/approve

openshift-ci-robot · 2020-03-20T18:41:46Z

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: abhinandan13jan, christianvogt, invincibleJai, sahil143

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Needs approval from an approver in each of these files:

~~frontend/OWNERS~~ [christianvogt]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

openshift-bot · 2020-03-20T19:18:11Z

/retest

Please review the full test history for this PR and help us cut down flakes.

openshift-ci-robot added do-not-merge/work-in-progress Indicates that a PR should not merge because it is a work in progress. size/M Denotes a PR that changes 30-99 lines, ignoring generated files. labels Mar 11, 2020

openshift-ci-robot requested review from karthikjeeyar and zherman0 March 11, 2020 10:18

openshift-ci-robot added component/core Related to console core functionality component/dev-console Related to dev-console component/shared Related to console-shared labels Mar 11, 2020

abhinandan13jan force-pushed the is-tag-auto branch from 8289359 to b6d2edb Compare March 11, 2020 10:39

openshift-ci-robot added size/XS Denotes a PR that changes 0-9 lines, ignoring generated files. and removed size/M Denotes a PR that changes 30-99 lines, ignoring generated files. labels Mar 11, 2020

abhinandan13jan changed the title ~~[WIP] Is tag auto~~ Feat(ImageStream): Autocoplete ISTag dropdown Mar 11, 2020

openshift-ci-robot removed the do-not-merge/work-in-progress Indicates that a PR should not merge because it is a work in progress. label Mar 11, 2020

abhinandan13jan force-pushed the is-tag-auto branch from b6d2edb to b1eef13 Compare March 11, 2020 10:52

abhinandan13jan changed the title ~~Feat(ImageStream): Autocoplete ISTag dropdown~~ Feat(ImageStream): Autocomplete ISTag dropdown Mar 11, 2020

openshift-ci-robot added the kind/feature Categorizes issue or PR as related to a new feature. label Mar 11, 2020

christianvogt reviewed Mar 11, 2020

View reviewed changes

abhinandan13jan force-pushed the is-tag-auto branch from b1eef13 to b3f22f3 Compare March 13, 2020 12:41

openshift-ci-robot added size/M Denotes a PR that changes 30-99 lines, ignoring generated files. and removed size/XS Denotes a PR that changes 0-9 lines, ignoring generated files. labels Mar 13, 2020

abhinandan13jan force-pushed the is-tag-auto branch 2 times, most recently from 5bc72a3 to eae402d Compare March 16, 2020 08:33

sahil143 reviewed Mar 16, 2020

View reviewed changes

abhinandan13jan force-pushed the is-tag-auto branch from eae402d to 5f021a3 Compare March 17, 2020 08:56

sahil143 reviewed Mar 18, 2020

View reviewed changes

openshift-ci-robot assigned sahil143 Mar 18, 2020

openshift-ci-robot added the lgtm Indicates that a PR is ready to be merged. label Mar 18, 2020

invincibleJai reviewed Mar 18, 2020

View reviewed changes

Autocomplete Tag field

e377734

abhinandan13jan force-pushed the is-tag-auto branch from 5f021a3 to e377734 Compare March 18, 2020 15:30

openshift-ci-robot removed the lgtm Indicates that a PR is ready to be merged. label Mar 18, 2020

openshift-ci-robot assigned invincibleJai Mar 18, 2020

openshift-ci-robot added the lgtm Indicates that a PR is ready to be merged. label Mar 18, 2020

openshift-ci-robot added the approved Indicates a PR has been approved by an approver from all required OWNERS files. label Mar 20, 2020

openshift-merge-robot merged commit 238ddf7 into openshift:master Mar 20, 2020

spadgett added this to the v4.5 milestone Mar 23, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feat(ImageStream): Autocomplete ISTag dropdown #4714

Feat(ImageStream): Autocomplete ISTag dropdown #4714

abhinandan13jan commented Mar 11, 2020 •

edited

karthikjeeyar commented Mar 11, 2020

andrewballantyne commented Mar 11, 2020

christianvogt Mar 11, 2020

abhinandan13jan Mar 13, 2020

christianvogt Mar 11, 2020

karthikjeeyar Mar 12, 2020

abhinandan13jan Mar 13, 2020

christianvogt Mar 11, 2020

abhinandan13jan Mar 13, 2020

christianvogt Mar 11, 2020

abhinandan13jan Mar 13, 2020

sahil143 Mar 16, 2020

abhinandan13jan Mar 17, 2020

sahil143 Mar 17, 2020

abhinandan13jan Mar 17, 2020

sahil143 Mar 16, 2020

sahil143 left a comment

abhinandan13jan commented Mar 18, 2020

invincibleJai Mar 18, 2020

abhinandan13jan Mar 18, 2020

invincibleJai commented Mar 18, 2020

christianvogt commented Mar 20, 2020

openshift-ci-robot commented Mar 20, 2020

openshift-bot commented Mar 20, 2020

	autoComplete?: boolean;
	autocompleteFilter?: (text: string, item: object, key: string) => boolean;

Feat(ImageStream): Autocomplete ISTag dropdown #4714

Feat(ImageStream): Autocomplete ISTag dropdown #4714

Conversation

abhinandan13jan commented Mar 11, 2020 • edited

karthikjeeyar commented Mar 11, 2020

andrewballantyne commented Mar 11, 2020

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sahil143 left a comment

Choose a reason for hiding this comment

abhinandan13jan commented Mar 18, 2020

Choose a reason for hiding this comment

Choose a reason for hiding this comment

invincibleJai commented Mar 18, 2020

christianvogt commented Mar 20, 2020

openshift-ci-robot commented Mar 20, 2020

openshift-bot commented Mar 20, 2020

abhinandan13jan commented Mar 11, 2020 •

edited