Merge pull request #7390 from jerolimov/odc-5111-dropdown

Save dropdown bookmarks and favoriteKey in user settings
openshift · Dec 5, 2020 · caee4d0 · caee4d0
2 parents 4660f79 + b05cbe0
commit caee4d0
Show file tree

Hide file tree

Showing 9 changed files with 124 additions and 117 deletions.
diff --git a/frontend/packages/console-shared/src/components/dropdown/ResourceDropdown.tsx b/frontend/packages/console-shared/src/components/dropdown/ResourceDropdown.tsx
@@ -50,6 +50,7 @@ interface ResourceDropdownProps {
   title?: React.ReactNode;
   titlePrefix?: string;
   allApplicationsKey?: string;
+  userSettingsPrefix?: string;
   storageKey?: string;
   disabled?: boolean;
   allSelectorItem?: {
@@ -287,6 +288,7 @@ class ResourceDropdown extends React.Component<ResourceDropdownProps, State> {
         selectedKey={this.props.selectedKey}
         title={this.props.title || this.state.title}
         autocompletePlaceholder={this.props.placeholder}
+        userSettingsPrefix={this.props.userSettingsPrefix}
         storageKey={this.props.storageKey}
         disabled={this.props.disabled}
       />

diff --git a/frontend/packages/console-shared/src/components/dropdown/__tests__/ResourceDropdown.spec.tsx b/frontend/packages/console-shared/src/components/dropdown/__tests__/ResourceDropdown.spec.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { shallow } from 'enzyme';
+import { shallow, mount } from 'enzyme';
 import ResourceDropdown from '../ResourceDropdown';
 import { mockDropdownData } from '../__mocks__/dropdown-data-mock';
 
@@ -14,6 +14,12 @@ jest.mock('react-i18next', () => {
   };
 });
 
+jest.mock('@console/shared/src/hooks/useUserSettingsCompatibility', () => {
+  return {
+    useUserSettingsCompatibility: () => ['', () => {}],
+  };
+});
+
 const componentFactory = (props = {}) => (
   <ResourceDropdown
     placeholder="Select an Item"
@@ -141,24 +147,21 @@ describe('ResourceDropdown test suite', () => {
     const spy = jest.fn();
     const preventDefault = jest.fn();
     const stopPropagation = jest.fn();
-    const component = shallow(
+    const component = mount(
       componentFactory({ onChange: spy, selectedKey: 'app-group-1', id: 'dropdown1' }),
     );
     component.setProps({ resources: mockDropdownData, selectedKey: 'app-group-2' });
     setTimeout(() => {
       expect(spy).toHaveBeenCalledWith('app-group-2', 'app-group-2', mockDropdownData[0].data[1]);
     }, 0);
 
-    const dropdownComponent = component.find('Dropdown#dropdown1').shallow();
-    const dropdownBtn = dropdownComponent.find('button#dropdown1');
+    const dropdownBtn = component.find('button#dropdown1');
     dropdownBtn.simulate('click', { preventDefault });
 
-    const dropdownItem = dropdownComponent
-      .find('DropDownRow')
-      .last()
-      .shallow()
-      .find('#app-group-3-link');
+    const dropdownRows = component.find('DropDownRow');
+    const dropdownItem = dropdownRows.last().find('#app-group-3-link');
     dropdownItem.simulate('click', { preventDefault, stopPropagation });
+
     expect(component.state('title')).toEqual('app-group-3');
   });
 

diff --git a/frontend/packages/console-shared/src/components/dynamic-form/fields.tsx b/frontend/packages/console-shared/src/components/dynamic-form/fields.tsx
@@ -331,7 +331,7 @@ export const DropdownField: React.FC<FieldProps> = ({
   uiSchema = {},
 }) => {
   const { t } = useTranslation();
-  const { items, title } = getUiOptions(uiSchema);
+  const { items, title } = getUiOptions(uiSchema) as { items?: object; title?: string };
   return (
     <Dropdown
       id={idSchema.$id}

diff --git a/frontend/packages/console-shared/src/constants/common.ts b/frontend/packages/console-shared/src/constants/common.ts
@@ -33,7 +33,9 @@ export const STORAGE_PREFIX = 'bridge';
 export const USERSETTINGS_PREFIX = 'console';
 
 // This localStorage key predates the storage prefix.
+export const NAMESPACE_USERSETTINGS_PREFIX = `${USERSETTINGS_PREFIX}.namespace`;
 export const NAMESPACE_LOCAL_STORAGE_KEY = 'dropdown-storage-namespaces';
+export const APPLICATION_USERSETTINGS_PREFIX = `${USERSETTINGS_PREFIX}.applications`;
 export const APPLICATION_LOCAL_STORAGE_KEY = 'dropdown-storage-applications';
 export const LAST_NAMESPACE_NAME_LOCAL_STORAGE_KEY = `${STORAGE_PREFIX}/last-namespace-name`;
 export const API_DISCOVERY_RESOURCES_LOCAL_STORAGE_KEY = `${STORAGE_PREFIX}/api-discovery-resources`;

diff --git a/frontend/packages/topology/src/components/dropdowns/ApplicationDropdown.tsx b/frontend/packages/topology/src/components/dropdowns/ApplicationDropdown.tsx
@@ -15,6 +15,7 @@ interface ApplicationDropdownProps {
   title?: React.ReactNode;
   titlePrefix?: string;
   allApplicationsKey?: string;
+  userSettingsPrefix?: string;
   storageKey?: string;
   disabled?: boolean;
   allSelectorItem?: {

diff --git a/frontend/packages/topology/src/components/dropdowns/NamespaceBarApplicationSelector.tsx b/frontend/packages/topology/src/components/dropdowns/NamespaceBarApplicationSelector.tsx
@@ -5,6 +5,7 @@ import {
   ALL_NAMESPACES_KEY,
   ALL_APPLICATIONS_KEY,
   UNASSIGNED_APPLICATIONS_KEY,
+  APPLICATION_USERSETTINGS_PREFIX,
   APPLICATION_LOCAL_STORAGE_KEY,
 } from '@console/shared';
 import { setActiveApplication } from '@console/internal/actions/ui';
@@ -72,6 +73,7 @@ const NamespaceBarApplicationSelector: React.FC<Props> = ({
       }}
       selectedKey={application || ALL_APPLICATIONS_KEY}
       onChange={onApplicationChange}
+      userSettingsPrefix={APPLICATION_USERSETTINGS_PREFIX}
       storageKey={APPLICATION_LOCAL_STORAGE_KEY}
       disabled={disabled}
     />

diff --git a/frontend/public/components/namespace.jsx b/frontend/public/components/namespace.jsx
@@ -19,6 +19,7 @@ import {
   getDescription,
   ALL_NAMESPACES_KEY,
   KEYBOARD_SHORTCUTS,
+  NAMESPACE_USERSETTINGS_PREFIX,
   NAMESPACE_LOCAL_STORAGE_KEY,
   FLAGS,
   GreenCheckCircleIcon,
@@ -1038,8 +1039,6 @@ const RolesPage = ({ obj: { metadata } }) => (
 
 const autocompleteFilter = (text, item) => fuzzy(text, item);
 
-const defaultBookmarks = {};
-
 const namespaceBarDropdownStateToProps = (state) => {
   const activeNamespace = state.UI.get('activeNamespace');
   const canListNS = state[featureReducerName].get(FLAGS.CAN_LIST_NS);
@@ -1145,7 +1144,7 @@ class NamespaceBarDropdowns_ extends React.Component {
               ? t('dropdown~Select Project...')
               : t('dropdown~Select Namespace...')
           }
-          defaultBookmarks={defaultBookmarks}
+          userSettingsPrefix={NAMESPACE_USERSETTINGS_PREFIX}
           storageKey={NAMESPACE_LOCAL_STORAGE_KEY}
           shortCut={KEYBOARD_SHORTCUTS.focusNamespaceDropdown}
         />

diff --git a/frontend/public/components/routes/create-route.tsx b/frontend/public/components/routes/create-route.tsx
@@ -664,7 +664,7 @@ export const AlternateServicesGroup: React.FC<AlternateServiceEntryGroupProps> =
           dropDownClassName="dropdown--full-width"
           id={`${index}-alt-service`}
           onChange={onServiceChange}
-          describedby={`${index}-alt-service-help`}
+          describedBy={`${index}-alt-service-help`}
         />
         <div className="help-block" id={`${index}-alt-service-help`}>
           <p>Alternate service to route to.</p>