components update 1

web/src/pages/PlaygroundPage/PlaygroundPage.tsx

@@ -0,0 +1,93 @@
+import { m } from '../../paraglide/messages';
+import { Card } from '../../shared/components/Card/Card';
+import { CodeCard } from '../../shared/defguard-ui/components/CodeCard/CodeCard';
+import { Divider } from '../../shared/defguard-ui/components/Divider/Divider';
+import { ThemeSpacing } from '../../shared/defguard-ui/types';
+import './style.scss';
+import { Controls } from '../../shared/components/Controls/Controls';
+import { LoadingStep } from '../../shared/components/LoadingStep/LoadingStep';
+import { ActionableSection } from '../../shared/defguard-ui/components/ActionableSection/ActionableSection';
+import { ActionableSectionVariant } from '../../shared/defguard-ui/components/ActionableSection/types';
+import { Button } from '../../shared/defguard-ui/components/Button/Button';
+import { SizedBox } from '../../shared/defguard-ui/components/SizedBox/SizedBox';
+import testIconSrc from './assets/actionable-test1.png';
+
+export const PlaygroundPage = () => {
+  return (
+    <div id="playground-page">
+      <Card>
+        <CodeCard title="Code section title" value={m.test_placeholder_extreme()} />
+      </Card>
+      <Divider spacing={ThemeSpacing.Sm} />
+      <LoadingStepsTest />
+      <Card>
+        <ActionableSection
+          title={m.test_placeholder()}
+          subtitle={m.test_placeholder_long()}
+          imageSrc={testIconSrc}
+        />
+        <Divider spacing={ThemeSpacing.Xl} />
+        <ActionableSection
+          variant={ActionableSectionVariant.Secondary}
+          title={m.test_placeholder()}
+          subtitle={m.test_placeholder_extreme()}
+          imageSrc={testIconSrc}
+        />
+        <Divider spacing={ThemeSpacing.Xl} />
+        <ActionableSection
+          variant={ActionableSectionVariant.Secondary}
+          title={m.test_placeholder()}
+          subtitle={m.test_placeholder_extreme()}
+          imageSrc={testIconSrc}
+        >
+          <Button text={m.test_placeholder()} iconRight="open-in-new-window" />
+        </ActionableSection>
+      </Card>
+    </div>
+  );
+};
+
+const LoadingStepsTest = () => {
+  return (
+    <>
+      <Card>
+        <div>
+          <LoadingStep loading title={m.test_placeholder_long()} />
+          <LoadingStep title={m.test_placeholder_long()} />
+          <LoadingStep title={m.test_placeholder_long()} />
+          <LoadingStep title={m.test_placeholder_long()} />
+          <LoadingStep title={m.test_placeholder_long()} />
+          <LoadingStep title={m.test_placeholder_long()} />
+        </div>
+      </Card>
+      <Card>
+        <div>
+          <LoadingStep success title={m.test_placeholder_long()} />
+          <LoadingStep success title={m.test_placeholder_long()} />
+          <LoadingStep success title={m.test_placeholder_long()} />
+          <LoadingStep loading title={m.test_placeholder_long()} />
+        </div>
+      </Card>
+      <Card>
+        <div>
+          <LoadingStep success title={m.test_placeholder_long()} />
+          <LoadingStep success title={m.test_placeholder_long()} />
+          <LoadingStep
+            error
+            errorMessage={`Error: ${m.test_placeholder()}`}
+            title={m.test_placeholder_long()}
+          >
+            <CodeCard title="Error log" value={m.test_placeholder_extreme()} />
+            <SizedBox height={ThemeSpacing.Xl} />
+            <Controls>
+              <div className="left">
+                <Button variant="primary" text="Retry" disabled />
+              </div>
+            </Controls>
+          </LoadingStep>
+          <LoadingStep title={m.test_placeholder_long()} />
+        </div>
+      </Card>
+    </>
+  );
+};

web/src/pages/PlaygroundPage/style.scss

@@ -0,0 +1,15 @@
+#playground-page {
+  width: 100%;
+  min-height: 100dvh;
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+  justify-content: flex-start;
+  row-gap: var(--spacing-2xl);
+  box-sizing: border-box;
+  padding: var(--spacing-4xl);
+
+  .card {
+    max-width: 670px;
+  }
+}

web/src/pages/UsersOverviewPage/UsersTable.tsx

