feat!: remove the application thumbnail

This is a feature that may have made more sense in the past: a nice thumbnail to represent the web application we're building for the user. The idea in the past was to actually get a screenshot of the running application! https://issues.redhat.com/browse/KONFLUX-1194 .. but, we never brought that into a full feature. The icon is a randomly chosen one of 9 that is maybe just confusing for the user. If we could let the user upload and crop an icon, that might be cool: a custom logo for each application - but, that's a larger effort for another day: https://issues.redhat.com/browse/KFLUXUI-53 Signed-off-by: Ralph Bean <[email protected]>
konflux-ci · Feb 6, 2025 · 678576d · 678576d
1 parent c6528e9
commit 678576d
Show file tree

Hide file tree

Showing 6 changed files with 0 additions and 83 deletions.
diff --git a/src/components/ApplicationDetails/ApplicationHeader.tsx b/src/components/ApplicationDetails/ApplicationHeader.tsx
@@ -1,16 +1,12 @@
 import * as React from 'react';
 import { Flex, FlexItem, Text } from '@patternfly/react-core';
 import { ApplicationKind } from '../../types';
-import { ApplicationThumbnail } from '../ApplicationThumbnail';
 
 export const ApplicationHeader: React.FC<
   React.PropsWithChildren<{ application: ApplicationKind }>
 > = ({ application }) => {
   return (
     <Flex>
-      <FlexItem>
-        <ApplicationThumbnail application={application} />
-      </FlexItem>
       <FlexItem alignSelf={{ default: 'alignSelfCenter' }}>
         <Text component="h1" data-test="details__title">
           {application?.spec?.displayName || ''}

diff --git a/src/components/ApplicationDetails/__tests__/ApplicationHeader.spec.tsx b/src/components/ApplicationDetails/__tests__/ApplicationHeader.spec.tsx
@@ -16,18 +16,4 @@ describe('ApplicationHeader', () => {
     );
     expect(screen.getByText('Application 1')).toBeInTheDocument();
   });
-
-  it('should show application health status and thumbnail in the header', () => {
-    render(
-      <ApplicationHeader
-        application={
-          {
-            metadata: { name: 'application-1', annotations: {} },
-            spec: { displayName: 'Application 1' },
-          } as ApplicationKind
-        }
-      />,
-    );
-    expect(screen.getByAltText('Application thumbnail')).toBeInTheDocument();
-  });
 });
diff --git a/src/components/ApplicationThumbnail.tsx b/src/components/ApplicationThumbnail.tsx
diff --git a/src/components/ImportForm/ApplicationSection/ApplicationSection.tsx b/src/components/ImportForm/ApplicationSection/ApplicationSection.tsx
@@ -2,7 +2,6 @@ import * as React from 'react';
 import { Flex, FlexItem, FormSection } from '@patternfly/react-core';
 import { useFormikContext } from 'formik';
 import { InputField } from 'formik-pf';
-import { ApplicationThumbnail } from '../../ApplicationThumbnail';
 import { ImportFormValues } from '../type';
 
 const ApplicationSection: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
@@ -12,9 +11,6 @@ const ApplicationSection: React.FunctionComponent<React.PropsWithChildren<unknow
 
   return (
     <Flex>
-      <FlexItem>
-        <ApplicationThumbnail annotationValue={0} />
-      </FlexItem>
       <FlexItem flex={{ default: 'flex_1' }}>
         <FormSection>
           <InputField

diff --git a/src/utils/__tests__/create-utils.spec.ts b/src/utils/__tests__/create-utils.spec.ts
@@ -1,5 +1,4 @@
 import { omit } from 'lodash-es';
-import { THUMBNAIL_ANNOTATION } from '../../components/ApplicationThumbnail';
 import { linkSecretToServiceAccount } from '../../components/Secrets/utils/service-account-utils';
 import { k8sCreateResource, k8sUpdateResource } from '../../k8s/k8s-fetch';
 import { SecretModel } from '../../models';
@@ -32,20 +31,12 @@ jest.mock('../../components/Secrets/utils/service-account-utils', () => {
 const createResourceMock = k8sCreateResource as jest.Mock;
 const linkSecretToServiceAccountMock = linkSecretToServiceAccount as jest.Mock;
 
-jest.mock('../../components/ApplicationThumbnail', () => {
-  const actual = jest.requireActual('../../components/ApplicationThumbnail');
-  return { ...actual, getRandomSvgNumber: () => 7 };
-});
-
 const mockApplicationRequestData = {
   apiVersion: `${ApplicationModel.apiGroup}/${ApplicationModel.apiVersion}`,
   kind: ApplicationModel.kind,
   metadata: {
     name: 'test-application',
     namespace: 'test-ns',
-    annotations: {
-      [THUMBNAIL_ANNOTATION]: '7',
-    },
   },
   spec: {
     displayName: 'test-application',

diff --git a/src/utils/create-utils.ts b/src/utils/create-utils.ts
@@ -1,6 +1,5 @@
 import { isEqual, isNumber } from 'lodash-es';
 import { v4 as uuidv4 } from 'uuid';
-import { getRandomSvgNumber, THUMBNAIL_ANNOTATION } from '../components/ApplicationThumbnail';
 import {
   getAnnotationForSecret,
   getLabelsForSecret,
@@ -61,9 +60,6 @@ export const createApplication = (
     metadata: {
       name: application,
       namespace,
-      annotations: {
-        [THUMBNAIL_ANNOTATION]: getRandomSvgNumber().toString(),
-      },
     },
     spec: {
       displayName: application,