fix: List component improvements

assets/src/components/account/groups/GroupMember.tsx

@@ -8,7 +8,7 @@ import UserInfo from '../../utils/UserInfo'
 import { DELETE_GROUP_MEMBER, GROUP_MEMBERS } from './queries'
 
 export default function GroupMember({
-  user, group, first, last, edit,
+  user, group, last, edit,
 }: any) {
   const [mutation] = useMutation(DELETE_GROUP_MEMBER, {
     variables: { groupId: group.id, userId: user.id },
@@ -19,7 +19,6 @@ export default function GroupMember({
     <ListItem
       flex={false}
       background="fill-two"
-      first={first}
       last={last}
       title=""
     >

assets/src/components/account/groups/GroupMembers.tsx

@@ -49,12 +49,11 @@ export default function GroupMembers({ group, edit = false }: any) {
             />
           )}
           hasNextPage={pageInfo.hasNextPage}
-          mapper={({ node }, { prev, next }) => (
+          mapper={({ node }, { next }) => (
             <GroupMember
               key={node.user.id}
               user={node.user}
               group={group}
-              first={!prev.node}
               last={!next.node}
               edit={edit}
             />

assets/src/components/account/groups/GroupsList.tsx

@@ -33,11 +33,8 @@ export function GroupsList({ q }: any) {
           listRef={listRef}
           setListRef={setListRef}
           items={edges}
-          mapper={({ node: group }, { prev, next }) => (
-            <ListItem
-              first={!prev.node}
-              last={!next.node}
-            >
+          mapper={({ node: group }, { next }) => (
+            <ListItem last={!next.node}>
               <Group
                 group={group}
                 q={q}

assets/src/components/account/roles/RolePermissionToggle.tsx

@@ -1,9 +1,4 @@
-import {
-  Div,
-  Flex,
-  P,
-  Switch,
-} from 'honorable'
+import { Flex, P, Switch } from 'honorable'
 import { useCallback } from 'react'
 
 export default function RolePermissionToggle({
@@ -35,7 +30,7 @@ export default function RolePermissionToggle({
       justify="space-between"
       paddingVertical="small"
     >
-      <Div>
+      <div>
         <P
           body2
           fontWeight={600}
@@ -49,7 +44,7 @@ export default function RolePermissionToggle({
         >
           {description}
         </P>
-      </Div>
+      </div>
       <Switch
         checked={!!attributes.permissions.find(perm => perm === permission)}
         onChange={({ target: { checked } }) => toggle(checked)}

assets/src/components/account/roles/RolesList.tsx

@@ -34,11 +34,8 @@ export default function RolesList({ q }: any) {
           listRef={listRef}
           setListRef={setListRef}
           items={edges}
-          mapper={({ node: role }, { prev, next }) => (
-            <ListItem
-              first={!prev.node}
-              last={!next.node}
-            >
+          mapper={({ node: role }, { next }) => (
+            <ListItem last={!next.node}>
               <Role
                 role={role}
                 q={q}

assets/src/components/account/users/UserInvite.tsx

@@ -1,4 +1,4 @@
-import { Button, Div, Span } from 'honorable'
+import { Button } from 'honorable'
 import {
   Codeline,
   MailIcon,
@@ -34,14 +34,14 @@ export default function UserInvite() {
 
   return (
     <>
-      <Div>
+      <div>
         <Button
           secondary
           onClick={() => setOpen(true)}
         >
           Invite user
         </Button>
-      </Div>
+      </div>
       <Modal
         header="Invite users"
         open={open}
@@ -82,7 +82,7 @@ export default function UserInvite() {
           />
         )}
         {invite?.secureId && <Codeline marginTop="small">{inviteLink(invite)}</Codeline>}
-        {invite && !invite.secureId && <Span>An email was sent to {email} to accept the invite</Span>}
+        {invite && !invite.secureId && <span>An email was sent to {email} to accept the invite</span>}
       </Modal>
     </>
   )

assets/src/components/account/users/UsersList.tsx

@@ -1,11 +1,7 @@
 import { useQuery } from '@apollo/client'
-
 import { Div } from 'honorable'
-
 import { EmptyState, LoopingLogo, SearchIcon } from '@pluralsh/design-system'
-
 import { useContext, useEffect, useState } from 'react'
-
 import { StandardScroller } from 'components/utils/SmoothScroller'
 import { isEmpty } from 'lodash'
 import { LoginContext } from 'components/contexts'
@@ -52,14 +48,9 @@ export default function UsersList() {
             listRef={listRef}
             setListRef={setListRef}
             items={edges}
-            mapper={({ node: user }, { prev, next }) => (
-              <ListItem
-                first={!prev.node}
-                last={!next.node}
-              >
-                <User
-                  user={user}
-                />
+            mapper={({ node: user }, { next }) => (
+              <ListItem last={!next.node}>
+                <User user={user} />
               </ListItem>
             )}
             loadNextPage={() => pageInfo.hasNextPage && fetchMore({

assets/src/components/apps/Apps.tsx

@@ -111,11 +111,11 @@ function PendingFailedEmptyState({ filter }) {
       description={
         (
           <>
-            <Div>
+            <div>
               There are no{' '}
               {FILTERS.find(f => f.key === filter)?.label.toLowerCase()} apps.
-            </Div>
-            <Div>
+            </div>
+            <div>
               You may be ready to become an&nbsp;
               <A
                 inline
@@ -126,7 +126,7 @@ function PendingFailedEmptyState({ filter }) {
                 open-sourcerer
               </A>
               .
-            </Div>
+            </div>
           </>
         ) as any // Workaround as JSX elements are not allowed here.
       }

assets/src/components/apps/app/components/component/info/CronJob.tsx

@@ -28,15 +28,15 @@ const columns = (namespace, refetch) => [
       const status = props.getValue()
 
       return (
-        <Div>
-          <Div>{status?.startTime}</Div>
+        <div>
+          <div>{status?.startTime}</div>
           <Div
             caption
             color="text-xlight"
           >
             {status.completionTime}
           </Div>
-        </Div>
+        </div>
       )
     },
     header: 'Start / Completion time',

assets/src/components/apps/app/components/component/info/Service.tsx

@@ -1,11 +1,6 @@
 import { Card } from '@pluralsh/design-system'
 import PropWide from 'components/utils/PropWide'
-import {
-  Flex,
-  H2,
-  H3,
-  Span,
-} from 'honorable'
+import { Flex, H2, H3 } from 'honorable'
 import isEmpty from 'lodash/isEmpty'
 import { useOutletContext } from 'react-router-dom'
 
@@ -76,8 +71,8 @@ export default function Service() {
                 fontWeight={600}
                 title={name || '-'}
               >
-                <Span>{protocol}</Span>
-                <Span>{port} {'->'} {targetPort}</Span>
+                <span>{protocol}</span>
+                <span>{port} {'->'} {targetPort}</span>
               </PropWide>
             ))}
           </>

assets/src/components/apps/app/dashboards/Dashboards.tsx

@@ -4,13 +4,14 @@ import { useContext, useEffect } from 'react'
 import { useQuery } from '@apollo/client'
 import { DASHBOARDS_Q } from 'components/graphql/dashboards'
 
-import { A, Div, Flex } from 'honorable'
+import { A, Flex } from 'honorable'
 
 import { useNavigate, useParams } from 'react-router-dom'
 
-import { ListItem } from 'components/apps/misc'
 import { ScrollablePage } from 'components/utils/layout/ScrollablePage'
 
+import { ListItem } from '../misc'
+
 export default function Dashboards() {
   const navigate = useNavigate()
   const { appName } = useParams()
@@ -49,7 +50,7 @@ export default function Dashboards() {
             icon={<DashboardIcon size={64} />}
             message="No dashboards available"
             description={(
-              <Div>
+              <div>
                 If you're interested in adding your dashboards to this
                 application,&nbsp;
                 <A
@@ -61,7 +62,7 @@ export default function Dashboards() {
                   visit our docs
                 </A>
                 &nbsp;for more details.
-              </Div> as any // Workaround as JSX elements are not allowed here.
+              </div> as any // Workaround as JSX elements are not allowed here.
             )}
           />
         </Flex>

assets/src/components/apps/app/dashboards/dashboard/Dashboard.tsx

@@ -16,7 +16,7 @@ import {
 import { useNavigate, useOutletContext, useParams } from 'react-router-dom'
 import { useQuery } from '@apollo/client'
 import { DASHBOARDS_Q, DASHBOARD_Q } from 'components/graphql/dashboards'
-import { Div, Flex } from 'honorable'
+import { Flex } from 'honorable'
 
 import { DURATIONS } from 'utils/time'
 
@@ -88,7 +88,7 @@ export default function Dashboard() {
 
   return (
     <ScrollablePage heading={(
-      <Div>
+      <div>
         <Select
           aria-label="dashboards"
           selectedKey={selectedKey}
@@ -109,7 +109,7 @@ export default function Dashboard() {
             />
           ))}
         </Select>
-      </Div>
+      </div>
     )}
     >
       <Flex

assets/src/components/apps/app/logs/LogsLabels.tsx

@@ -1,5 +1,5 @@
 import { Chip, Tooltip } from '@pluralsh/design-system'
-import { Div, Flex, Span } from 'honorable'
+import { Flex, Span } from 'honorable'
 import { truncate } from 'lodash'
 
 const MAX_LENGTH = 20
@@ -11,7 +11,7 @@ function LogsLabelChip({ name, value, removeLabel }) {
       closeButton
       onClick={() => removeLabel(name)}
     >
-      <Span>{name}:</Span>
+      <span>{name}:</span>
       <Span fontWeight={400}>{truncate(value, { length: MAX_LENGTH })}</Span>
     </Chip>
   )
@@ -32,13 +32,13 @@ export default function LogsLabels({ labels, removeLabel }) {
         <>
           {value.length > MAX_LENGTH && (
             <Tooltip label={value}>
-              <Div>
+              <div>
                 <LogsLabelChip
                   name={name}
                   value={value}
                   removeLabel={removeLabel}
                 />
-              </Div>
+              </div>
             </Tooltip>
           )}
           {value.length <= MAX_LENGTH && (

assets/src/components/apps/app/misc.tsx

@@ -0,0 +1,77 @@
+import {
+  Card,
+  CardProps,
+  CaretRightIcon,
+  IconFrame,
+} from '@pluralsh/design-system'
+import styled from 'styled-components'
+
+import { ListItemBorder } from '../misc'
+
+const LeftContainer = styled.div(({ theme }) => ({
+  alignItems: 'center',
+  display: 'flex',
+  gap: theme.spacing.small,
+  padding: theme.spacing.medium,
+}))
+
+const TitleContainer = styled.div(({ theme }) => ({
+  alignItems: 'center',
+  display: 'flex',
+  flexGrow: 1,
+  gap: theme.spacing.small,
+}))
+
+const Title = styled.div(({ theme }) => ({
+  ...theme.partials.text.body1,
+  fontWeight: 600,
+}))
+
+const Description = styled.div(({ theme }) => ({
+  ...theme.partials.text.body2,
+  color: theme.colors['text-light'],
+}))
+
+const RightContainer = styled.div(({ theme }) => ({
+  display: 'flex',
+  flexGrow: 1,
+  justifyContent: 'end',
+  padding: theme.spacing.large,
+}))
+
+export function ListItem({
+  title, description, icon, borderColor, chips, onClick, ...props
+}: CardProps & {title: string, description?: string, icon?: any, borderColor?: string, chips?: any, onClick?: () => any},) {
+  return (
+    <Card
+      clickable
+      display="flex"
+      flexGrow={1}
+      marginBottom="small"
+      minWidth={240}
+      onClick={onClick}
+      {...props}
+    >
+      <ListItemBorder color={borderColor} />
+      <LeftContainer>
+        {icon && (
+          <IconFrame
+            icon={icon}
+            minWidth={40}
+            size="large"
+            textValue={title}
+            type="floating"
+          />
+        )}
+        <div>
+          <TitleContainer>
+            <Title>{title}</Title>
+            {chips}
+          </TitleContainer>
+          <Description>{description}</Description>
+        </div>
+      </LeftContainer>
+      <RightContainer><CaretRightIcon /></RightContainer>
+    </Card>
+  )
+}