feat: integration urls, ux (#4640)

frontend/src/component/archive/ArchiveTable/ArchiveTable.tsx

@@ -244,7 +244,6 @@ export const ArchiveTable = ({
         prepareRow,
         setHiddenColumns,
         toggleAllRowsSelected,
-        toggleRowSelected,
     } = useTable(
         {
             columns: columns as any[], // TODO: fix after `react-table` v8 update

frontend/src/component/common/Table/cells/FeatureSeenCell/LastSeenTooltip.tsx

@@ -142,7 +142,6 @@ export const LastSeenTooltip = ({
                             unit: string,
                             suffix: string
                         ) => {
-                            const [, textColor] = getColor(unit);
                             return (
                                 <Typography
                                     fontWeight={'bold'}

frontend/src/component/integrations/IntegrationList/AvailableIntegrations/AvailableIntegrations.tsx

@@ -123,7 +123,14 @@ export const AvailableIntegrations: VFC<IAvailableIntegrationsProps> = ({
                         <Typography variant="body2" color="text.secondary">
                             In order to connect your application to Unleash you
                             will need a client SDK (software developer kit) for
-                            your programming language and an API token.
+                            your programming language and an{' '}
+                            <a
+                                href="https://docs.getunleash.io/how-to/how-to-create-api-tokens"
+                                target="_blank"
+                                rel="noopener noreferrer"
+                            >
+                                API token
+                            </a>
                         </Typography>
                     </div>
                     <div>
@@ -160,9 +167,23 @@ export const AvailableIntegrations: VFC<IAvailableIntegrationsProps> = ({
                             Client-side SDKs
                         </Typography>
                         <Typography variant="body2" color="text.secondary">
-                            Client-side SDKs can connect to the Unleash Proxy or
+                            Client-side SDKs can connect to the{' '}
-                            to the Unleash front-end API, but not to the regular
+                            <a
-                            Unleash client API.
+                                href="https://docs.getunleash.io/reference/unleash-edge"
+                                target="_blank"
+                                rel="noopener noreferrer"
+                            >
+                                Unleash Edge
+                            </a>{' '}
+                            or to the{' '}
+                            <a
+                                href="https://docs.getunleash.io/reference/front-end-api"
+                                target="_blank"
+                                rel="noopener noreferrer"
+                            >
+                                Unleash front-end API
+                            </a>
+                            , but not to the regular Unleash client API.
                         </Typography>
                     </div>
                     <StyledCardsGrid small>
@@ -189,8 +210,8 @@ export const AvailableIntegrations: VFC<IAvailableIntegrationsProps> = ({
                 <StyledSection>
                     <StyledGrayContainer>
                         <div>
-                            <Typography component="h3" variant="h2">
+                            <Typography component="h3" variant="h4">
-                                Other
+                                Community SDKs
                             </Typography>
                             <Typography>
                                 <a

frontend/src/component/integrations/IntegrationList/IntegrationCard/IntegrationCard.tsx

@@ -1,12 +1,13 @@
 import React, { Fragment, VFC } from 'react';
 import { Link } from 'react-router-dom';
-import { styled, Typography, Theme } from '@mui/material';
+import { styled, Typography } from '@mui/material';
 import { IntegrationIcon } from '../IntegrationIcon/IntegrationIcon';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 import { Badge } from 'component/common/Badge/Badge';
 import { IntegrationCardMenu } from './IntegrationCardMenu/IntegrationCardMenu';
 import type { AddonSchema } from 'openapi';
+import OpenInNewIcon from '@mui/icons-material/OpenInNew';
 
 interface IIntegrationCardProps {
     id?: string | number;
@@ -70,6 +71,10 @@ const StyledAction = styled(Typography)(({ theme }) => ({
     gap: theme.spacing(0.5),
 }));
 
+const StyledOpenInNewIcon = styled(OpenInNewIcon)(({ theme }) => ({
+    fontSize: theme.fontSizes.bodySize,
+}));
+
 export const IntegrationCard: VFC<IIntegrationCardProps> = ({
     icon,
     title,
@@ -109,7 +114,12 @@ export const IntegrationCard: VFC<IIntegrationCardProps> = ({
                 {description}
             </Typography>
             <StyledAction data-loading>
-                {configureActionText} <ChevronRightIcon />
+                {configureActionText}
+                <ConditionallyRender
+                    condition={isExternal}
+                    show={<StyledOpenInNewIcon />}
+                    elseShow={<ChevronRightIcon />}
+                />
             </StyledAction>
         </Fragment>
     );

frontend/src/component/project/Project/Project.tsx

@@ -15,7 +15,7 @@ import {
     StyledTopRow,
 } from './Project.styles';
 import { Box, Paper, Tabs, Typography } from '@mui/material';
-import { Delete, Edit, FileUpload } from '@mui/icons-material';
+import { FileUpload } from '@mui/icons-material';
 import useToast from 'hooks/useToast';
 import useQueryParams from 'hooks/useQueryParams';
 import { useEffect, useState } from 'react';
@@ -24,11 +24,7 @@ import { ProjectFeaturesArchive } from './ProjectFeaturesArchive/ProjectFeatures
 import ProjectOverview from './ProjectOverview';
 import ProjectHealth from './ProjectHealth/ProjectHealth';
 import PermissionIconButton from 'component/common/PermissionIconButton/PermissionIconButton';
-import {
+import { UPDATE_FEATURE } from 'component/providers/AccessProvider/permissions';
-    UPDATE_FEATURE,
-    DELETE_PROJECT,
-    UPDATE_PROJECT,
-} from 'component/providers/AccessProvider/permissions';
 import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import { Navigate, Route, Routes, useLocation } from 'react-router-dom';

frontend/src/component/project/Project/ProjectDoraMetrics/ProjectDoraMetrics.tsx

@@ -1,4 +1,4 @@
-import { Box, List, ListItem } from '@mui/material';
+import { Box } from '@mui/material';
 import { useProjectDoraMetrics } from 'hooks/api/getters/useProjectDoraMetrics/useProjectDoraMetrics';
 import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
 import { useMemo } from 'react';
@@ -57,7 +57,7 @@ export const ProjectDoraMetrics = () => {
                 width: '50%',
                 Cell: ({
                     row: {
-                        original: { name, description },
+                        original: { name },
                     },
                 }: any) => {
                     return (
@@ -129,7 +129,6 @@ export const ProjectDoraMetrics = () => {
         rows,
         prepareRow,
         state: { globalFilter },
-        setGlobalFilter,
     } = useTable(
         {
             columns: columns as any[], // TODO: fix after `react-table` v8 update