-
Notifications
You must be signed in to change notification settings - Fork 594
/
useDevfile.tsx
88 lines (76 loc) · 2.56 KB
/
useDevfile.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
import * as React from 'react';
import { TFunction } from 'i18next';
import { useTranslation } from 'react-i18next';
import { APIError } from '@console/shared';
import { ExtensionHook, CatalogItem } from '@console/dynamic-plugin-sdk';
import { coFetchJSON } from '@console/internal/co-fetch';
import { ExternalLink } from '@console/internal/components/utils';
import { DevfileSample } from '../../import/devfile/devfile-types';
const normalizeDevfile = (devfileSamples: DevfileSample[], t: TFunction): CatalogItem[] => {
const normalizedDevfileSamples = devfileSamples?.map((sample) => {
const { name: uid, displayName, description, tags, git, icon } = sample;
const gitRepoUrl = Object.values(git.remotes)[0];
const iconUrl = icon ? `data:image/png;base64,${icon}` : '';
const href = `/import?importType=devfile&devfileName=${uid}&gitRepo=${gitRepoUrl}`;
const createLabel = t('devconsole~Create Application');
const type = 'Devfile';
const detailsProperties = [
{
label: t('devconsole~Sample repository'),
value: (
<ExternalLink href={gitRepoUrl} additionalClassName="co-break-all" text={gitRepoUrl} />
),
},
];
const detailsDescriptions = [
{
value: <p>{description}</p>,
},
];
const item: CatalogItem = {
uid: `${type}-${uid}`,
type,
name: displayName,
description,
tags,
cta: {
label: createLabel,
href,
},
icon: { url: iconUrl },
details: {
properties: detailsProperties,
descriptions: detailsDescriptions,
},
};
return item;
});
return normalizedDevfileSamples;
};
const useDevfile: ExtensionHook<CatalogItem[]> = (): [CatalogItem[], boolean, any] => {
const [devfileSamples, setDevfileSamples] = React.useState<DevfileSample[]>([]);
const [loadedError, setLoadedError] = React.useState<APIError>();
const { t } = useTranslation();
React.useEffect(() => {
let mounted = true;
const payload = {
registry: 'pkg/devfile/sample-placeholder.json',
};
coFetchJSON
.put('/api/devfile/samples', payload)
.then((resp) => {
if (mounted) setDevfileSamples(resp);
})
.catch((err) => {
if (mounted) setLoadedError(err);
});
return () => (mounted = false);
}, []);
const normalizedDevfileSamples = React.useMemo(() => normalizeDevfile(devfileSamples, t), [
devfileSamples,
t,
]);
const loaded = !!devfileSamples;
return [normalizedDevfileSamples, loaded, loadedError];
};
export default useDevfile;