moved filter by field on top of the page

Signed-off-by: msivasubramaniaan <[email protected]>
redhat-developer · Nov 27, 2023 · bc58169 · bc58169
1 parent 0d6dfaa
commit bc58169
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 42 deletions.
diff --git a/src/webview/common/devfileListItem.tsx b/src/webview/common/devfileListItem.tsx
@@ -70,7 +70,7 @@ function DevfileListContent(props: DevfileListItemProps) {
             <Stack
                 direction="column"
                 spacing={1}
-                sx={{ flexShrink: '5', minWidth: '0', maxWidth: '35rem' }}
+                sx={{ flexShrink: '5', minWidth: '0', maxWidth: '45rem' }}
             >
                 <Stack direction="row" spacing={2} alignItems="center">
                     <Typography
@@ -93,23 +93,27 @@ function DevfileListContent(props: DevfileListItemProps) {
                 </Stack>
                 <Typography
                     variant="body2"
-                    sx={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}
+                    sx={{ whiteSpace: 'pre-wrap', textAlign:'justify' }}
                 >
                     {props.devfile.description}
                 </Typography>
                 <Stack direction="row" spacing={1}>
-                    <Chip
-                        size="small"
-                        label="Debug Support"
-                        icon={props.devfile.supportsDebug ? <Check /> : <Close />}
-                        color={props.devfile.supportsDebug ? 'success' : 'error'}
-                    />
-                    <Chip
-                        size="small"
-                        label="Deploy Support"
-                        icon={props.devfile.supportsDeploy ? <Check /> : <Close />}
-                        color={props.devfile.supportsDeploy ? 'success' : 'error'}
-                    />
+                    {
+                        props.devfile.supportsDebug && <Chip
+                            size="small"
+                            label="Debug Support"
+                            icon={<Check />}
+                            color={'success'}
+                        />
+                    }
+                    {
+                        props.devfile.supportsDeploy && <Chip
+                            size="small"
+                            label="Deploy Support"
+                            icon={<Check />}
+                            color={'success'}
+                        />
+                    }
                     {(props.devfile.tags && props.devfile.tags.map((tag, i) => {
                         if (i >= 4) {
                             return;

diff --git a/src/webview/common/devfileSearch.tsx b/src/webview/common/devfileSearch.tsx
@@ -654,46 +654,46 @@ export function DevfileSearch(props: DevfileSearchProps) {
     return (
         <>
             <Stack direction="column" height="100%" spacing={3}>
-                <Typography variant="h5">{props.titleText}</Typography>
+                <Stack direction="row" useFlexGap={true}>
+                    {(devfileCapabilities.length > 0 || devfileTags.length > 0) && (
+                        <Stack direction="row" useFlexGap={true} width="100%" spacing={5}>
+                            <Typography variant="body2" style={{width: '5%'}}>
+                                Filter by
+                            </Typography>
+                            <Stack direction="row" useFlexGap={true} width="100%" spacing={1}>
+                                {devfileCapabilities.length > 0 && (
+                                    <>
+                                        <RegistryCapabilitiesPicker
+                                            capabilityEnabled={capabilityEnabled}
+                                            setCapabilityEnabled={setCapabilityEnabled}
+                                        />
+                                    </>
+                                )}
+                                {devfileTags.length > 0 && (
+                                    <RegistryTagsPicker
+                                        tagEnabled={tagEnabled}
+                                        setTagEnabled={setTagEnabled}
+                                    />
+                                )}
+                            </Stack>
+                        </Stack>
+                    )}
+                </Stack>
                 <Stack direction="row" spacing={2}>
-                    <Stack direction="column" sx={{ height: 'calc(100vh - 200px - 5em)', overflow: 'scroll', maxWidth:'30%' }} spacing={0}>
+                    <Stack direction="column" sx={{ height: 'calc(100vh - 200px - 5em)', overflow: 'scroll', maxWidth: '30%' }} spacing={0}>
                         {devfileRegistries.length > 1 && (
                             <>
                                 <Typography variant="body2" marginBottom={1}>
                                     Devfile Registries
                                 </Typography>
-                                <Stack direction="column" sx={{width: '100%' }} width="100%" spacing={0} marginBottom={3}>
+                                <Stack direction="column" sx={{ width: '100%' }} width="100%" spacing={0} marginBottom={3}>
                                     <RegistriesPicker
                                         registryEnabled={registryEnabled}
                                         setRegistryEnabled={setRegistryEnabled}
                                     />
                                 </Stack>
                             </>
                         )}
-                        {(devfileCapabilities.length > 0 || devfileTags.length > 0) && (
-                            <>
-                                <Typography variant="body2" marginBottom={2}>
-                                    Filter by
-                                </Typography>
-                                <Stack direction="column"  useFlexGap={true} width="100%" spacing={1}>
-                                    {devfileCapabilities.length > 0 && (
-                                        <>
-                                            <RegistryCapabilitiesPicker
-                                                capabilityEnabled={capabilityEnabled}
-                                                setCapabilityEnabled={setCapabilityEnabled}
-                                            />
-                                            <Divider orientation="horizontal" sx={{width: '100%' }} />
-                                        </>
-                                    )}
-                                    {devfileTags.length > 0 && (
-                                        <RegistryTagsPicker
-                                            tagEnabled={tagEnabled}
-                                            setTagEnabled={setTagEnabled}
-                                        />
-                                    )}
-                                </Stack>
-                            </>
-                        )}
                         <Stack direction="column" sx={{ flexGrow: '1', height: '100%', width: '100%' }} spacing={0}>
                         </Stack>
                     </Stack>

diff --git a/src/webview/devfile-registry/app/devfileRegistry.tsx b/src/webview/devfile-registry/app/devfileRegistry.tsx
@@ -36,7 +36,7 @@ export const DevfileRegistry = () => {
 
     return (
         <ThemeProvider theme={theme}>
-            <Container maxWidth='lg' sx={{ height: '100%', paddingTop: '5em', paddingBottom: '16px'}}>
+            <Container maxWidth='lg' sx={{ height: '100%', paddingTop: '1em', paddingBottom: '16px'}}>
                 <FromTemplateProject titleText='Devfile Registry' />
             </Container>
         </ThemeProvider>