Merge pull request #530 from code0-tech/feat/#525

Data list components should have a minimized variant

Author: nicosammito

src/components/d-runtime/DRuntimeCard.tsx

@@ -7,16 +7,18 @@ import {DRuntimeView} from "./DRuntime.view";
 export interface DRuntimeCardProps {
     runtimeId: Runtime['id']
     onSetting?: (runtime: DRuntimeView) => void
+    minimized?: boolean
 }
 
 export const DRuntimeCard: React.FC<DRuntimeCardProps> = (props) => {
     const {
         runtimeId,
+        minimized = false,
         onSetting = () => {
         }
     } = props
 
     return <Card>
-        <DRuntimeContent runtimeId={runtimeId} onSetting={onSetting}/>
+        <DRuntimeContent minimized={minimized} runtimeId={runtimeId} onSetting={onSetting}/>
     </Card>
 }

src/components/d-runtime/DRuntimeContent.tsx

@@ -2,7 +2,7 @@ import {Runtime} from "@code0-tech/sagittarius-graphql-types";
 import React from "react";
 import {Text} from "../text/Text";
 import {Flex} from "../flex/Flex";
-import {IconSettings} from "@tabler/icons-react";
+import {IconServer, IconSettings} from "@tabler/icons-react";
 import {Button} from "../button/Button";
 import {useService, useStore} from "../../utils";
 import {DRuntimeReactiveService} from "./DRuntime.service";
@@ -12,12 +12,14 @@ import {DRuntimeView} from "./DRuntime.view";
 export interface DRuntimeContentProps {
     runtimeId: Runtime['id']
     onSetting?: (runtime: DRuntimeView) => void
+    minimized?: boolean
 }
 
 export const DRuntimeContent: React.FC<DRuntimeContentProps> = (props) => {
 
     const {
         runtimeId,
+        minimized = false,
         onSetting = () => {
         }
     } = props
@@ -26,15 +28,25 @@ export const DRuntimeContent: React.FC<DRuntimeContentProps> = (props) => {
     const runtimeStore = useStore(DRuntimeReactiveService)
     const runtime = React.useMemo(() => runtimeService.getById(runtimeId), [runtimeStore, runtimeId])
 
-    return <Flex justify={"space-between"} align={"center"}>
+    return <Flex justify={"space-between"} align={"center"} style={{gap: "1.3rem"}}>
+
+        {minimized ? (
+            <Flex align={"center"} style={{gap: "0.7rem"}}>
+                <IconServer size={16}/>
+                <Text size={"md"} hierarchy={"secondary"} display={"block"}>
+                    {runtime?.name}
+                </Text>
+            </Flex>
+            ) : (
             <Flex style={{flexDirection: "column", gap: "0.35rem"}}>
-                <Text size={"lg"} hierarchy={"primary"} display={"block"}>
+                <Text size={"lg"} hierarchy={"secondary"} display={"block"}>
                     {runtime?.name}
                 </Text>
                 <Text size={"sm"} hierarchy={"tertiary"} display={"block"}>
                     {runtime?.description}
                 </Text>
             </Flex>
+        )}
         <Flex align={"center"} style={{gap: "1.3rem"}}>
             <Flex align={"center"} style={{gap: "0.35rem", flexWrap: "wrap"}}>
                 {runtime?.status === "CONNECTED" ? (
@@ -43,7 +55,7 @@ export const DRuntimeContent: React.FC<DRuntimeContentProps> = (props) => {
                     <Badge color={"error"}>DISCONNECTED</Badge>
                 )}
             </Flex>
-            {runtime?.userAbilities?.deleteRuntime || runtime?.userAbilities?.updateRuntime || runtime?.userAbilities?.rotateRuntimeToken ? (
+            {!minimized && (runtime?.userAbilities?.deleteRuntime || runtime?.userAbilities?.updateRuntime || runtime?.userAbilities?.rotateRuntimeToken) ? (
                 <Button color={"secondary"} onClick={(event) => {
                     event.stopPropagation()
                     onSetting(runtime)

src/components/d-runtime/DRuntimeList.tsx

@@ -12,22 +12,23 @@ export interface DRuntimeListProps extends Omit<Card, "children" | "onSelect"> {
     filter?: (runtime: DRuntimeView, index: number) => boolean
     onSelect?: (runtime: DRuntimeView) => void
     onSetting?: (runtime: DRuntimeView) => void
+    minimized?: boolean
 }
 
 export const DRuntimeList: React.FC<DRuntimeListProps> = (props) => {
 
-    const {namespaceId, filter = () => true, onSetting, onSelect, ...rest} = props
+    const {namespaceId, minimized = false, filter = () => true, onSetting, onSelect, ...rest} = props
 
     const runtimeService = useService(DRuntimeReactiveService)
     const runtimeStore = useStore(DRuntimeReactiveService)
     const runtimes = React.useMemo(() => runtimeService.values({namespaceId: namespaceId}), [runtimeStore, namespaceId])
 
-    return <Card {...rest}>
+    return <Card {...rest} {...(minimized ? {paddingSize: "sm"} : {})}>
         {runtimes.filter(filter).map((runtime) => runtime.id && (
             <CardSection border hover onClick={() => {
                 if (onSelect) onSelect(runtime)
             }} key={runtime.id}>
-                <DRuntimeContent onSetting={onSetting} runtimeId={runtime?.id}/>
+                <DRuntimeContent minimized={minimized} onSetting={onSetting} runtimeId={runtime?.id}/>
             </CardSection>
         ))}
     </Card>