Adjust Namespace dropdown to ensure All Projects link is listed fir…

…st in list of namespaces/projects

frontend/public/components/namespace.jsx

@@ -229,21 +229,26 @@ class NamespaceDropdown_ extends React.Component {
     const { loaded, data } = this.props.namespace;
     const model = getModel(useProjects);
     const allNamespacesTitle = `all ${model.labelPlural.toLowerCase()}`;
-    const items = {};
+    const sortedNames = _.map(data, 'metadata.name');
+    const allNamespacesActive = (activeNamespace === ALL_NAMESPACES_KEY);
+    const title = allNamespacesActive
+      ? allNamespacesTitle
+      : activeNamespace;
+    const items = _.reduce(sortedNames, (result, name) => {
+      result[name] = name;
+      return result;
+    }, {});
+    const titleInItems = loaded && _.has(items, title);
+    if (!allNamespacesActive && !titleInItems) {
+      items[title] = title;
+      sortedNames.push(title);
+    }
+    sortedNames.sort();
     if (canListNS) {
+      // we always want ALL_NAMESPACES_KEY first!
+      sortedNames.unshift(ALL_NAMESPACES_KEY);
       items[ALL_NAMESPACES_KEY] = allNamespacesTitle;
     }
-
-    _.map(data, 'metadata.name').sort().forEach(name => items[name] = name);
-
-    let title = activeNamespace;
-    if (activeNamespace === ALL_NAMESPACES_KEY) {
-      title = allNamespacesTitle;
-    } else if (loaded && !_.has(items, title)) {
-      // If the currently active namespace is not found in the list of all namespaces, put it in anyway
-      items[title] = title;
-    }
-
     const onChange = newNamespace => dispatch(UIActions.setActiveNamespace(newNamespace));
 
     return <div className="co-namespace-selector">
@@ -253,6 +258,7 @@ class NamespaceDropdown_ extends React.Component {
         noButton
         canFavorite
         items={items}
+        sortedItemKeys={sortedNames}
         titlePrefix={model.label}
         title={title}
         onChange={onChange}

frontend/public/components/utils/dropdown.jsx

@@ -287,14 +287,14 @@ export class Dropdown extends DropdownMixin {
 
   render() {
     const {active, autocompleteText, selectedKey, items, title, bookmarks, keyboardHoverKey, favoriteKey} = this.state;
-    const {autocompleteFilter, autocompletePlaceholder, noButton, noSelection, className, buttonClassName, menuClassName, storageKey, canFavorite, dropDownClassName, titlePrefix} = this.props;
+    const {autocompleteFilter, autocompletePlaceholder, noButton, noSelection, className, buttonClassName, menuClassName, storageKey, canFavorite, dropDownClassName, titlePrefix, sortedItemKeys} = this.props;
 
     const spacerBefore = this.props.spacerBefore || new Set();
     const headerBefore = this.props.headerBefore || {};
     const rows = [];
     const bookMarkRows = [];
 
-    _.each(items, (content, key) => {
+    const addItem = (key, content) => {
       const selected = !noSelection && key === selectedKey;
       const hover = key === keyboardHoverKey;
       const klass = classNames({'active': selected});
@@ -310,7 +310,13 @@ export class Dropdown extends DropdownMixin {
         rows.push(<li key={`${key}-header`}><div className="dropdown-menu__header" >{headerBefore[key]}</div></li>);
       }
       rows.push(<DropDownRow className={klass} key={key} itemKey={key} content={content} onBookmark={storageKey && this.onBookmark} onclick={this.onClick} selected={selected} hover={hover} />);
-    });
+    };
+
+    if (sortedItemKeys) {
+      _.each(sortedItemKeys, k => addItem(k, items[k]));
+    } else {
+      _.each(items, (v, k) => addItem(k, v));
+    }
 
     //Adding `dropDownClassName` specifically to use patternfly's context selector component, which expects `bootstrap-select` class on the dropdown. We can remove this additional property if that changes in upcoming patternfly versions.
     return <div className={className} ref={this.dropdownElement} style={this.props.style}>
@@ -365,6 +371,7 @@ Dropdown.propTypes = {
   enableBookmarks: PropTypes.bool,
   headerBefore: PropTypes.objectOf(PropTypes.string),
   items: PropTypes.object.isRequired,
+  sortedItemKeys: PropTypes.array,
   menuClassName: PropTypes.string,
   noButton: PropTypes.bool,
   noSelection: PropTypes.bool,