Fix Viewer tags issue (#103) (#104)

* Add functions for devfile tags



* Update detailed view and grid



* Create new color in tailwind



* Apply format



---------

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

Author: thepetk

apps/registry-viewer/tailwind.config.js

@@ -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],

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 (
     <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">
@@ -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>

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 && (
                 <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>
                   ))}

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);
+  });
+});

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;