feat: update app cards to list in new item modal (#844)

* feat: update app cards to list in new item modal * ci: increase max old space size
graasp · Oct 24, 2023 · 740d567 · 740d567
1 parent 7baf7b8
commit 740d567
Show file tree

Hide file tree

Showing 5 changed files with 99 additions and 48 deletions.
diff --git a/.github/workflows/cypress.yml b/.github/workflows/cypress.yml
@@ -33,7 +33,7 @@ jobs:
         run: tsc --noEmit
 
       - name: Build App
-        run: NODE_OPTIONS=--max-old-space-size=3072 yarn build:test
+        run: NODE_OPTIONS=--max-old-space-size=4096 yarn build:test
         shell: bash
         env:
           VITE_PORT: ${{ vars.VITE_PORT }}

diff --git a/src/components/item/form/AppForm.tsx b/src/components/item/form/AppForm.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { ChangeEventHandler, useState } from 'react';
 
 import { ArrowBack } from '@mui/icons-material';
 import { Alert, Stack, TextField } from '@mui/material';
@@ -14,27 +14,38 @@ import { CUSTOM_APP_URL_ID } from '@/config/selectors';
 import { useBuilderTranslation } from '../../../config/i18n';
 import { hooks } from '../../../config/queryClient';
 import { BUILDER } from '../../../langs/constants';
+import addNewImage from '../../../resources/addNew.png';
 import { buildAppExtra } from '../../../utils/itemExtra';
 import NameForm from './NameForm';
 
 type AppGridProps = {
   currentUrl: string;
   handleSelection: (value: null | { name: string; url: string }) => void;
+  searchQuery?: string;
 };
 
 const AppGrid = ({
   currentUrl,
   handleSelection,
+  searchQuery,
 }: AppGridProps): JSX.Element | JSX.Element[] => {
   const { useApps } = hooks;
   const { data, isLoading } = useApps();
 
   const { t: translateBuilder } = useBuilderTranslation();
 
   if (data) {
+    // filter out with search query
+    let dataToShow = searchQuery
+      ? data.filter((d) =>
+          d.name.toLowerCase().includes(searchQuery.toLowerCase()),
+        )
+      : data;
+    dataToShow = dataToShow.sortBy((d) => d.name);
+
     return (
       <>
-        {data.map((ele) => (
+        {dataToShow.map((ele) => (
           <AppCard
             key={ele.name}
             name={ele.name}
@@ -77,6 +88,14 @@ const AppForm = ({ onChange, updatedProperties = {} }: Props): JSX.Element => {
   const { t: translateBuilder } = useBuilderTranslation();
   const [isCustomApp, setIsCustomApp] = useState<boolean>(false);
 
+  const [searchQuery, setSearchQuery] = useState<string>('');
+
+  const searchAnApp: ChangeEventHandler<
+    HTMLInputElement | HTMLTextAreaElement
+  > = (e) => {
+    setSearchQuery(e.target.value);
+  };
+
   const handleAppSelection = (
     newValue: null | { url: string; name: string },
   ) => {
@@ -147,19 +166,36 @@ const AppForm = ({ onChange, updatedProperties = {} }: Props): JSX.Element => {
           />
         </Stack>
       ) : (
-        <Grid2 container spacing={2} alignItems="stretch" overflow="scroll">
-          <AppGrid
-            currentUrl={currentUrl}
-            handleSelection={handleAppSelection}
-          />
-          <AppCard
-            name={translateBuilder(BUILDER.CREATE_CUSTOM_APP)}
-            description={translateBuilder(
-              BUILDER.CREATE_CUSTOM_APP_DESCRIPTION,
-            )}
-            onClick={addCustomApp}
+        <>
+          <TextField
+            fullWidth
+            placeholder={translateBuilder('Search for an app')}
+            variant="outlined"
+            size="small"
+            onChange={searchAnApp}
           />
-        </Grid2>
+          <Grid2
+            container
+            spacing={2}
+            maxHeight={400}
+            alignItems="stretch"
+            overflow="auto"
+          >
+            <AppGrid
+              currentUrl={currentUrl}
+              handleSelection={handleAppSelection}
+              searchQuery={searchQuery}
+            />
+            <AppCard
+              name={translateBuilder(BUILDER.CREATE_CUSTOM_APP)}
+              description={translateBuilder(
+                BUILDER.CREATE_CUSTOM_APP_DESCRIPTION,
+              )}
+              image={addNewImage}
+              onClick={addCustomApp}
+            />
+          </Grid2>
+        </>
       )}
       <NameForm setChanges={onChange} updatedProperties={updatedProperties} />
     </Stack>

diff --git a/src/components/item/form/NameForm.tsx b/src/components/item/form/NameForm.tsx
@@ -24,8 +24,6 @@ const NameForm = ({
   const handleNameInput = (event: ChangeEvent<{ value: string }>) => {
     setChanges({ name: event.target.value });
   };
-  // eslint-disable-next-line no-console
-  console.log('name input', updatedProperties?.name ?? item?.name);
 
   return (
     <TextField

diff --git a/src/components/main/AppCard.tsx b/src/components/main/AppCard.tsx
@@ -1,8 +1,8 @@
 import {
+  Box,
   Card,
   CardActionArea,
   CardContent,
-  CardMedia,
   Skeleton,
   Typography,
   styled,
@@ -11,6 +11,8 @@ import Grid2 from '@mui/material/Unstable_Grid2';
 
 import { buildItemFormAppOptionId } from '@/config/selectors';
 
+import defaultImage from '../../resources/defaultApp.png';
+
 const StyledCardActionArea = styled(CardActionArea)({
   display: 'flex',
   flexDirection: 'column',
@@ -20,13 +22,6 @@ const StyledCardActionArea = styled(CardActionArea)({
   width: '100%',
 });
 
-const StyledAppBackground = styled(CardMedia)({
-  height: 100,
-  width: '100%',
-  backgroundColor: '#5050d2',
-  backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 28' width='56' height='28'%3E%3Cpath fill='%239cc4d7' fill-opacity='0.28' d='M56 26v2h-7.75c2.3-1.27 4.94-2 7.75-2zm-26 2a2 2 0 1 0-4 0h-4.09A25.98 25.98 0 0 0 0 16v-2c.67 0 1.34.02 2 .07V14a2 2 0 0 0-2-2v-2a4 4 0 0 1 3.98 3.6 28.09 28.09 0 0 1 2.8-3.86A8 8 0 0 0 0 6V4a9.99 9.99 0 0 1 8.17 4.23c.94-.95 1.96-1.83 3.03-2.63A13.98 13.98 0 0 0 0 0h7.75c2 1.1 3.73 2.63 5.1 4.45 1.12-.72 2.3-1.37 3.53-1.93A20.1 20.1 0 0 0 14.28 0h2.7c.45.56.88 1.14 1.29 1.74 1.3-.48 2.63-.87 4-1.15-.11-.2-.23-.4-.36-.59H26v.07a28.4 28.4 0 0 1 4 0V0h4.09l-.37.59c1.38.28 2.72.67 4.01 1.15.4-.6.84-1.18 1.3-1.74h2.69a20.1 20.1 0 0 0-2.1 2.52c1.23.56 2.41 1.2 3.54 1.93A16.08 16.08 0 0 1 48.25 0H56c-4.58 0-8.65 2.2-11.2 5.6 1.07.8 2.09 1.68 3.03 2.63A9.99 9.99 0 0 1 56 4v2a8 8 0 0 0-6.77 3.74c1.03 1.2 1.97 2.5 2.79 3.86A4 4 0 0 1 56 10v2a2 2 0 0 0-2 2.07 28.4 28.4 0 0 1 2-.07v2c-9.2 0-17.3 4.78-21.91 12H30zM7.75 28H0v-2c2.81 0 5.46.73 7.75 2zM56 20v2c-5.6 0-10.65 2.3-14.28 6h-2.7c4.04-4.89 10.15-8 16.98-8zm-39.03 8h-2.69C10.65 24.3 5.6 22 0 22v-2c6.83 0 12.94 3.11 16.97 8zm15.01-.4a28.09 28.09 0 0 1 2.8-3.86 8 8 0 0 0-13.55 0c1.03 1.2 1.97 2.5 2.79 3.86a4 4 0 0 1 7.96 0zm14.29-11.86c1.3-.48 2.63-.87 4-1.15a25.99 25.99 0 0 0-44.55 0c1.38.28 2.72.67 4.01 1.15a21.98 21.98 0 0 1 36.54 0zm-5.43 2.71c1.13-.72 2.3-1.37 3.54-1.93a19.98 19.98 0 0 0-32.76 0c1.23.56 2.41 1.2 3.54 1.93a15.98 15.98 0 0 1 25.68 0zm-4.67 3.78c.94-.95 1.96-1.83 3.03-2.63a13.98 13.98 0 0 0-22.4 0c1.07.8 2.09 1.68 3.03 2.63a9.99 9.99 0 0 1 16.34 0z'%3E%3C/path%3E%3C/svg%3E")`,
-}) as typeof CardMedia;
-
 export type Props = {
   description?: string;
   name?: string;
@@ -51,33 +46,55 @@ const AppCard = ({
     id={buildItemFormAppOptionId(name)}
   >
     <StyledCardActionArea>
-      <StyledAppBackground
-        component={image ? 'img' : 'div'}
-        src={image}
-        alt={name}
-      />
-      <CardContent sx={{ width: '100%' }}>
-        <Typography gutterBottom variant="subtitle2" component="div">
-          {name ?? <Skeleton />}
-        </Typography>
-        <Typography
-          variant="body2"
-          color="text.secondary"
-          sx={{
-            display: '-webkit-box',
-            overflow: 'hidden',
-            WebkitBoxOrient: 'vertical',
-            WebkitLineClamp: 3,
-          }}
-        >
-          {description ?? <Skeleton height={45} />}
-        </Typography>
-      </CardContent>
+      <Grid2 container direction="row" alignItems="center" width="100%">
+        <Grid2 xs={2}>
+          <Box
+            sx={{
+              width: '100%',
+              heght: '100%',
+              background: 'white',
+            }}
+          >
+            <img src={image ?? defaultImage} alt={name} width="100%" />
+          </Box>
+        </Grid2>
+        <Grid2 xs={10}>
+          <CardContent
+            sx={{
+              pt: 1,
+              paddingBottom: '0 !important',
+              minWidth: 0,
+            }}
+          >
+            <Typography
+              fontWeight="bold"
+              gutterBottom
+              variant="body1"
+              component="div"
+              width="100%"
+              noWrap
+            >
+              {name ?? <Skeleton />}
+            </Typography>
+            <Typography
+              variant="body2"
+              color="text.secondary"
+              width="100%"
+              sx={{
+                display: { xs: 'none', sm: 'block', md: 'block' },
+              }}
+              noWrap
+            >
+              {description ?? <Skeleton height={20} />}
+            </Typography>
+          </CardContent>
+        </Grid2>
+      </Grid2>
     </StyledCardActionArea>
   </Card>
 );
 const AppCardWrapper = (props: Props): JSX.Element => (
-  <Grid2 xs={12} sm={6} md={4} display="flex">
+  <Grid2 xs={12} display="flex">
     <AppCard
       // eslint-disable-next-line react/jsx-props-no-spreading
       {...props}

diff --git a/src/resources/defaultApp.png b/src/resources/defaultApp.png