feat: allow selecting application on detail page (argoproj#8176)

Signed-off-by: Alexander Matyushentsev <AMatyushentsev@gmail.com>

Author: Alexander Matyushentsev

ui/src/app/applications/components/application-details/application-details-app-dropdown.tsx

@@ -0,0 +1,55 @@
+import {DataLoader, DropDown} from 'argo-ui';
+import * as React from 'react';
+
+import {Context} from '../../../shared/context';
+import {services} from '../../../shared/services';
+
+export const ApplicationsDetailsAppDropdown = (props: {appName: string}) => {
+    const [opened, setOpened] = React.useState(false);
+    const [appFilter, setAppFilter] = React.useState('');
+    const ctx = React.useContext(Context);
+    return (
+        <DropDown
+            onOpenStateChange={setOpened}
+            isMenu={true}
+            anchor={() => (
+                <>
+                    <i className='fa fa-search' /> <span>{props.appName}</span>
+                </>
+            )}>
+            {opened && (
+                <ul>
+                    <li>
+                        <input
+                            className='argo-field'
+                            value={appFilter}
+                            onChange={e => setAppFilter(e.target.value)}
+                            ref={el =>
+                                el &&
+                                setTimeout(() => {
+                                    if (el) {
+                                        el.focus();
+                                    }
+                                }, 100)
+                            }
+                        />
+                    </li>
+                    <DataLoader load={() => services.applications.list([], {fields: ['items.metadata.name']})}>
+                        {apps =>
+                            apps.items
+                                .filter(app => {
+                                    return appFilter.length === 0 || app.metadata.name.toLowerCase().includes(appFilter.toLowerCase());
+                                })
+                                .slice(0, 100) // take top 100 results after filtering to avoid performance issues
+                                .map(app => (
+                                    <li key={app.metadata.name} onClick={() => ctx.navigation.goto(`/applications/${app.metadata.name}`)}>
+                                        {app.metadata.name} {app.metadata.name === props.appName && ' (current)'}
+                                    </li>
+                                ))
+                        }
+                    </DataLoader>
+                </ul>
+            )}
+        </DropDown>
+    );
+};

ui/src/app/applications/components/application-details/application-details.tsx

@@ -25,6 +25,7 @@ import {ApplicationResourceList} from './application-resource-list';
 import {Filters} from './application-resource-filter';
 import {urlPattern} from '../utils';
 import {ResourceStatus} from '../../../shared/models';
+import {ApplicationsDetailsAppDropdown} from './application-details-app-dropdown';
 
 require('./application-details.scss');
 
@@ -217,7 +218,10 @@ export class ApplicationDetails extends React.Component<RouteComponentProps<{nam
                                         useTitleOnly={true}
                                         topBarTitle={this.getPageTitle(pref.view)}
                                         toolbar={{
-                                            breadcrumbs: [{title: 'Applications', path: '/applications'}, {title: this.props.match.params.name}],
+                                            breadcrumbs: [
+                                                {title: 'Applications', path: '/applications'},
+                                                {title: <ApplicationsDetailsAppDropdown appName={this.props.match.params.name} />}
+                                            ],
                                             actionMenu: {items: this.getApplicationActionMenu(application, true)},
                                             tools: (
                                                 <React.Fragment key='app-list-tools'>

ui/yarn.lock

@@ -1762,7 +1762,7 @@ are-we-there-yet@~1.1.2:
 
 "argo-ui@git+https://github.com/argoproj/argo-ui.git":
   version "1.0.0"
-  resolved "git+https://github.com/argoproj/argo-ui.git#2da0b48fbaffc7c64a73f6a7de772ac4a60b8277"
+  resolved "git+https://github.com/argoproj/argo-ui.git#4336822c14164f36eb9d0a6b6c3c40560df4c4d7"
   dependencies:
     "@fortawesome/fontawesome-free" "^5.15.2"
     "@tippy.js/react" "^2.1.2"