argo-cd

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
};
56