@@ -139,9 +139,6 @@ export const UsersTable = ({ users }: Props) => {
         enableSorting: true,
         sortingFn: 'text',
         minSize: 250,
-        meta: {
-          flex: true,
-        },
         cell: (info) => {
           const rowData = info.row.original;
           return (

web/src/routeTree.gen.ts

@@ -10,9 +10,9 @@
 
 import { Route as rootRouteImport } from './routes/__root'
 import { Route as SnackbarRouteImport } from './routes/snackbar'
+import { Route as PlaygroundRouteImport } from './routes/playground'
 import { Route as ConsentRouteImport } from './routes/consent'
 import { Route as AuthRouteImport } from './routes/auth'
-import { Route as AppLoaderRouteImport } from './routes/app-loader'
 import { Route as AuthorizedRouteImport } from './routes/_authorized'
 import { Route as R404RouteImport } from './routes/404'
 import { Route as AuthIndexRouteImport } from './routes/auth/index'
@@ -56,6 +56,11 @@ const SnackbarRoute = SnackbarRouteImport.update({
   path: '/snackbar',
   getParentRoute: () => rootRouteImport,
 } as any)
+const PlaygroundRoute = PlaygroundRouteImport.update({
+  id: '/playground',
+  path: '/playground',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const ConsentRoute = ConsentRouteImport.update({
   id: '/consent',
   path: '/consent',
@@ -66,11 +71,6 @@ const AuthRoute = AuthRouteImport.update({
   path: '/auth',
   getParentRoute: () => rootRouteImport,
 } as any)
-const AppLoaderRoute = AppLoaderRouteImport.update({
-  id: '/app-loader',
-  path: '/app-loader',
-  getParentRoute: () => rootRouteImport,
-} as any)
 const AuthorizedRoute = AuthorizedRouteImport.update({
   id: '/_authorized',
   getParentRoute: () => rootRouteImport,
@@ -279,9 +279,9 @@ const AuthorizedDefaultLocationsLocationIdEditRoute =
 
 export interface FileRoutesByFullPath {
   '/404': typeof R404Route
-  '/app-loader': typeof AppLoaderRoute
   '/auth': typeof AuthRouteWithChildren
   '/consent': typeof ConsentRoute
+  '/playground': typeof PlaygroundRoute
   '/snackbar': typeof SnackbarRoute
   '/auth/callback': typeof AuthCallbackRoute
   '/auth/loading': typeof AuthLoadingRoute
@@ -320,8 +320,8 @@ export interface FileRoutesByFullPath {
 }
 export interface FileRoutesByTo {
   '/404': typeof R404Route
-  '/app-loader': typeof AppLoaderRoute
   '/consent': typeof ConsentRoute
+  '/playground': typeof PlaygroundRoute
   '/snackbar': typeof SnackbarRoute
   '/auth/callback': typeof AuthCallbackRoute
   '/auth/loading': typeof AuthLoadingRoute
@@ -362,9 +362,9 @@ export interface FileRoutesById {
   __root__: typeof rootRouteImport
   '/404': typeof R404Route
   '/_authorized': typeof AuthorizedRouteWithChildren
-  '/app-loader': typeof AppLoaderRoute
   '/auth': typeof AuthRouteWithChildren
   '/consent': typeof ConsentRoute
+  '/playground': typeof PlaygroundRoute
   '/snackbar': typeof SnackbarRoute
   '/_authorized/_default': typeof AuthorizedDefaultRouteWithChildren
   '/auth/callback': typeof AuthCallbackRoute
@@ -406,9 +406,9 @@ export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
   fullPaths:
     | '/404'
-    | '/app-loader'
     | '/auth'
     | '/consent'
+    | '/playground'
     | '/snackbar'
     | '/auth/callback'
     | '/auth/loading'
@@ -447,8 +447,8 @@ export interface FileRouteTypes {
   fileRoutesByTo: FileRoutesByTo
   to:
     | '/404'
-    | '/app-loader'
     | '/consent'
+    | '/playground'
     | '/snackbar'
     | '/auth/callback'
     | '/auth/loading'
@@ -488,9 +488,9 @@ export interface FileRouteTypes {
     | '__root__'
     | '/404'
     | '/_authorized'
-    | '/app-loader'
     | '/auth'
     | '/consent'
+    | '/playground'
     | '/snackbar'
     | '/_authorized/_default'
     | '/auth/callback'
@@ -532,9 +532,9 @@ export interface FileRouteTypes {
 export interface RootRouteChildren {
   R404Route: typeof R404Route
   AuthorizedRoute: typeof AuthorizedRouteWithChildren
-  AppLoaderRoute: typeof AppLoaderRoute
   AuthRoute: typeof AuthRouteWithChildren
   ConsentRoute: typeof ConsentRoute
+  PlaygroundRoute: typeof PlaygroundRoute
   SnackbarRoute: typeof SnackbarRoute
 }
 
@@ -547,6 +547,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof SnackbarRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/playground': {
+      id: '/playground'
+      path: '/playground'
+      fullPath: '/playground'
+      preLoaderRoute: typeof PlaygroundRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/consent': {
       id: '/consent'
       path: '/consent'
@@ -561,13 +568,6 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AuthRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/app-loader': {
-      id: '/app-loader'
-      path: '/app-loader'
-      fullPath: '/app-loader'
-      preLoaderRoute: typeof AppLoaderRouteImport
-      parentRoute: typeof rootRouteImport
-    }
     '/_authorized': {
       id: '/_authorized'
       path: ''
@@ -946,9 +946,9 @@ const AuthRouteWithChildren = AuthRoute._addFileChildren(AuthRouteChildren)
 const rootRouteChildren: RootRouteChildren = {
   R404Route: R404Route,
   AuthorizedRoute: AuthorizedRouteWithChildren,
-  AppLoaderRoute: AppLoaderRoute,
   AuthRoute: AuthRouteWithChildren,
   ConsentRoute: ConsentRoute,
+  PlaygroundRoute: PlaygroundRoute,
   SnackbarRoute: SnackbarRoute,
 }
 export const routeTree = rootRouteImport

web/src/routes/playground.tsx

@@ -0,0 +1,6 @@
+import { createFileRoute } from '@tanstack/react-router';
+import { PlaygroundPage } from '../pages/PlaygroundPage/PlaygroundPage';
+
+export const Route = createFileRoute('/playground')({
+  component: PlaygroundPage,
+});

web/src/shared/components/LoadingStep/LoadingStep.tsx

@@ -0,0 +1,80 @@
+import clsx from 'clsx';
+import './style.scss';
+import { useMemo } from 'react';
+import { AppText } from '../../defguard-ui/components/AppText/AppText';
+import { Fold } from '../../defguard-ui/components/Fold/Fold';
+import { Icon, IconKind } from '../../defguard-ui/components/Icon';
+import { LoaderSpinner } from '../../defguard-ui/components/LoaderSpinner/LoaderSpinner';
+import { SizedBox } from '../../defguard-ui/components/SizedBox/SizedBox';
+import { TextStyle, ThemeSpacing, ThemeVariable } from '../../defguard-ui/types';
+import { isPresent } from '../../defguard-ui/utils/isPresent';
+import type { LoadingStepProps } from './types';
+
+type ComponentVariant = 'loading' | 'success' | 'error' | 'default';
+
+export const LoadingStep = ({
+  title,
+  children,
+  error,
+  errorMessage,
+  success,
+  loading,
+}: LoadingStepProps) => {
+  const variant = useMemo((): ComponentVariant => {
+    if (success) return 'success';
+    if (error) return 'error';
+    if (loading) return 'loading';
+    return 'default';
+  }, [error, success, loading]);
+
+  return (
+    <div className={clsx('loading-step', `variant-${variant}`)}>
+      <div className="main-track">
+        <div className="icon-container">
+          {variant === 'default' && (
+            <Icon
+              icon={IconKind.EmptyPoint}
+              size={20}
+              staticColor={ThemeVariable.FgDisabled}
+            />
+          )}
+          {loading && <LoaderSpinner size={20} variant="primary" />}
+          {success && (
+            <Icon
+              icon={IconKind.CheckCircle}
+              staticColor={ThemeVariable.FgSuccess}
+              size={20}
+            />
+          )}
+          {error && (
+            <Icon
+              icon={IconKind.WarningFilled}
+              staticColor={ThemeVariable.FgCritical}
+              size={20}
+            />
+          )}
+        </div>
+        <p className={clsx('title')}>{title}</p>
+      </div>
+      <div className="content-track">
+        <div className="content-bar"></div>
+        {isPresent(children) && variant === 'error' && (
+          <div className="content">
+            <Fold open={variant === 'error'}>
+              {isPresent(errorMessage) && (
+                <>
+                  <AppText color={ThemeVariable.FgCritical} font={TextStyle.TBodySm400}>
+                    {errorMessage}
+                  </AppText>
+                  <SizedBox height={ThemeSpacing.Xl} />
+                </>
+              )}
+              {children}
+              <SizedBox height={ThemeSpacing.Xl2} />
+            </Fold>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};