Skip to content

Commit f8775c5

Browse files
msivasubramaniaanmsivasubramaniaan
committed
fixed tag unselect issue and moved devfile selection on top
Signed-off-by: msivasubramaniaan <msivasub@redhat.com>
1 parent eedcd3a commit f8775c5

File tree

2 files changed

+113
-100
lines changed

2 files changed

+113
-100
lines changed

‎src/webview/common-ext/createComponentHelpers.ts‎

Lines changed: 2 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -253,7 +253,7 @@ export function getDevfileRegistries(): DevfileRegistry[] {
253253
* @returns a list of the devfile capabilities
254254
*/
255255
export function getDevfileCapabilities(): string[] {
256-
return ['Debug Support', 'Deploy Support'];
256+
return ['Debug', 'Deploy'];
257257
}
258258

259259
/**
@@ -268,27 +268,8 @@ export function getDevfileTags(url?: string): string[] {
268268
...new Set(
269269
devfileRegistries
270270
.filter((devfileRegistry) => url ? devfileRegistry.url === url : true)
271-
.flatMap((_devfileRegistry) => _devfileRegistry.devfiles).sort(devfileSort)
271+
.flatMap((_devfileRegistry) => _devfileRegistry.devfiles)
272272
.flatMap((_devfile) => _devfile.tags))
273273
]
274274
return devfileTags.filter((devfileTag) => !devfileTag.toLowerCase().includes('deprecate'));
275275
}
276-
277-
function devfileSort(a: Devfile, b: Devfile): number {
278-
const QUARKUS_REGEX = /[Qq]uarkus/;
279-
const aQuarkus = QUARKUS_REGEX.test(a.name);
280-
const bQuarkus = QUARKUS_REGEX.test(b.name);
281-
if (aQuarkus && !bQuarkus) {
282-
return -1;
283-
} else if (bQuarkus && !aQuarkus) {
284-
return 1;
285-
}
286-
287-
if (a.supportsDebug && !b.supportsDebug) {
288-
return -1;
289-
} else if (b.supportsDebug && !a.supportsDebug) {
290-
return 1;
291-
}
292-
293-
return a.name < b.name ? -1 : 1;
294-
}

‎src/webview/common/devfileSearch.tsx‎

Lines changed: 111 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,8 @@ type Message = {
5252
data: any;
5353
};
5454

55+
const QUARKUS_REGEX = /[Qq]uarkus/;
56+
5557
function LinkButton(props: { href: string; disabled: boolean; onClick: () => void; children }) {
5658
return (
5759
<Link href={props.disabled ? undefined : props.href} underline="none">
@@ -89,8 +91,8 @@ function SearchBar(props: {
8991
margin='normal'
9092
InputProps={{
9193
startAdornment: (
92-
<InputAdornment position="start" sx={{marginTop: '0px !important'}}>
93-
<Search color="textSecondary" fontSize='small' />
94+
<InputAdornment position="start" sx={{ marginTop: '0px !important' }}>
95+
<Search color="textSecondary" fontSize='small' />
9496
</InputAdornment>
9597
),
9698
endAdornment: (
@@ -180,14 +182,33 @@ function RegistriesPicker(props: {
180182
* @returns number
181183
*/
182184
function ascTag(oldTag: { name: string; enabled: boolean }, newTag: { name: string; enabled: boolean }) {
183-
const oldTagEnabled = oldTag.enabled;
184-
const newTagEnabled = newTag.enabled;
185-
if (oldTagEnabled && !newTagEnabled) {
185+
186+
//Priority order Quarkus, Java, Node.js and Python
187+
const javaPriorites = ['Java', 'Maven'];
188+
const nodeJsPriorities = ['Node.js', 'Next.js', 'Express'];
189+
const pythonPriorities = ['Python', 'Django', 'Pip'];
190+
191+
const aQuarkus = QUARKUS_REGEX.test(oldTag.name);
192+
const bQuarkus = QUARKUS_REGEX.test(newTag.name);
193+
194+
if (aQuarkus && !bQuarkus) {
195+
return -1;
196+
} else if (bQuarkus && !aQuarkus) {
197+
return 1;
198+
} else if (javaPriorites.includes(oldTag.name) && !javaPriorites.includes(newTag.name)) {
199+
return -1;
200+
} else if (!javaPriorites.includes(oldTag.name) && javaPriorites.includes(newTag.name)) {
201+
return 1;
202+
} else if (nodeJsPriorities.includes(oldTag.name) && !nodeJsPriorities.includes(newTag.name)) {
203+
return -1;
204+
} else if (!nodeJsPriorities.includes(oldTag.name) && nodeJsPriorities.includes(newTag.name)) {
205+
return 1;
206+
} else if (pythonPriorities.includes(oldTag.name) && !pythonPriorities.includes(newTag.name)) {
186207
return -1;
187-
} else if (newTagEnabled && !oldTagEnabled) {
208+
} else if (!pythonPriorities.includes(oldTag.name) && pythonPriorities.includes(newTag.name)) {
188209
return 1;
189210
}
190-
return 0;
211+
return oldTag.name.localeCompare(newTag.name);
191212
}
192213

193214
function TagsPicker(props: {
@@ -310,7 +331,7 @@ const SelectTemplateProject = React.forwardRef(
310331
>
311332
<DevfileListItem devfile={props.devfile} showFullDescription />
312333
<IconButton onClick={props.closeModal}>
313-
<Close color="textSecondary" fontSize='small'/>
334+
<Close color="textSecondary" fontSize='small' />
314335
</IconButton>
315336
</Stack>
316337
<FormControl fullWidth>
@@ -481,7 +502,6 @@ function isToBeIncluded(devfile: Devfile, tagFilter: string[], debugSupportFilte
481502

482503
export function DevfileSearch(props: DevfileSearchProps) {
483504
const ITEMS_PER_PAGE = 12;
484-
const QUARKUS_REGEX = /[Qq]uarkus/;
485505

486506
const [selectedDevfile, setSelectedDevfile] = React.useState<Devfile>();
487507
const [currentPage, setCurrentPage] = React.useState(1);
@@ -552,7 +572,7 @@ export function DevfileSearch(props: DevfileSearchProps) {
552572
enabled: false // All values set to false means that no filter is to be applied
553573
});
554574
}
555-
setTagEnabled((_) => enabledArray);
575+
setTagEnabled((_) => enabledArray.sort(ascTag));
556576
}
557577

558578
React.useEffect(() => clearDevfileAll(), [devfileTags]);
@@ -601,12 +621,12 @@ export function DevfileSearch(props: DevfileSearchProps) {
601621
.map((entry) => entry.registryName);
602622

603623
const debugSupport = capabilityEnabled //
604-
.filter((_cap) => _cap.name === 'Debug Support') //
624+
.filter((_cap) => _cap.name === 'Debug') //
605625
.filter((_cap) => _cap.enabled) //
606626
.length > 0;
607627

608628
const deploySupport = capabilityEnabled //
609-
.filter((_cap) => _cap.name === 'Deploy Support') //
629+
.filter((_cap) => _cap.name === 'Deploy') //
610630
.filter((_cap) => _cap.enabled) //
611631
.length > 0;
612632

@@ -655,87 +675,99 @@ export function DevfileSearch(props: DevfileSearchProps) {
655675
height: 'calc(100vh - 100px)',
656676
overflow: 'scroll'
657677
}} spacing={0}>
658-
{(devfileCapabilities.length > 0 || devfileTags.length > 0) && (
659-
<>
678+
<Typography variant="body2" marginBottom={1}>
679+
Filter by
680+
</Typography>
681+
682+
{
683+
devfileRegistries.length > 1 && (
684+
<>
685+
<Typography variant="body2" marginTop={1} marginBottom={1}>
686+
Devfile Registries
687+
</Typography>
688+
<RegistriesPicker
689+
registryEnabled={registryEnabled}
690+
setRegistryEnabled={setRegistryEnabled}
691+
/>
692+
<Divider orientation="horizontal" sx={{ width: '100%' }} />
693+
</>
694+
)
695+
}
696+
697+
{
698+
devfileCapabilities.length > 0 && (
660699
<Stack direction="column" spacing={0}>
661-
<Typography variant="body2" marginBottom={1}>
662-
Filter by
700+
<Typography variant="body2" marginBottom={1} marginTop={1}>
701+
Support
663702
</Typography>
664703
<Stack direction="column" useFlexGap={true} width="100%" spacing={1}>
665-
{devfileCapabilities.length > 0 && (
666-
<>
667-
<TagsPicker
668-
tagEnabled={capabilityEnabled}
669-
setTagEnabled={setCapabilityEnabled} />
670-
<Divider orientation="horizontal" sx={{ width: '100%' }} />
671-
</>
672-
)}
704+
{
705+
devfileCapabilities.length > 0 && (
706+
<>
707+
<TagsPicker
708+
tagEnabled={capabilityEnabled}
709+
setTagEnabled={setCapabilityEnabled} />
710+
<Divider orientation="horizontal" sx={{ width: '100%' }} />
711+
</>
712+
)
713+
}
673714
</Stack>
674715
</Stack>
675-
{devfileTags.length > 0 && (
676-
<>
677-
<Stack id='tags' direction="column" sx={{
678-
height: !showMore ? 'calc(250vh - 100px)' : 'calc(300vh - 150px)',
679-
overflow: !showMore ? 'hidden' : 'scroll'
680-
}} spacing={0}>
681-
<Typography variant="body2" marginTop={1} marginBottom={1}>
682-
Tags
683-
</Typography>
684-
<TagsPicker
685-
tagEnabled={tagEnabled}
686-
setTagEnabled={setTagEnabled} />
687-
</Stack>
688-
<Stack direction='row' gap={2}>
716+
)
717+
}
718+
719+
{
720+
devfileTags.length > 0 && (
721+
<>
722+
<Stack id='tags' direction="column" sx={{
723+
height: !showMore ? '55vh' : 'calc(300vh - 150px)',
724+
overflow: !showMore ? 'hidden' : 'scroll'
725+
}} spacing={0}>
726+
<Typography variant="body2" marginTop={1} marginBottom={1}>
727+
Tags
728+
</Typography>
729+
<TagsPicker
730+
tagEnabled={tagEnabled}
731+
setTagEnabled={setTagEnabled} />
732+
</Stack>
733+
<Stack direction='row' gap={2}>
734+
<Typography variant="body2" marginTop={1} marginBottom={1}>
735+
<Link
736+
component="button"
737+
variant="body2"
738+
underline='none'
739+
sx={{ color: 'var(--vscode-button-foreground) !important' }}
740+
onClick={() => {
741+
setShowMore((prev) => !prev);
742+
if (showMore) {
743+
const myDiv = document.getElementById('tags');
744+
myDiv.scrollTop = 0;
745+
}
746+
}}
747+
>
748+
Show {!showMore ? 'more' : 'less'}
749+
</Link>
750+
</Typography>
751+
{
752+
activeTags.length > 0 &&
689753
<Typography variant="body2" marginTop={1} marginBottom={1}>
690754
<Link
691755
component="button"
756+
color='error'
692757
variant="body2"
693758
underline='none'
694-
sx={{color: 'var(--vscode-button-foreground) !important'}}
695759
onClick={() => {
696-
setShowMore((prev) => !prev);
697-
if (showMore) {
698-
const myDiv = document.getElementById('tags');
699-
myDiv.scrollTop = 0;
700-
}
760+
clearDevfileAll()
701761
}}
702762
>
703-
Show {!showMore ? 'more' : 'less'}
763+
Clear {activeTags.length > 1 ? 'all' : ''}
704764
</Link>
705765
</Typography>
706-
{
707-
activeTags.length > 0 &&
708-
<Typography variant="body2" marginTop={1} marginBottom={1}>
709-
<Link
710-
component="button"
711-
color='error'
712-
variant="body2"
713-
underline='none'
714-
onClick={() => {
715-
clearDevfileAll()
716-
}}
717-
>
718-
Clear {activeTags.length > 1 ? 'all' : ''}
719-
</Link>
720-
</Typography>
721-
}
722-
</Stack>
723-
</>
724-
)}
725-
</>
726-
)}
727-
{devfileRegistries.length > 1 && (
728-
<>
729-
<Divider orientation="horizontal" sx={{ width: '100%' }} />
730-
<Typography variant="body2" marginTop={1} marginBottom={1}>
731-
Devfile Registries
732-
</Typography>
733-
<RegistriesPicker
734-
registryEnabled={registryEnabled}
735-
setRegistryEnabled={setRegistryEnabled}
736-
/>
737-
</>
738-
)}
766+
}
767+
</Stack>
768+
</>
769+
)
770+
}
739771
</Stack>
740772

741773
<Divider orientation="vertical" sx={{ height: 'calc(100vh - 80px)' }} />
@@ -817,7 +849,7 @@ export function DevfileSearch(props: DevfileSearchProps) {
817849
closeModal={() => {
818850
setSelectedDevfile((_) => undefined);
819851
}}
820-
theme = {props.theme}
852+
theme={props.theme}
821853
/>
822854
</Modal>
823855
</>

0 commit comments

Comments
 (0)
⚡