Skip to content

Commit

Permalink
Fix Viewer tags issue (#103)
Browse files Browse the repository at this point in the history
* Add functions for devfile tags

Signed-off-by: thepetk <[email protected]>

* Update detailed view and grid

Signed-off-by: thepetk <[email protected]>

* Create new color in tailwind

Signed-off-by: thepetk <[email protected]>

* Apply format

Signed-off-by: thepetk <[email protected]>

---------

Signed-off-by: thepetk <[email protected]>
  • Loading branch information
thepetk authored Oct 23, 2023
1 parent 91b7452 commit 37ebc28
Show file tree
Hide file tree
Showing 5 changed files with 137 additions and 10 deletions.
1 change: 1 addition & 0 deletions apps/registry-viewer/tailwind.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@ module.exports = {
extend: {
colors: {
devfile: 'rgb(47, 154, 242, <alpha-value>)',
deprecated: 'rgb(243, 46, 66, <alpha-value>)',
},
fontFamily: {
sans: ['Inter', ...defaultTheme.fontFamily.sans],
Expand Down
15 changes: 9 additions & 6 deletions libs/core/src/components/devfile-datalist/devfile-datalist.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -45,6 +49,8 @@ export function DevfileDatalist(props: DevfileDatalistProps): JSX.Element {
[devfile.versions, devfileVersion],
);

const devfileTags = getDevfileTags(versionDevfile, devfile);

return (
<div className={className}>
<div className="border-b border-slate-200 pb-2 text-lg font-medium leading-8 text-slate-700 dark:border-slate-700 dark:text-sky-100">
Expand Down Expand Up @@ -118,17 +124,14 @@ export function DevfileDatalist(props: DevfileDatalistProps): JSX.Element {
{devfile.language}
</dd>
</div>
{devfile.tags && (
{devfileTags && (
<div className="grid grid-cols-2 py-2.5 lg:block">
<dt className="text-base font-medium text-slate-700 dark:text-sky-100">Tags</dt>
<dd className="mt-1 text-sm text-slate-500 dark:text-slate-400">
<ul className="flex flex-wrap gap-2">
{devfile.tags.map((tag) => (
{devfileTags.map((tag) => (
<li key={tag}>
<Link
href={`/?tags=${tag}`}
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"
>
<Link href={`/?tags=${tag}`} className={getDevfileTagClasses(tag)}>
{tag}
</Link>
</li>
Expand Down
7 changes: 3 additions & 4 deletions libs/core/src/components/devfile-grid/devfile-grid.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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[];
}
Expand Down Expand Up @@ -74,10 +76,7 @@ export function DevfileGrid(props: DevfileGridProps): JSX.Element {
{devfile.tags && (
<div className="mt-2 flex flex-wrap gap-2 md:mt-4">
{devfile.tags.slice(0, 4).map((tag) => (
<span
key={tag}
className="bg-devfile/5 border-devfile/50 text-devfile inline-flex items-center rounded border px-2.5 py-0.5 text-xs font-medium md:text-sm"
>
<span key={tag} className={getDevfileTagClasses(tag)}>
{tag}
</span>
))}
Expand Down
75 changes: 75 additions & 0 deletions libs/core/src/functions/get-devfile-tags/get-devfile-tags.spec.tsx
Original file line number Diff line number Diff line change
@@ -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);
});
});
49 changes: 49 additions & 0 deletions libs/core/src/functions/get-devfile-tags/get-devfile-tags.tsx
Original file line number Diff line number Diff line change
@@ -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;

0 comments on commit 37ebc28

Please sign in to comment.