feat: add deprecated labels for Jaeger, Falco, Httpbin and Kiali apps (#630)

* feat: add deprecated labels for Jaeger, Falco, Httpbin and Kiali apps

* fix: improve UI and remove unnecessary code for deprecated apps

---------

Co-authored-by: svcAPLBot <174728082+svcAPLBot@users.noreply.github.com>

Author: ferruhcihan

src/components/AppCard.tsx

@@ -49,18 +49,15 @@ const useStyles = makeStyles()((theme) => {
       border: 'none',
       borderRadius: '5px',
     },
-    chipDeprecated: {
-      color: `${theme.palette.text.primary}`,
-      backgroundColor: '#a4a4a440',
-      fontWeight: 'bold',
-    },
     chipDark: {
-      color: 'rgb(174, 192, 245)',
-      backgroundColor: 'lch(77.7 28.7 275 / 0.12)',
+      fontWeight: 'normal',
+      color: p.grey[0],
+      backgroundColor: p.grey[500_24],
     },
     chipLight: {
-      color: '#696970',
-      backgroundColor: 'rgba(0, 0, 0, 0.08)',
+      fontWeight: 'normal',
+      color: p.grey[1000],
+      backgroundColor: p.grey[300],
     },
     contrast: {
       filter: 'drop-shadow(0 0 2px white)',
@@ -169,7 +166,11 @@ export default function ({
 
         {isDeprecated && (
           <Box>
-            <Chip className={cx(classes.chip, classes.chipDeprecated)} label='DEPRECATED' variant='outlined' />
+            <Chip
+              className={cx(classes.chip, isLight ? classes.chipLight : classes.chipDark)}
+              label='DEPRECATED'
+              variant='outlined'
+            />
           </Box>
         )}
       </Link>

src/components/Apps.tsx

@@ -94,8 +94,8 @@ function sortArray(a, b) {
 function getDeprecatedApps(apps, session, teamId) {
   return apps
     ?.map((app) => {
-      const { id, isDeprecated, deprecationInfo, externalUrl, replacementUrl } = getAppData(session, teamId, app)
-      if (isDeprecated) return { id, deprecationInfo, externalUrl, replacementUrl }
+      const { id, isDeprecated, deprecationInfo, externalUrl } = getAppData(session, teamId, app)
+      if (isDeprecated) return { id, deprecationInfo, externalUrl }
       return null
     })
     ?.filter((app) => app !== null)
@@ -203,11 +203,10 @@ export default function Apps({ teamId, apps, teamSettings, setAppState, objSetti
     return deprecatedApps?.map((app) => {
       const handleCancel = () => {
         setOpenModal('')
-        window.open(app.externalUrl, '_blank')
+        window.open(app?.externalUrl, '_blank')
       }
       const handleAction = () => {
         setOpenModal('')
-        window.open(app.replacementUrl, '_blank')
       }
       return (
         <div key={`deprecated-${app.id}-modal`}>
@@ -219,7 +218,8 @@ export default function Apps({ teamId, apps, teamSettings, setAppState, objSetti
             handleCancel={handleCancel}
             cancelButtonText='I understand!'
             handleAction={handleAction}
-            actionButtonText={`Go to ${app.deprecationInfo.replacement}`}
+            actionButtonText='Cancel'
+            actionButtonColor='primary'
           />
         </div>
       )

src/components/DeprecatedModalInfo.tsx

@@ -1,7 +1,6 @@
 import { Box, Checkbox, FormControlLabel } from '@mui/material'
 import React from 'react'
 import { makeStyles } from 'tss-react/mui'
-import ForwardIcon from '@mui/icons-material/Forward'
 
 const useStyles = makeStyles()((theme) => {
   return {
@@ -27,10 +26,10 @@ interface Props {
 }
 
 export default function ({ deprecatedApp }: Props): React.ReactElement {
-  const { classes, cx } = useStyles()
+  const { classes } = useStyles()
   const {
     id,
-    deprecationInfo: { replacement, message, reasons, replacementAdvantages, options },
+    deprecationInfo: { message, reasons, options },
   } = deprecatedApp
   const image = (id, img) => {
     return (
@@ -59,36 +58,32 @@ export default function ({ deprecatedApp }: Props): React.ReactElement {
     <Box>
       <Box sx={{ display: 'flex', alignItems: 'center' }}>
         <Box sx={{ width: '200px', position: 'relative', margin: 'auto' }}>{image(id, `/logos/${id}_logo.svg`)}</Box>
-        <ForwardIcon className={classes.arrow} />
-        <Box sx={{ width: '200px', position: 'relative', margin: 'auto' }}>
-          {image(replacement, `/logos/${replacement}_logo.svg`)}
-        </Box>
       </Box>
       <Box sx={{ mt: '2rem', mb: '1rem' }}>{message}</Box>
-      <Box>
-        <Box sx={{ fontWeight: 'bold' }}>Reasons:</Box>
+      {reasons && (
         <Box>
-          {reasons.map((reason) => (
-            <Box sx={{ ml: '1rem' }}>{reason}</Box>
-          ))}
+          <Box sx={{ fontWeight: 'bold' }}>Reasons:</Box>
+          <Box component='ul' sx={{ pl: 2, mt: 1 }}>
+            {reasons.map((reason) => (
+              <Box component='li' sx={{ ml: '1rem' }} key={reason}>
+                {reason}
+              </Box>
+            ))}
+          </Box>
         </Box>
-      </Box>
-      <Box sx={{ mt: '1rem' }}>
-        <Box sx={{ fontWeight: 'bold' }}>Advantages of replacement:</Box>
-        <Box>
-          {replacementAdvantages.map((advantage) => (
-            <Box sx={{ ml: '1rem' }}>{advantage}</Box>
-          ))}
+      )}
+      {options && (
+        <Box sx={{ mt: '1rem' }}>
+          <Box sx={{ fontWeight: 'bold' }}>Options:</Box>
+          <Box component='ul' sx={{ pl: 2, mt: 1 }}>
+            {options.map((option) => (
+              <Box component='li' sx={{ ml: '1rem' }} key={option}>
+                {option}
+              </Box>
+            ))}
+          </Box>
         </Box>
-      </Box>
-      <Box sx={{ mt: '1rem' }}>
-        <Box sx={{ fontWeight: 'bold' }}>Options:</Box>
-        <Box>
-          {options.map((option) => (
-            <Box sx={{ ml: '1rem' }}>{option}</Box>
-          ))}
-        </Box>
-      </Box>
+      )}
       <Box sx={{ mt: '1rem' }}>
         <FormControlLabel control={<Checkbox onChange={toggleDontShowAgain} />} label="Don't show me again" />
       </Box>

src/utils/data.ts

@@ -179,7 +179,6 @@ export const getAppData = (
   const isBeta = getBetaApp(session, appId)
   const isAlpha = getAlphaApp(session, appId)
   const deprecationInfo = getDeprecationInfo(session, appId)
-  const replacementUrl = `https://${deprecationInfo?.replacement}.${cluster.domainSuffix}${deprecationInfo?.path ?? ''}`
   return {
     ...coreApp,
     ...app,
@@ -197,7 +196,6 @@ export const getAppData = (
     isBeta,
     isAlpha,
     deprecationInfo,
-    replacementUrl,
   }
 }