[feat] add compliance page (#329)

Co-authored-by: Matthias Veit <[email protected]>

src/assets/icons/icon-list.ts

@@ -47,6 +47,7 @@ import DynamicFormIconComp from './dynamic-form-icon.svg?react'
 import EditFilledIconComp from './edit-filled-icon.svg?react'
 import EmailWithTextIconComp from './email-with-text-icon.svg?react'
 import ErrorFilledIconComp from './error-filled-icon.svg?react'
+import ErrorIconComp from './error-icon.svg?react'
 import FixLogoNoBackgroundComp from './fix-logo-no-background.svg?react'
 import FixLogoComp from './fix-logo.svg?react'
 import FormatListBulletedIconComp from './format-list-bulleted-icon.svg?react'
@@ -124,6 +125,8 @@ import VPNKeyIconComp from './vpn-key-icon.svg?react'
 import WarningFilledIconComp from './warning-filled-icon.svg?react'
 import WarningIconComp from './warning-icon.svg?react'
 import WorkspaceSettingsIconComp from './workspace-settings-icon.svg?react'
+import ZoomInMapIconComp from './zoom-in-map-icon.svg?react'
+import ZoomOutMapIconComp from './zoom-out-map-icon.svg?react'
 
 export const AccessibilityNewIcon = createIcon(AccessibilityNewIconComp)
 export const AccountCircleIcon = createIcon(AccountCircleIconComp)
@@ -173,6 +176,7 @@ export const DynamicFormIcon = createIcon(DynamicFormIconComp)
 export const EditFilledIcon = createIcon(EditFilledIconComp)
 export const EmailWithTextIcon = createIcon(EmailWithTextIconComp)
 export const ErrorFilledIcon = createIcon(ErrorFilledIconComp)
+export const ErrorIcon = createIcon(ErrorIconComp)
 export const FixLogoNoBackground = createIcon(FixLogoNoBackgroundComp)
 export const FixLogo = createIcon(FixLogoComp)
 export const FormatListBulletedIcon = createIcon(FormatListBulletedIconComp)
@@ -250,3 +254,5 @@ export const VPNKeyIcon = createIcon(VPNKeyIconComp)
 export const WarningFilledIcon = createIcon(WarningFilledIconComp)
 export const WarningIcon = createIcon(WarningIconComp)
 export const WorkspaceSettingsIcon = createIcon(WorkspaceSettingsIconComp)
+export const ZoomInMapIcon = createIcon(ZoomInMapIconComp)
+export const ZoomOutMapIcon = createIcon(ZoomOutMapIconComp)

src/containers/auth/AuthContainer.tsx

@@ -21,7 +21,7 @@ export default function AuthContainer() {
             <AuthCarousel />
           </SideRegion>
           <BrandRegion>
-            <FixLogo color="primary.main" />
+            <FixLogo color="primary.main" width={48} height={48} />
           </BrandRegion>
           <ContentRegion>
             <AuthRoutes />

src/containers/panel/PanelRoutes.tsx

@@ -4,14 +4,6 @@ import { Navigate } from 'src/shared/absolute-navigate'
 import { panelUI } from 'src/shared/constants'
 import { AccountCheckGuard, BenchmarkCheckGuard, PermissionCheckGuard, PreLoadCheckGuard } from 'src/shared/layouts/panel-layout'
 
-const SecurityPage = lazy(
-  () =>
-    import(
-      /* webpackChunkName: "security" */
-      'src/pages/panel/security/SecurityPage'
-    ),
-)
-
 const DashboardPage = lazy(
   () =>
     import(
@@ -44,35 +36,35 @@ const InventorySearchPage = lazy(
     ),
 )
 
-const AccountsPage = lazy(
+const ResourceDetailView = lazy(
   () =>
     import(
-      /* webpackChunkName: "accounts" */
-      'src/pages/panel/accounts/AccountsPage'
+      /* webpackChunkName: "resource-detail" */
+      'src/pages/panel/resource-detail/ResourceDetailView'
     ),
 )
 
-const PanelSettingsContainer = lazy(
+const CompliancePage = lazy(
   () =>
     import(
-      /* webpackChunkName: "panel-settings-container" */
-      'src/containers/panel-settings/PanelSettingsContainer'
+      /* webpackChunkName: "compliance" */
+      'src/pages/panel/compliance/CompliancePage'
     ),
 )
 
-const BenchmarkDetailPage = lazy(
+const AccountsPage = lazy(
   () =>
     import(
-      /* webpackChunkName: "benchmark-detail" */
-      'src/pages/panel/benchmark-detail/BenchmarkDetailPage'
+      /* webpackChunkName: "accounts" */
+      'src/pages/panel/accounts/AccountsPage'
     ),
 )
 
-const ResourceDetailView = lazy(
+const PanelSettingsContainer = lazy(
   () =>
     import(
-      /* webpackChunkName: "resource-detail" */
-      'src/pages/panel/resource-detail/ResourceDetailView'
+      /* webpackChunkName: "panel-settings-container" */
+      'src/containers/panel-settings/PanelSettingsContainer'
     ),
 )
 
@@ -108,6 +100,22 @@ const WorkspaceSettingsAccountsSetupCloudAzurePage = lazy(
     ),
 )
 
+const SecurityPage = lazy(
+  () =>
+    import(
+      /* webpackChunkName: "security" */
+      'src/pages/panel/security/SecurityPage'
+    ),
+)
+
+const BenchmarkDetailPage = lazy(
+  () =>
+    import(
+      /* webpackChunkName: "benchmark-detail" */
+      'src/pages/panel/benchmark-detail/BenchmarkDetailPage'
+    ),
+)
+
 export function PanelRoutes() {
   const withResourceDetailRoute = <Route path="resource-detail/:resourceDetailId" element={<ResourceDetailView />} />
   return (
@@ -119,7 +127,6 @@ export function PanelRoutes() {
         />
         <Route element={<AccountCheckGuard />}>
           <Route element={<BenchmarkCheckGuard />}>
-            <Route path="security" element={<SecurityPage />} />
             <Route path="dashboard" element={<DashboardPage />} />
             <Route path="inventory">
               <Route path="" element={<InventoryPage key={0} />}>
@@ -132,13 +139,17 @@ export function PanelRoutes() {
                 {withResourceDetailRoute}
               </Route>
             </Route>
+            <Route path="compliance/:benchmarkId?/:accountId?/check-detail?/:checkId?" element={<CompliancePage />}>
+              {withResourceDetailRoute}
+            </Route>
+            <Route element={<PermissionCheckGuard permissionToCheck="readSettings" />}>
+              <Route path="accounts" element={<AccountsPage />} />
+            </Route>
+            <Route path="security" element={<SecurityPage />} />
             <Route path="benchmark/:benchmarkId/:accountId?/check-detail?/:checkId?" element={<BenchmarkDetailPage />}>
               {withResourceDetailRoute}
             </Route>
           </Route>
-          <Route element={<PermissionCheckGuard permissionToCheck="readSettings" />}>
-            <Route path="accounts" element={<AccountsPage />} />
-          </Route>
         </Route>
         <Route element={<PermissionCheckGuard permissionToCheck="readSettings" />}>
           <Route path="accounts">