github.com/argoproj/argo-cd/v3@v3.2.1/ui/src/app/applications/components/application-details/application-details-app-dropdown.tsx (about)

     1  import {DataLoader, DropDown} from 'argo-ui';
     2  import * as React from 'react';
     3  
     4  import {Context} from '../../../shared/context';
     5  import {services} from '../../../shared/services';
     6  import {getAppUrl} from '../utils';
     7  
     8  export const ApplicationsDetailsAppDropdown = (props: {appName: string}) => {
     9      const [opened, setOpened] = React.useState(false);
    10      const [appFilter, setAppFilter] = React.useState('');
    11      const ctx = React.useContext(Context);
    12      return (
    13          <DropDown
    14              onOpenStateChange={setOpened}
    15              isMenu={true}
    16              anchor={() => (
    17                  <>
    18                      <i className='fa fa-search' /> <span>{props.appName}</span>
    19                  </>
    20              )}>
    21              {opened && (
    22                  <ul>
    23                      <li>
    24                          <input
    25                              className='argo-field'
    26                              value={appFilter}
    27                              onChange={e => setAppFilter(e.target.value)}
    28                              ref={el =>
    29                                  el &&
    30                                  setTimeout(() => {
    31                                      if (el) {
    32                                          el.focus();
    33                                      }
    34                                  }, 100)
    35                              }
    36                          />
    37                      </li>
    38                      <DataLoader load={() => services.applications.list([], {fields: ['items.metadata.name', 'items.metadata.namespace']})}>
    39                          {apps =>
    40                              apps.items
    41                                  .filter(app => {
    42                                      return appFilter.length === 0 || app.metadata.name.toLowerCase().includes(appFilter.toLowerCase());
    43                                  })
    44                                  .slice(0, 100) // take top 100 results after filtering to avoid performance issues
    45                                  .map(app => (
    46                                      <li key={app.metadata.name} onClick={() => ctx.navigation.goto(`/${getAppUrl(app)}`)}>
    47                                          {app.metadata.name} {app.metadata.name === props.appName && ' (current)'}
    48                                      </li>
    49                                  ))
    50                          }
    51                      </DataLoader>
    52                  </ul>
    53              )}
    54          </DropDown>
    55      );
    56  };