Skip to content

Commit c3af943

Browse files
thepetkthepetk
authored
Add deprecated stack filter on the registry-viewer and fix deprecated Color (#122)
* Add deprecated devfile filter Signed-off-by: thepetk <[email protected]> * Add test cases and update existing Signed-off-by: thepetk <[email protected]> * Fix type error Signed-off-by: thepetk <[email protected]> * Update fetch-devfiles Signed-off-by: thepetk <[email protected]> * Update index.tsx Signed-off-by: thepetk <[email protected]> * Fix format Signed-off-by: thepetk <[email protected]> * Update index.tsx Signed-off-by: thepetk <[email protected]> * Fix linting error Signed-off-by: thepetk <[email protected]> * Fix formatting Signed-off-by: thepetk <[email protected]> * Fix deprecated color Signed-off-by: thepetk <[email protected]> * Fix fetch-devfiles tests Signed-off-by: thepetk <[email protected]> --------- Signed-off-by: thepetk <[email protected]>
1 parent 306a3a9 commit c3af943

File tree

10 files changed

+161
-27
lines changed

10 files changed

+161
-27
lines changed

‎apps/registry-viewer/pages/index.tsx‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -139,9 +139,11 @@ function sortFilterElements(filterElements: FilterElement[]): FilterElement[] {
139139
});
140140
}
141141

