From 37ebc286d89118c9a40d543158a23a9b70da870e Mon Sep 17 00:00:00 2001 From: Theofanis Petkos Date: Mon, 23 Oct 2023 16:53:02 +0100 Subject: [PATCH] Fix Viewer tags issue (#103) * Add functions for devfile tags Signed-off-by: thepetk * Update detailed view and grid Signed-off-by: thepetk * Create new color in tailwind Signed-off-by: thepetk * Apply format Signed-off-by: thepetk --------- Signed-off-by: thepetk --- apps/registry-viewer/tailwind.config.js | 1 + .../devfile-datalist/devfile-datalist.tsx | 15 ++-- .../components/devfile-grid/devfile-grid.tsx | 7 +- .../get-devfile-tags.spec.tsx | 75 +++++++++++++++++++ .../get-devfile-tags/get-devfile-tags.tsx | 49 ++++++++++++ 5 files changed, 137 insertions(+), 10 deletions(-) create mode 100644 libs/core/src/functions/get-devfile-tags/get-devfile-tags.spec.tsx create mode 100644 libs/core/src/functions/get-devfile-tags/get-devfile-tags.tsx diff --git a/apps/registry-viewer/tailwind.config.js b/apps/registry-viewer/tailwind.config.js index 5e5f003b..845a3fd2 100644 --- a/apps/registry-viewer/tailwind.config.js +++ b/apps/registry-viewer/tailwind.config.js @@ -45,6 +45,7 @@ module.exports = { extend: { colors: { devfile: 'rgb(47, 154, 242, )', + deprecated: 'rgb(243, 46, 66, )', }, fontFamily: { sans: ['Inter', ...defaultTheme.fontFamily.sans], diff --git a/libs/core/src/components/devfile-datalist/devfile-datalist.tsx b/libs/core/src/components/devfile-datalist/devfile-datalist.tsx index e092b445..be289016 100644 --- a/libs/core/src/components/devfile-datalist/devfile-datalist.tsx +++ b/libs/core/src/components/devfile-datalist/devfile-datalist.tsx @@ -21,6 +21,10 @@ import { useMemo } from 'react'; import { StringParam, useQueryParam, withDefault } from 'use-query-params'; import { compareSemanticVersions, type Devfile } from '../../functions'; import type { DevfileSpec } from '../../types'; +import { + getDevfileTags, + getDevfileTagClasses, +} from '../../functions/get-devfile-tags/get-devfile-tags'; export interface DevfileDatalistProps { devfile: Devfile; @@ -45,6 +49,8 @@ export function DevfileDatalist(props: DevfileDatalistProps): JSX.Element { [devfile.versions, devfileVersion], ); + const devfileTags = getDevfileTags(versionDevfile, devfile); + return (
@@ -118,17 +124,14 @@ export function DevfileDatalist(props: DevfileDatalistProps): JSX.Element { {devfile.language}
- {devfile.tags && ( + {devfileTags && (
Tags
    - {devfile.tags.map((tag) => ( + {devfileTags.map((tag) => (
  • - + {tag}
    • diff --git a/libs/core/src/components/devfile-grid/devfile-grid.tsx b/libs/core/src/components/devfile-grid/devfile-grid.tsx index fe8639b7..9e94d0d8 100644 --- a/libs/core/src/components/devfile-grid/devfile-grid.tsx +++ b/libs/core/src/components/devfile-grid/devfile-grid.tsx @@ -19,6 +19,8 @@ import Link from 'next/link'; import slugify from '@sindresorhus/slugify'; import { Devfile } from '../../functions'; +import { getDevfileTagClasses } from '../../functions/get-devfile-tags/get-devfile-tags'; + export interface DevfileGridProps { devfiles: Devfile[]; } @@ -74,10 +76,7 @@ export function DevfileGrid(props: DevfileGridProps): JSX.Element { {devfile.tags && (
    {devfile.tags.slice(0, 4).map((tag) => ( - + {tag} ))} diff --git a/libs/core/src/functions/get-devfile-tags/get-devfile-tags.spec.tsx b/libs/core/src/functions/get-devfile-tags/get-devfile-tags.spec.tsx new file mode 100644 index 00000000..5cd60e9e --- /dev/null +++ b/libs/core/src/functions/get-devfile-tags/get-devfile-tags.spec.tsx @@ -0,0 +1,75 @@ +/** + * Copyright Red Hat + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { VersionDevfile, Devfile, Registry } from '../fetch-devfiles/fetch-devfiles'; +import { deprecatedTag, getDevfileTags, getDevfileTagClasses } from './get-devfile-tags'; + +let undefinedVersionDevfile: undefined; + +let versionDevfile: VersionDevfile; + +let devfile: Devfile; + +let registry: Registry; + +describe('getDevfileTags', () => { + it('should execute successfully', () => { + registry = { + name: '', + url: '', + fqdn: '', + }; + versionDevfile = { + version: '2.2.1', + schemaVersion: '2.1.0', + tags: ['one', 'two'], + default: true, + description: 'some description', + icon: '', + starterProjects: [], + }; + devfile = { + _registry: registry, + name: 'some devfile', + displayName: 'display name', + description: 'some description', + type: 'stack', + tags: ['three', 'four'], + icon: '', + projectType: 'python', + language: 'python', + versions: [], + provider: 'provider', + architectures: [], + git: { + remotes: {}, + }, + }; + expect(getDevfileTags(undefinedVersionDevfile, devfile)).toEqual(devfile.tags); + expect(getDevfileTags(versionDevfile, devfile)).toEqual(versionDevfile.tags); + }); +}); + +describe('getDevfileTags', () => { + it('should execute successfully', () => { + const devfileClassName = + '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'; + const deprecatedClassName = + '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'; + expect(getDevfileTagClasses(deprecatedTag)).toEqual(deprecatedClassName); + expect(getDevfileTagClasses('tag')).toEqual(devfileClassName); + }); +}); diff --git a/libs/core/src/functions/get-devfile-tags/get-devfile-tags.tsx b/libs/core/src/functions/get-devfile-tags/get-devfile-tags.tsx new file mode 100644 index 00000000..c5a1f355 --- /dev/null +++ b/libs/core/src/functions/get-devfile-tags/get-devfile-tags.tsx @@ -0,0 +1,49 @@ +/** + * Copyright Red Hat + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { Devfile, VersionDevfile } from '../fetch-devfiles/fetch-devfiles'; + +export const deprecatedTag = 'Deprecated'; +/** + * Checks if a versionDevfile exists and returns its tags. If + * it doesn't exists returns the devfile tags + * + * @returns a list of tags + */ +export function getDevfileTags( + versionDevfile: VersionDevfile | undefined, + devfile: Devfile, +): string[] { + if (versionDevfile !== undefined) { + return versionDevfile.tags; + } + return devfile.tags; +} + +/** + * Checks if the given tag is equal to depracatedTag and returns the necessary css classes + * + * @returns the class names according to the given tag + */ +export function getDevfileTagClasses(tag: string): string { + let colorTag = 'devfile'; + if (tag === deprecatedTag) { + colorTag = deprecatedTag.toLowerCase(); + } + 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`; +} + +export default getDevfileTags;