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