add cert icons for SectionSelect

components/Icon/Icon.tsx

@@ -14,6 +14,7 @@ import { IconAddLocation } from './icons/IconAddLocation';
 import { IconAddRule } from './icons/IconAddRule';
 import { IconAddToken } from './icons/IconAddToken';
 import { IconAddUser } from './icons/IconAddUser';
+import { IconAliases } from './icons/IconAliases';
 import { IconAndroid } from './icons/IconAndroid';
 import { IconApple } from './icons/IconApple';
 import { IconAppStore } from './icons/IconAppstore';
@@ -22,6 +23,7 @@ import { IconArrowBig } from './icons/IconArrowBig';
 import { IconArrowSmall } from './icons/IconArrowSmall';
 import { IconAttentionFilled } from './icons/IconAttentionFilled';
 import { IconAttentionOutlined } from './icons/IconAttentionOutlined';
+import { IconAuthorisedApp } from './icons/IconAuthorisedApp';
 import { IconBiometric } from './icons/IconBiometric';
 import { IconBug } from './icons/IconBug';
 import { IconCalendar } from './icons/IconCalendar';
@@ -181,6 +183,8 @@ export const Icon = <T extends IconKindValue>({
         return IconAddRule;
       case 'add-alias':
         return IconAddAlias;
+      case 'aliases':
+        return IconAliases;
       case 'upload':
         return IconUpload;
       case 'lock-closed':
@@ -429,6 +433,8 @@ export const Icon = <T extends IconKindValue>({
         return IconTutorial;
       case 'tutorial-not-available':
         return IconTutorialNotAvailable;
+      case 'authorised-app':
+        return IconAuthorisedApp;
     }
   }, [iconKind]);
 

components/Icon/icon-types.ts

@@ -2,6 +2,7 @@ export const IconKind = {
   IpSuggest: 'ip-suggest',
   Filtration: 'filtration',
   AddAlias: 'add-alias',
+  Aliases: 'aliases',
   Customize: 'customize',
   NetworkSettings: 'network-settings',
   AddGroup: 'add-group',
@@ -130,6 +131,7 @@ export const IconKind = {
   LightBulb: 'light-bulb',
   Tutorial: 'tutorial',
   TutorialNotAvailable: 'tutorial-not-available',
+  AuthorisedApp: 'authorised-app',
 } as const;
 
 export type IconKindValue = (typeof IconKind)[keyof typeof IconKind];

components/Icon/icons/IconAliases.tsx

@@ -0,0 +1,19 @@
+import type { SVGProps } from 'react';
+
+export const IconAliases = (props: SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M17.395 11.7901C17.375 11.4101 17.065 11.1001 16.675 11.0901C16.225 11.0701 15.775 11.0001 15.345 10.8701C14.955 10.7501 14.585 10.5901 14.225 10.3901C13.985 10.2601 13.705 10.2601 13.465 10.3901C13.125 10.6001 12.755 10.7601 12.375 10.8701C11.945 11.0001 11.505 11.0701 11.055 11.0801C10.665 11.0801 10.355 11.3901 10.325 11.7701C10.275 12.5001 10.315 13.9501 11.205 15.4301C11.905 16.5901 12.825 17.2401 13.495 17.5901C13.605 17.6501 13.735 17.6901 13.865 17.6901C14.015 17.6901 14.155 17.6501 14.275 17.5701C14.935 17.2201 15.835 16.5701 16.515 15.4401C17.395 13.9901 17.445 12.5301 17.395 11.7901ZM15.225 14.6601C14.815 15.3501 14.295 15.7901 13.855 16.0701C13.415 15.7901 12.895 15.3401 12.485 14.6601C12.015 13.8701 11.855 13.0901 11.815 12.5301C12.155 12.4801 12.485 12.4101 12.805 12.3101C13.165 12.2001 13.515 12.0601 13.855 11.8901C14.195 12.0601 14.545 12.1901 14.905 12.3001C15.225 12.4001 15.555 12.4701 15.885 12.5201C15.845 13.1101 15.685 13.8901 15.215 14.6701L15.225 14.6601ZM4.09497 14.9401V5.04011C4.09497 4.35011 4.65497 3.79011 5.34497 3.79011H9.28497V6.34011C9.28497 7.38011 10.125 8.22011 11.165 8.22011H13.715V8.91011H15.215V7.47011C15.215 7.47011 15.215 7.44011 15.215 7.42011C15.215 7.35011 15.195 7.29011 15.175 7.23011C15.175 7.21011 15.165 7.18011 15.155 7.16011C15.115 7.08011 15.075 7.00011 15.005 6.94011L10.565 2.51011C10.505 2.45011 10.425 2.40011 10.345 2.36011C10.325 2.35011 10.305 2.34011 10.275 2.34011C10.215 2.32011 10.145 2.30011 10.075 2.30011C10.055 2.30011 10.045 2.30011 10.035 2.30011H5.34497C3.82497 2.29011 2.59497 3.52011 2.59497 5.04011V14.9401C2.59497 16.4601 3.82497 17.6901 5.34497 17.6901H10.155V16.1901H5.34497C4.65497 16.1901 4.09497 15.6301 4.09497 14.9401ZM12.655 6.72011H11.165C10.955 6.72011 10.785 6.55011 10.785 6.34011V4.85011L12.655 6.72011Z"
+        fill="#7E8794"
+      />
+    </svg>
+  );
+};

components/Icon/icons/IconAuthorisedApp.tsx

@@ -0,0 +1,16 @@
+export const IconAuthorisedApp = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+    >
+      <path
+        d="M17.81 13.07V12.56C17.81 11.35 16.82 10.36 15.61 10.36H15.16C13.95 10.36 12.96 11.35 12.96 12.56V13.07C12.46 13.34 12.12 13.86 12.12 14.46V16.55C12.12 17.43 12.83 18.14 13.71 18.14H17.06C17.94 18.14 18.65 17.43 18.65 16.55V14.46C18.65 13.86 18.31 13.34 17.81 13.07ZM15.16 11.86H15.61C16 11.86 16.31 12.17 16.31 12.56V12.87H14.46V12.56C14.46 12.17 14.77 11.86 15.16 11.86ZM17.15 16.56C17.15 16.56 17.11 16.65 17.06 16.65H13.71C13.71 16.65 13.62 16.61 13.62 16.56V14.47C13.62 14.47 13.66 14.38 13.71 14.38H17.06C17.06 14.38 17.15 14.42 17.15 14.47V16.56ZM15.94 2H3.75C2.23 2 1 3.23 1 4.75V14.02C1 15.54 2.23 16.77 3.75 16.77H10.12V15.27H3.75C3.06 15.27 2.5 14.71 2.5 14.02V7.71H17.19V9.09H18.69V4.75C18.69 3.23 17.46 2 15.94 2ZM2.5 6.21V4.75C2.5 4.06 3.06 3.5 3.75 3.5H15.94C16.63 3.5 17.19 4.06 17.19 4.75V6.21H2.5ZM4.86 4.86C4.86 5.19 4.59 5.45 4.27 5.45C3.95 5.45 3.68 5.18 3.68 4.86C3.68 4.54 3.95 4.27 4.27 4.27C4.59 4.27 4.86 4.54 4.86 4.86ZM6.77 4.86C6.77 5.19 6.5 5.45 6.18 5.45C5.86 5.45 5.59 5.18 5.59 4.86C5.59 4.54 5.86 4.27 6.18 4.27C6.5 4.27 6.77 4.54 6.77 4.86ZM8.69 4.86C8.69 5.19 8.42 5.45 8.1 5.45C7.78 5.45 7.51 5.18 7.51 4.86C7.51 4.54 7.78 4.27 8.1 4.27C8.42 4.27 8.69 4.54 8.69 4.86Z"
+        fill="#3961DB"
+      />
+    </svg>
+  );
+};

