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]>
devfile · Apr 15, 2024 · c3af943 · c3af943
1 parent 306a3a9
commit c3af943
Show file tree

Hide file tree

Showing 10 changed files with 161 additions and 27 deletions.
diff --git a/apps/registry-viewer/pages/index.tsx b/apps/registry-viewer/pages/index.tsx
@@ -139,9 +139,11 @@ function sortFilterElements(filterElements: FilterElement[]): FilterElement[] {
   });
 }
 
+let fitlerProperties: 'tags' | 'type' | 'provider' | 'language' | '_registry' | '_deprecated';
+
 function getFilterElements(
   devfiles: Devfile[],
-  property: keyof Pick<Devfile, 'tags' | 'type' | 'provider' | 'language' | '_registry'>,
+  property: keyof Pick<Devfile, typeof fitlerProperties>,
   queryParam: string[],
 ): FilterElement[] {
   let elements: string[] = [];
@@ -152,6 +154,7 @@ function getFilterElements(
       if (Array.isArray(value)) {
         prev.push(...value);
       } else if (typeof value === 'string') {
+        // _deprecated
         prev.push(value);
       } else {
         // _registry
@@ -194,6 +197,7 @@ export const getServerSideProps: GetServerSideProps<IndexProps> = async (context
   const typeParam = getArrayParam(context.query.types);
   const providerParam = getArrayParam(context.query.providers);
   const languageParam = getArrayParam(context.query.languages);
+  const deprecatedParam = getArrayParam(context.query.deprecated);
 
   // get the devfiles
   const devfileRegistries = getDevfileRegistries();
@@ -213,11 +217,13 @@ export const getServerSideProps: GetServerSideProps<IndexProps> = async (context
       isSearchIn(devfile.tags, tagParam) &&
       isSearchIn(devfile.type, typeParam) &&
       isSearchIn(devfile.provider, providerParam) &&
-      isSearchIn(devfile.language, languageParam),
+      isSearchIn(devfile.language, languageParam) &&
+      isSearchIn(devfile._deprecated, deprecatedParam),
   );
 
   // get the filter elements
   const registries = getFilterElements(devfiles, '_registry', registryParam);
+  const deprecated = getFilterElements(devfiles, '_deprecated', deprecatedParam);
   const tags = getFilterElements(devfiles, 'tags', tagParam);
   const types = getFilterElements(devfiles, 'type', typeParam);
   const providers = getFilterElements(devfiles, 'provider', providerParam);
@@ -242,6 +248,7 @@ export const getServerSideProps: GetServerSideProps<IndexProps> = async (context
         types,
         providers,
         languages,
+        deprecated,
       },
     },
   };

diff --git a/libs/core/src/components/devfile-datalist/devfile-datalist.tsx b/libs/core/src/components/devfile-datalist/devfile-datalist.tsx
@@ -23,7 +23,7 @@ import { compareSemanticVersions, type Devfile } from '../../functions';
 import type { DevfileSpec } from '../../types';
 import {
   getDevfileTags,
-  getDevfileTagClasses,
+  isDeprecatedDevfile,
 } from '../../functions/get-devfile-tags/get-devfile-tags';
 
 export interface DevfileDatalistProps {
@@ -131,9 +131,21 @@ export function DevfileDatalist(props: DevfileDatalistProps): JSX.Element {
               <ul className="flex flex-wrap gap-2">
                 {devfileTags.map((tag) => (
                   <li key={tag}>
-                    <Link href={`/?tags=${tag}`} className={getDevfileTagClasses(tag)}>
-                      {tag}
-                    </Link>
+                    {isDeprecatedDevfile(tag) ? (
+                      <Link
+                        href={`/?tags=${tag}`}
+                        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"
+                      >
+                        {tag}
+                      </Link>
+                    ) : (
+                      <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"
+                      >
+                        {tag}
+                      </Link>
+                    )}
                   </li>
                 ))}
               </ul>

diff --git a/libs/core/src/components/devfile-filters/devfile-filters.tsx b/libs/core/src/components/devfile-filters/devfile-filters.tsx
@@ -29,6 +29,7 @@ export interface FilterParams {
   types: FilterElement[];
   providers: FilterElement[];
   languages: FilterElement[];
+  deprecated: FilterElement[];
 }
 
 const filters: {
@@ -37,6 +38,7 @@ const filters: {
   capitalize: boolean;
 }[] = [
   { name: 'Registries', property: 'registries', capitalize: false },
+  { name: 'Deprecated', property: 'deprecated', capitalize: false },
   { name: 'Tags', property: 'tags', capitalize: false },
   { name: 'Types', property: 'types', capitalize: true },
   { name: 'Providers', property: 'providers', capitalize: false },

diff --git a/libs/core/src/components/devfile-grid/devfile-grid.tsx b/libs/core/src/components/devfile-grid/devfile-grid.tsx
@@ -19,7 +19,7 @@ import Link from 'next/link';
 import slugify from '@sindresorhus/slugify';
 import { Devfile } from '../../functions';
 
-import { getDevfileTagClasses } from '../../functions/get-devfile-tags/get-devfile-tags';
+import { isDeprecatedDevfile } from '../../functions/get-devfile-tags/get-devfile-tags';
 
 export interface DevfileGridProps {
   devfiles: Devfile[];
@@ -75,11 +75,23 @@ export function DevfileGrid(props: DevfileGridProps): JSX.Element {
               </div>
               {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={getDevfileTagClasses(tag)}>
-                      {tag}
-                    </span>
-                  ))}
+                  {devfile.tags.slice(0, 4).map((tag) =>
+                    isDeprecatedDevfile(tag) ? (
+                      <span
+                        key={tag}
+                        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"
+                      >
+                        {tag}
+                      </span>
+                    ) : (
+                      <span
+                        key={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"
+                      >
+                        {tag}
+                      </span>
+                    ),
+                  )}
                 </div>
               )}
             </Link>

diff --git a/libs/core/src/functions/fetch-devfiles/fetch-devfiles.spec.tsx b/libs/core/src/functions/fetch-devfiles/fetch-devfiles.spec.tsx
@@ -45,6 +45,7 @@ describe('fetchDevfiles', () => {
       .map((devfile) => ({
         ...devfile,
         _registry: devfileRegistries[0],
+        _deprecated: 'No',
       }))
       .sort((a, b) =>
         a.displayName.localeCompare(b.displayName, 'en', {

diff --git a/libs/core/src/functions/fetch-devfiles/fetch-devfiles.tsx b/libs/core/src/functions/fetch-devfiles/fetch-devfiles.tsx
@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 
+import { getDeprecatedDevfileValue } from '../get-deprecated-devfile-value/get-deprecated-devfile-value';
+
 interface DevfileJsonBase {
   name: string;
   displayName: string;
@@ -68,6 +70,7 @@ export interface Registry {
 
 export type Devfile = DevfileJson & {
   _registry: Registry;
+  _deprecated: string;
 };
 
 export interface DevfileParams {
@@ -95,6 +98,7 @@ export async function fetchDevfiles(registries: Registry[]): Promise<Devfile[]>
       devfileJsons[devfileRegistryIndex].map((devfile) => ({
         ...devfile,
         _registry: registry,
+        _deprecated: getDeprecatedDevfileValue(devfile),
       })),
     )
     .sort((a, b) =>

diff --git a/libs/core/src/functions/get-deprecated-devfile-value/get-deprecated-devfile-value.spec.tsx b/libs/core/src/functions/get-deprecated-devfile-value/get-deprecated-devfile-value.spec.tsx
@@ -0,0 +1,66 @@
+/**
+ * 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 { DevfileJson } from '../fetch-devfiles/fetch-devfiles';
+import { DeprecatedTag } from '../get-devfile-tags/get-devfile-tags';
+import {
+  IsNotDeprecatedValue,
+  IsDeprecatedValue,
+  getDeprecatedDevfileValue,
+} from './get-deprecated-devfile-value';
+
+let deprecatedDevfileJson: DevfileJson;
+
+let nonDeprecatedDevfileJson: DevfileJson;
+
+describe('getDeprecatedDevfileValue', () => {
+  it('should execute successfully', () => {
+    deprecatedDevfileJson = {
+      name: 'some devfile',
+      displayName: 'display name',
+      description: 'some description',
+      type: 'stack',
+      tags: ['three', 'four', DeprecatedTag],
+      icon: '',
+      projectType: 'python',
+      language: 'python',
+      versions: [],
+      provider: 'provider',
+      architectures: [],
+      git: {
+        remotes: {},
+      },
+    };
+    nonDeprecatedDevfileJson = {
+      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(getDeprecatedDevfileValue(deprecatedDevfileJson)).toEqual(IsDeprecatedValue);
+    expect(getDeprecatedDevfileValue(nonDeprecatedDevfileJson)).toEqual(IsNotDeprecatedValue);
+  });
+});
diff --git a/libs/core/src/functions/get-deprecated-devfile-value/get-deprecated-devfile-value.tsx b/libs/core/src/functions/get-deprecated-devfile-value/get-deprecated-devfile-value.tsx
@@ -0,0 +1,34 @@
+/**
+ * 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 { DevfileJson } from '../fetch-devfiles/fetch-devfiles';
+import { DeprecatedTag } from '../get-devfile-tags/get-devfile-tags';
+
+export const IsDeprecatedValue = 'Yes';
+
+export const IsNotDeprecatedValue = 'No';
+
+/**
+ * Checks if a devfile tags include the DeprecatedTag
+ *
+ * @returns 'Yes' or 'No'
+ */
+export function getDeprecatedDevfileValue(devfile: DevfileJson): string {
+  if (devfile.tags.includes(DeprecatedTag)) {
+    return IsDeprecatedValue;
+  }
+  return IsNotDeprecatedValue;
+}
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
@@ -15,7 +15,7 @@
  */
 
 import { VersionDevfile, Devfile, Registry } from '../fetch-devfiles/fetch-devfiles';
-import { deprecatedTag, getDevfileTags, getDevfileTagClasses } from './get-devfile-tags';
+import { DeprecatedTag, getDevfileTags, isDeprecatedDevfile } from './get-devfile-tags';
 
 let undefinedVersionDevfile: undefined;
 
@@ -43,6 +43,7 @@ describe('getDevfileTags', () => {
     };
     devfile = {
       _registry: registry,
+      _deprecated: 'False',
       name: 'some devfile',
       displayName: 'display name',
       description: 'some description',
@@ -65,11 +66,7 @@ describe('getDevfileTags', () => {
 
 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);
+    expect(isDeprecatedDevfile(DeprecatedTag)).toEqual(true);
+    expect(isDeprecatedDevfile('tag')).toEqual(false);
   });
 });
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
@@ -16,7 +16,7 @@
 
 import { Devfile, VersionDevfile } from '../fetch-devfiles/fetch-devfiles';
 
-export const deprecatedTag = 'Deprecated';
+export const DeprecatedTag = 'Deprecated';
 /**
  * Checks if a versionDevfile exists and returns its tags. If
  * it doesn't exists returns the devfile tags
@@ -34,16 +34,15 @@ export function getDevfileTags(
 }
 
 /**
- * Checks if the given tag is equal to depracatedTag and returns the necessary css classes
+ * Checks if the given tag is equal to depracatedTag
  *
- * @returns the class names according to the given tag
+ * @returns bolean value
  */
-export function getDevfileTagClasses(tag: string): string {
-  let colorTag = 'devfile';
-  if (tag === deprecatedTag) {
-    colorTag = deprecatedTag.toLowerCase();
+export function isDeprecatedDevfile(tag: string): boolean {
+  if (tag === DeprecatedTag) {
+    return true;
   }
-  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`;
+  return false;
 }
 
 export default getDevfileTags;