142+
let fitlerProperties: 'tags' | 'type' | 'provider' | 'language' | '_registry' | '_deprecated';
143+
142144
function getFilterElements(
143145
devfiles: Devfile[],
144-
property: keyof Pick<Devfile, 'tags' | 'type' | 'provider' | 'language' | '_registry'>,
146+
property: keyof Pick<Devfile, typeof fitlerProperties>,
145147
queryParam: string[],
146148
): FilterElement[] {
147149
let elements: string[] = [];
@@ -152,6 +154,7 @@ function getFilterElements(
152154
if (Array.isArray(value)) {
153155
prev.push(...value);
154156
} else if (typeof value === 'string') {
157+
// _deprecated
155158
prev.push(value);
156159
} else {
157160
// _registry
@@ -194,6 +197,7 @@ export const getServerSideProps: GetServerSideProps<IndexProps> = async (context
194197
const typeParam = getArrayParam(context.query.types);
195198
const providerParam = getArrayParam(context.query.providers);
196199
const languageParam = getArrayParam(context.query.languages);
200+
const deprecatedParam = getArrayParam(context.query.deprecated);
197201

198202
// get the devfiles
199203
const devfileRegistries = getDevfileRegistries();
@@ -213,11 +217,13 @@ export const getServerSideProps: GetServerSideProps<IndexProps> = async (context
213217
isSearchIn(devfile.tags, tagParam) &&
214218
isSearchIn(devfile.type, typeParam) &&
215219
isSearchIn(devfile.provider, providerParam) &&
216-
isSearchIn(devfile.language, languageParam),
220+
isSearchIn(devfile.language, languageParam) &&
221+
isSearchIn(devfile._deprecated, deprecatedParam),
217222
);
218223

219224
// get the filter elements
220225
const registries = getFilterElements(devfiles, '_registry', registryParam);
226+
const deprecated = getFilterElements(devfiles, '_deprecated', deprecatedParam);
221227
const tags = getFilterElements(devfiles, 'tags', tagParam);
222228
const types = getFilterElements(devfiles, 'type', typeParam);
223229
const providers = getFilterElements(devfiles, 'provider', providerParam);
@@ -242,6 +248,7 @@ export const getServerSideProps: GetServerSideProps<IndexProps> = async (context
242248
types,
243249
providers,
244250
languages,
251+
deprecated,
245252
},
246253
},
247254
};

‎libs/core/src/components/devfile-datalist/devfile-datalist.tsx‎

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ import { compareSemanticVersions, type Devfile } from '../../functions';
2323
import type { DevfileSpec } from '../../types';
2424
import {
2525
getDevfileTags,
26-
getDevfileTagClasses,
26+
isDeprecatedDevfile,
2727
} from '../../functions/get-devfile-tags/get-devfile-tags';
2828

2929
export interface DevfileDatalistProps {
@@ -131,9 +131,21 @@ export function DevfileDatalist(props: DevfileDatalistProps): JSX.Element {
131131
<ul className="flex flex-wrap gap-2">
132132
{devfileTags.map((tag) => (
133133
<li key={tag}>
134-
<Link href={`/?tags=${tag}`} className={getDevfileTagClasses(tag)}>
135-
{tag}
136-
</Link>
134+
{isDeprecatedDevfile(tag) ? (
135+
<Link
136+
href={`/?tags=${tag}`}
137+
className="bg-deprecated/5 hover:bg-deprecated/10 active:bg-deprecated/20 border-deprecated/50 text-deprecated inline-flex items-center rounded border px-2.5 py-0.5 text-xs font-medium"
138+
>
139+
{tag}
140+
</Link>
141+
) : (
142+
<Link
143+
href={`/?tags=${tag}`}
144+
className="bg-devfile/5 hover:bg-devfile/10 active:bg-devfile/20 border-devfile/50 text-devfile inline-flex items-center rounded border px-2.5 py-0.5 text-xs font-medium"
145+
>
146+
{tag}
147+
</Link>
148+
)}
137149
</li>
138150
))}
139151
</ul>

‎libs/core/src/components/devfile-filters/devfile-filters.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ export interface FilterParams {
2929
types: FilterElement[];
3030
providers: FilterElement[];
3131
languages: FilterElement[];
32+
deprecated: FilterElement[];
3233
}
3334

3435
const filters: {
@@ -37,6 +38,7 @@ const filters: {
3738
capitalize: boolean;
3839
}[] = [
3940
{ name: 'Registries', property: 'registries', capitalize: false },
41+
{ name: 'Deprecated', property: 'deprecated', capitalize: false },
4042
{ name: 'Tags', property: 'tags', capitalize: false },
4143
{ name: 'Types', property: 'types', capitalize: true },
4244
{ name: 'Providers', property: 'providers', capitalize: false },

‎libs/core/src/components/devfile-grid/devfile-grid.tsx‎

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ import Link from 'next/link';
1919
import slugify from '@sindresorhus/slugify';
2020
import { Devfile } from '../../functions';
2121

22-
import { getDevfileTagClasses } from '../../functions/get-devfile-tags/get-devfile-tags';
22+
import { isDeprecatedDevfile } from '../../functions/get-devfile-tags/get-devfile-tags';
2323

2424
export interface DevfileGridProps {
2525
devfiles: Devfile[];
@@ -75,11 +75,23 @@ export function DevfileGrid(props: DevfileGridProps): JSX.Element {
7575
</div>
7676
{devfile.tags && (
7777
<div className="mt-2 flex flex-wrap gap-2 md:mt-4">
78-
{devfile.tags.slice(0, 4).map((tag) => (
79-
<span key={tag} className={getDevfileTagClasses(tag)}>
80-
{tag}
81-
</span>
82-
))}
78+
{devfile.tags.slice(0, 4).map((tag) =>
79+
isDeprecatedDevfile(tag) ? (
80+
<span
81+
key={tag}
82+
className="bg-deprecated/5 hover:bg-deprecated/10 active:bg-deprecated/20 border-deprecated/50 text-deprecated inline-flex items-center rounded border px-2.5 py-0.5 text-xs font-medium"
83+
>
84+
{tag}
85+
</span>
86+
) : (
87+
<span
88+
key={tag}
89+
className="bg-devfile/5 hover:bg-devfile/10 active:bg-devfile/20 border-devfile/50 text-devfile inline-flex items-center rounded border px-2.5 py-0.5 text-xs font-medium"
90+
>
91+
{tag}
92+
</span>
93+
),
94+
)}
8395
</div>
8496
)}
8597
</Link>

‎libs/core/src/functions/fetch-devfiles/fetch-devfiles.spec.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ describe('fetchDevfiles', () => {
4545
.map((devfile) => ({
4646
...devfile,
4747
_registry: devfileRegistries[0],
48+
_deprecated: 'No',
4849
}))
4950
.sort((a, b) =>
5051
a.displayName.localeCompare(b.displayName, 'en', {

‎libs/core/src/functions/fetch-devfiles/fetch-devfiles.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@
1414
* limitations under the License.
1515
*/
1616

17+
import { getDeprecatedDevfileValue } from '../get-deprecated-devfile-value/get-deprecated-devfile-value';
18+
1719
interface DevfileJsonBase {
1820
name: string;
1921
displayName: string;
@@ -68,6 +70,7 @@ export interface Registry {
6870

6971
export type Devfile = DevfileJson & {
7072
_registry: Registry;
73+
_deprecated: string;
7174
};
7275

7376
export interface DevfileParams {
@@ -95,6 +98,7 @@ export async function fetchDevfiles(registries: Registry[]): Promise<Devfile[]>
9598
devfileJsons[devfileRegistryIndex].map((devfile) => ({
9699
...devfile,
97100
_registry: registry,
101+
_deprecated: getDeprecatedDevfileValue(devfile),
98102
})),
99103
)
100104
.sort((a, b) =>

‎libs/core/src/functions/get-deprecated-devfile-value/get-deprecated-devfile-value.spec.tsx‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
/**
2+
* Copyright Red Hat
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* http://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
17+
import { DevfileJson } from '../fetch-devfiles/fetch-devfiles';
18+
import { DeprecatedTag } from '../get-devfile-tags/get-devfile-tags';
19+
import {
20+
IsNotDeprecatedValue,
21+
IsDeprecatedValue,
22+
getDeprecatedDevfileValue,
23+
} from './get-deprecated-devfile-value';
24+
25+
let deprecatedDevfileJson: DevfileJson;
26+
27+
let nonDeprecatedDevfileJson: DevfileJson;
28+
29+
describe('getDeprecatedDevfileValue', () => {
30+
it('should execute successfully', () => {
31+
deprecatedDevfileJson = {
32+
name: 'some devfile',
33+
displayName: 'display name',
34+
description: 'some description',
35+
type: 'stack',
36+
tags: ['three', 'four', DeprecatedTag],
37+
icon: '',
38+
projectType: 'python',
39+
language: 'python',
40+
versions: [],
41+
provider: 'provider',
42+
architectures: [],
43+
git: {
44+
remotes: {},
45+
},
46+
};
47+
nonDeprecatedDevfileJson = {
48+
name: 'some devfile',
49+
displayName: 'display name',
50+
description: 'some description',
51+
type: 'stack',
52+
tags: ['three', 'four'],
53+
icon: '',
54+
projectType: 'python',
55+
language: 'python',
56+
versions: [],
57+
provider: 'provider',
58+
architectures: [],
59+
git: {
60+
remotes: {},
61+
},
62+
};
63+
expect(getDeprecatedDevfileValue(deprecatedDevfileJson)).toEqual(IsDeprecatedValue);
64+
expect(getDeprecatedDevfileValue(nonDeprecatedDevfileJson)).toEqual(IsNotDeprecatedValue);
65+
});
66+
});

‎libs/core/src/functions/get-deprecated-devfile-value/get-deprecated-devfile-value.tsx‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
/**
2+
* Copyright Red Hat
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* http://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
17+
import { DevfileJson } from '../fetch-devfiles/fetch-devfiles';
18+
import { DeprecatedTag } from '../get-devfile-tags/get-devfile-tags';
19+
20+
export const IsDeprecatedValue = 'Yes';
21+
22+
export const IsNotDeprecatedValue = 'No';
23+
24+
/**
25+
* Checks if a devfile tags include the DeprecatedTag
26+
*
27+
* @returns 'Yes' or 'No'
28+
*/
29+
export function getDeprecatedDevfileValue(devfile: DevfileJson): string {
30+
if (devfile.tags.includes(DeprecatedTag)) {
31+
return IsDeprecatedValue;
32+
}
33+
return IsNotDeprecatedValue;
34+
}

‎libs/core/src/functions/get-devfile-tags/get-devfile-tags.spec.tsx‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
*/
1616

1717
import { VersionDevfile, Devfile, Registry } from '../fetch-devfiles/fetch-devfiles';
18-
import { deprecatedTag, getDevfileTags, getDevfileTagClasses } from './get-devfile-tags';
18+
import { DeprecatedTag, getDevfileTags, isDeprecatedDevfile } from './get-devfile-tags';
1919

2020
let undefinedVersionDevfile: undefined;
2121

@@ -43,6 +43,7 @@ describe('getDevfileTags', () => {
4343
};
4444
devfile = {
4545
_registry: registry,
46+
_deprecated: 'False',
4647
name: 'some devfile',
4748
displayName: 'display name',
4849
description: 'some description',
@@ -65,11 +66,7 @@ describe('getDevfileTags', () => {
6566

6667
describe('getDevfileTags', () => {
6768
it('should execute successfully', () => {
68-
const devfileClassName =
69-
'bg-devfile/5 hover:bg-devfile/10 active:bg-devfile/20 border-devfile/50 text-devfile inline-flex items-center rounded border px-2.5 py-0.5 text-xs font-medium';
70-
const deprecatedClassName =
71-
'bg-deprecated/5 hover:bg-deprecated/10 active:bg-deprecated/20 border-deprecated/50 text-deprecated inline-flex items-center rounded border px-2.5 py-0.5 text-xs font-medium';
72-
expect(getDevfileTagClasses(deprecatedTag)).toEqual(deprecatedClassName);
73-
expect(getDevfileTagClasses('tag')).toEqual(devfileClassName);
69+
expect(isDeprecatedDevfile(DeprecatedTag)).toEqual(true);
70+
expect(isDeprecatedDevfile('tag')).toEqual(false);
7471
});
7572
});

‎libs/core/src/functions/get-devfile-tags/get-devfile-tags.tsx‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616

1717
import { Devfile, VersionDevfile } from '../fetch-devfiles/fetch-devfiles';
1818

19-
export const deprecatedTag = 'Deprecated';
19+
export const DeprecatedTag = 'Deprecated';
2020
/**
2121
* Checks if a versionDevfile exists and returns its tags. If
2222
* it doesn't exists returns the devfile tags
@@ -34,16 +34,15 @@ export function getDevfileTags(
3434
}
3535

3636
/**
37-
* Checks if the given tag is equal to depracatedTag and returns the necessary css classes
37+
* Checks if the given tag is equal to depracatedTag
3838
*
39-
* @returns the class names according to the given tag
39+
* @returns bolean value
4040
*/
41-
export function getDevfileTagClasses(tag: string): string {
42-
let colorTag = 'devfile';
43-
if (tag === deprecatedTag) {
44-
colorTag = deprecatedTag.toLowerCase();
41+
export function isDeprecatedDevfile(tag: string): boolean {
42+
if (tag === DeprecatedTag) {
43+
return true;
4544
}
46-
return `bg-${colorTag}/5 hover:bg-${colorTag}/10 active:bg-${colorTag}/20 border-${colorTag}/50 text-${colorTag} inline-flex items-center rounded border px-2.5 py-0.5 text-xs font-medium`;
45+
return false;
4746
}
4847

4948
export default getDevfileTags;

0 commit comments

Comments
 (0)