components/MarkedSectionHeader/MarkedSectionHeader.tsx

@@ -4,7 +4,7 @@ import { SizedBox } from '../SizedBox/SizedBox';
 
 type Props = {
   title: string;
-  description: string;
+  description?: string;
 };
 
 export const MarkedSectionHeader = ({ description, title }: Props) => {
@@ -13,10 +13,14 @@ export const MarkedSectionHeader = ({ description, title }: Props) => {
       <AppText font={TextStyle.TBodyPrimary600} color={ThemeVariable.FgDefault}>
         {title}
       </AppText>
-      <SizedBox height={ThemeSpacing.Xl} />
-      <AppText font={TextStyle.TBodySm400} color={ThemeVariable.FgMuted}>
-        {description}
-      </AppText>
+      {description && (
+        <>
+          <SizedBox height={ThemeSpacing.Xl} />
+          <AppText font={TextStyle.TBodySm400} color={ThemeVariable.FgMuted}>
+            {description}
+          </AppText>
+        </>
+      )}
       <SizedBox height={ThemeSpacing.Xl} />
     </>
   );

components/SectionSelect/SectionSelect.tsx

@@ -8,6 +8,8 @@ import { CheckboxIndicator } from '../CheckboxIndicator/CheckboxIndicator';
 import { Icon } from '../Icon';
 import { RadioIndicator } from '../RadioIndicator/RadioIndicator';
 import behavior from './assets/behavior.png';
+import certificateAuthority from './assets/certificate-authority.png';
+import certificates from './assets/certificates.png';
 import customSettings from './assets/custom-settings.png';
 import customization from './assets/customization.png';
 import deviceClc from './assets/device-clc.png';
@@ -61,6 +63,8 @@ export const SectionSelect = ({
 }: Props) => {
   const imageSource = useMemo(() => {
     switch (image) {
+      case 'certificate-authority':
+        return certificateAuthority;
       case 'ldap':
         return ldap;
       case 'proxy-management':
@@ -73,6 +77,8 @@ export const SectionSelect = ({
         return remoteActivation;
       case 'enrollment':
         return enrollment;
+      case 'certificates':
+        return certificates;
       case 'manual-setup':
         return manualSetup;
       case 'token-email':

components/SectionSelect/types.ts

@@ -1,4 +1,5 @@
 const SectionSelectImage = {
+  CertificateAuthority: 'certificate-authority',
   Smtp: 'smtp',
   GatewayNotifications: 'gateway-notifications',
   RemoteActivation: 'remote-activation',
@@ -21,6 +22,7 @@ const SectionSelectImage = {
   Vector: 'vector',
   LDAP: 'ldap',
   Enrollment: 'enrollment',
+  Certificates: 'certificates',
   ExternalId: 'external-id',
 } as const;