Prevent initial scroll on operator hub page

frontend/__mocks__/operatorHubItemsMocks.ts

@@ -307,6 +307,7 @@ export const operatorHubTileViewPageProps = {
   items: [
     {
       obj: amqPackageManifest,
+      installState: 'Installed',
       kind: 'PackageManifest',
       name: 'amq-streams',
       uid: 'amq-streams/openshift-operator-lifecycle-manager',
@@ -327,6 +328,7 @@ export const operatorHubTileViewPageProps = {
     },
     {
       obj: etcdPackageManifest,
+      installState: 'Not Installed',
       kind: 'PackageManifest',
       name: 'etcd',
       uid: 'etcd/openshift-operator-lifecycle-manager',
@@ -346,6 +348,7 @@ export const operatorHubTileViewPageProps = {
       categories: ['database'],
     },
     { obj: federationv2PackageManifest,
+      installState: 'Not Installed',
       kind: 'PackageManifest',
       name: 'federationv2',
       uid: 'federationv2/openshift-operator-lifecycle-manager',
@@ -365,6 +368,7 @@ export const operatorHubTileViewPageProps = {
       categories: [],
     },
     { obj: prometheusPackageManifest,
+      installState: 'Not Installed',
       kind: 'PackageManifest',
       name: 'prometheus',
       uid: 'prometheus/openshift-operator-lifecycle-manager',
@@ -384,6 +388,7 @@ export const operatorHubTileViewPageProps = {
       categories: ['monitoring', 'alerting'],
     },
     { obj: svcatPackageManifest,
+      installState: 'Not Installed',
       kind: 'PackageManifest',
       name: 'svcat',
       uid: 'svcat/openshift-operator-lifecycle-manager',
@@ -440,6 +445,8 @@ export const operatorHubTileViewPagePropsWithDummy = {
 export const filterCounts = {
   CoreOS: 1,
   'Red Hat': 4,
+  Installed: 1,
+  'Not Installed': 4,
 };
 
 export const operatorHubCategories = [

frontend/__tests__/components/operator-hub/operator-hub.spec.tsx

@@ -95,7 +95,7 @@ describe(OperatorHubTileView.displayName, () => {
     const filterItems = wrapper.find(FilterSidePanel.CategoryItem);
     expect(filterItems.exists()).toBe(true);
 
-    expect(filterItems.length).toBe(2); // Filter by Provider
+    expect(filterItems.length).toBe(4); // Filter by Provider and Install State
     filterItems.forEach((filter) => {
       expect(filter.props().count).toBe(filterCounts[_.split(filter.childAt(0).text(), '(')[0]]);
     });
@@ -107,14 +107,14 @@ describe(OperatorHubTileView.displayName, () => {
     const filterItemsChanged = wrapper.find(FilterSidePanel.CategoryItem);
     expect(filterItemsChanged.exists()).toBe(true);
 
-    expect(filterItemsChanged.length).toEqual(3); // Filter by Provider
+    expect(filterItemsChanged.length).toEqual(5); // Filter by Provider and Install State
 
     wrapper.setProps(operatorHubTileViewPageProps);
     wrapper.update();
     const filterItemsFinal = wrapper.find(FilterSidePanel.CategoryItem);
     expect(filterItemsFinal.exists()).toBe(true);
 
-    expect(filterItemsFinal.length).toEqual(2); // Filter by Provider
+    expect(filterItemsFinal.length).toEqual(4); // Filter by Provider and Install State
   });
 
   it('renders category tabs', () => {

frontend/public/components/operator-hub/operator-hub-items.tsx

@@ -126,6 +126,20 @@ const sortFilterValues = (values, field) => {
 const determineAvailableFilters = (initialFilters, items, filterGroups) => {
   const filters = _.cloneDeep(initialFilters);
 
+  // Always show both install state filters
+  filters.installState = {
+    Installed: {
+      label: 'Installed',
+      value: 'Installed',
+      active: false,
+    },
+    'Not Installed': {
+      label: 'Not Installed',
+      value: 'Not Installed',
+      active: false,
+    },
+  };
+
   _.each(filterGroups, field => {
     const values = [];
     _.each(items, item => {
@@ -162,6 +176,7 @@ export const keywordCompare = (filterString, item) => {
   }
 
   return item.name.toLowerCase().includes(filterString) ||
+    _.get(item, 'obj.metadata.name', '').toLowerCase().includes(filterString) ||
     (item.description && item.description.toLowerCase().includes(filterString)) ||
     (item.tags && item.tags.includes(filterString));
 };

frontend/public/components/utils/tile-view-page.jsx

@@ -444,6 +444,7 @@ export class TileViewPage extends React.Component {
     const activeValues = getActiveValuesFromURL(availableFilters, filterGroups);
 
     this.setState({...this.getUpdatedState(categories, activeValues.selectedCategoryId, activeValues.activeFilters) });
+    this.filterByKeywordInput.focus({preventScroll: true});
   }
 
   componentWillUnmount() {
@@ -515,7 +516,7 @@ export class TileViewPage extends React.Component {
 
     this.updateMountedState(this.getUpdatedState(categories, selectedCategoryId, clearedFilters));
 
-    this.filterByKeywordInput.focus();
+    this.filterByKeywordInput.focus({preventScroll: true});
   }
 
   selectCategory(categoryId) {
@@ -616,7 +617,6 @@ export class TileViewPage extends React.Component {
           <FormControl
             type="text"
             inputRef={(ref) => this.filterByKeywordInput = ref}
-            autoFocus={true}
             placeholder="Filter by keyword..."
             bsClass="form-control"
             value={activeFilters.keyword.value}

frontend/public/const.js

@@ -31,8 +31,7 @@ export const COMMUNITY_PROVIDERS_WARNING_LOCAL_STORAGE_KEY = `${STORAGE_PREFIX}/
 export const KUBE_ADMIN_USERNAME = 'kube:admin';
 
 export const OPERATOR_HUB_CSC_BASE = 'installed';
-// TODO: Update this once we have the support link
-export const RH_OPERATOR_SUPPORT_POLICY_LINK = 'https://access.redhat.com/articles/1067';
+export const RH_OPERATOR_SUPPORT_POLICY_LINK = 'https://access.redhat.com/third-party-software-support';
 
 // Package manifests for the Operator Hub use this label.
 export const OPERATOR_HUB_LABEL = 'openshift-marketplace';