fix: projects dropdown and collection starred on edition (#3070)

Signed-off-by: Joana Maia <jmaia@contractor.linuxfoundation.org>

Author: joanagmaia

frontend/src/modules/admin/modules/collections/components/lf-collection-add-dropdown.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <lf-dropdown placement="bottom-end" :z-index="2090" width="14rem">
+    <lf-dropdown placement="bottom-end" :z-index="2300" width="14rem">
       <template #trigger>
         <lf-button type="secondary-ghost" icon-only>
           <lf-icon name="ellipsis" :size="24" class="text-gray-900" />

frontend/src/modules/admin/modules/collections/components/lf-collection-add.vue

@@ -186,6 +186,7 @@ const form = reactive<CollectionFormModel>({
   type: '',
   categoryId: null,
   projects: [],
+  starred: false,
 });
 
 const rules = {
@@ -245,7 +246,7 @@ const onSubmit = () => {
       id: project.id,
       starred: project?.starred || false,
     })),
-    starred: false,
+    starred: !!form.starred,
     categoryId: form.categoryId,
     slug: form.name.toLowerCase().replace(/ /g, '-'),
   };

frontend/src/modules/admin/modules/collections/models/collection.model.ts

@@ -29,4 +29,5 @@ export interface CollectionFormModel {
   type: string | null;
   categoryId: string | null;
   projects: InsightsProjectModel[];
+  starred: boolean;
 }

frontend/src/ui-kit/dropdown/Dropdown.vue

@@ -1,13 +1,18 @@
 <template>
-  <lf-popover :placement="props.placement" :persistent="props.persistent" :is-dropdown="true">
+  <lf-popover
+    :placement="props.placement"
+    :persistent="props.persistent"
+    :is-dropdown="true"
+    :z-index="props.zIndex"
+  >
     <template #trigger>
       <slot name="trigger" />
     </template>
     <template #default="{ close }">
       <div
         v-click-outside="close"
         class="c-dropdown"
-        :style="{ 'min-width': props.width, zIndex: props.zIndex }"
+        :style="{ 'min-width': props.width }"
         @click="close"
       >
         <slot />

frontend/src/ui-kit/popover/Popover.vue

@@ -38,6 +38,7 @@ const props = withDefaults(defineProps<{
   triggerEvent?: PopoverTrigger,
   persistent?: boolean;
   isDropdown?: boolean;
+  zIndex?: number | string;
 }>(), {
   placement: 'bottom-start',
   disabled: false,
@@ -46,6 +47,7 @@ const props = withDefaults(defineProps<{
   triggerEvent: 'click',
   persistent: false,
   isDropdown: false,
+  zIndex: 'auto',
 });
 
 const emit = defineEmits<{(e: 'update:visibility', value: boolean): void }>();
@@ -110,6 +112,7 @@ const popoverStyle = computed(() => {
     '--lf-popover-content-width': `${popover.value.offsetWidth / 16}rem`,
     '--lf-popover-content-height': `${popover.value.offsetHeight / 16}rem`,
     '--lf-popover-spacing': `${props.spacing / 16}rem`,
+    'z-index': props.zIndex,
   };
 });