fix bug and add label selector

Author: lunny

tests/integration/project_workflow_test.go

@@ -442,5 +442,5 @@ func TestProjectWorkflowPermissions(t *testing.T) {
 	session2 := loginUser(t, user2.Name)
 	req = NewRequest(t, "POST",
 		fmt.Sprintf("/%s/%s/projects/%d/workflows/%d/delete?_csrf=%s", user.Name, repo.Name, project.ID, workflow.ID, GetUserCSRFToken(t, session2)))
-	session2.MakeRequest(t, req, http.StatusForbidden)
+	session2.MakeRequest(t, req, http.StatusNotFound) // we use 404 to avoid leaking existence
 }

web_src/js/components/LabelSelector.vue

@@ -0,0 +1,174 @@
+<script lang="ts" setup>
+import {onMounted, useTemplateRef, computed, watch, nextTick} from 'vue';
+import {fomanticQuery} from '../modules/fomantic/base.ts';
+import {contrastColor} from '../utils/color.ts';
+
+interface Label {
+  id: number | string;
+  name: string;
+  color: string;
+  description?: string;
+}
+
+const props = withDefaults(defineProps<{
+  modelValue: string[];
+  labels: Label[];
+  placeholder?: string;
+  readonly?: boolean;
+  multiple?: boolean;
+}>(), {
+  placeholder: 'Select labels...',
+  readonly: false,
+  multiple: true,
+});
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string[]];
+}>();
+
+const elDropdown = useTemplateRef('elDropdown');
+
+// Get selected labels for display
+const selectedLabels = computed(() => {
+  return props.labels.filter((label) =>
+    props.modelValue.includes(String(label.id)),
+  );
+});
+
+// Get contrast color for label text
+const getLabelTextColor = (hexColor: string) => {
+  return contrastColor(hexColor);
+};
+
+// Toggle label selection
+const toggleLabel = (labelId: string) => {
+  if (props.readonly) return;
+
+  const currentValues = [...props.modelValue];
+  const index = currentValues.indexOf(labelId);
+
+  if (index > -1) {
+    currentValues.splice(index, 1);
+  } else {
+    if (props.multiple) {
+      currentValues.push(labelId);
+    } else {
+      // Single selection mode: replace with new selection
+      currentValues.length = 0;
+      currentValues.push(labelId);
+    }
+  }
+
+  emit('update:modelValue', currentValues);
+};
+
+// Check if a label is selected
+const isLabelSelected = (labelId: string) => {
+  return props.modelValue.includes(labelId);
+};
+
+// Initialize Fomantic UI dropdown
+const initDropdown = async () => {
+  if (props.readonly || !elDropdown.value) return;
+
+  await nextTick();
+  fomanticQuery(elDropdown.value).dropdown({
+    action: 'nothing', // Don't hide on selection for multiple selection
+    fullTextSearch: true,
+  });
+};
+
+// Watch for readonly changes to reinitialize
+watch(() => props.readonly, async (newVal) => {
+  if (!newVal) {
+    await initDropdown();
+  }
+});
+
+onMounted(async () => {
+  await initDropdown();
+});
+</script>
+
+<template>
+  <!-- Edit Mode: Dropdown -->
+  <div v-if="!readonly" ref="elDropdown" class="ui fluid multiple search selection dropdown label-dropdown">
+    <input type="hidden" :value="modelValue.join(',')">
+    <i class="dropdown icon"/>
+    <div class="text" :class="{ default: !modelValue.length }">
+      <span v-if="!modelValue.length">{{ placeholder }}</span>
+      <template v-else>
+        <span
+          v-for="labelId in modelValue"
+          :key="labelId"
+          class="ui label"
+          :style="`background-color: ${labels.find(l => String(l.id) === labelId)?.color}; color: ${getLabelTextColor(labels.find(l => String(l.id) === labelId)?.color)}`"
+        >
+          {{ labels.find(l => String(l.id) === labelId)?.name }}
+        </span>
+      </template>
+    </div>
+    <div class="menu">
+      <div
+        v-for="label in labels"
+        :key="label.id"
+        class="item"
+        :data-value="String(label.id)"
+        :class="{ active: isLabelSelected(String(label.id)), selected: isLabelSelected(String(label.id)) }"
+        @click.prevent="toggleLabel(String(label.id))"
+      >
+        <span
+          class="ui label"
+          :style="`background-color: ${label.color}; color: ${getLabelTextColor(label.color)}`"
+        >
+          {{ label.name }}
+        </span>
+      </div>
+    </div>
+  </div>
+
+  <!-- Readonly Mode: Display Selected Labels -->
+  <div v-else class="ui labels">
+    <span v-if="!selectedLabels.length" class="text-muted">None</span>
+    <span
+      v-for="label in selectedLabels"
+      :key="label.id"
+      class="ui label"
+      :style="`background-color: ${label.color}; color: ${getLabelTextColor(label.color)}`"
+    >
+      {{ label.name }}
+    </span>
+  </div>
+</template>
+
+<style scoped>
+/* Label selector styles */
+.label-dropdown.ui.dropdown .menu > .item.active,
+.label-dropdown.ui.dropdown .menu > .item.selected {
+  background: var(--color-active);
+  font-weight: var(--font-weight-normal);
+}
+
+.label-dropdown.ui.dropdown .menu > .item .ui.label {
+  margin: 0;
+}
+
+.label-dropdown.ui.dropdown > .text > .ui.label {
+  margin: 0.125rem;
+}
+
+.ui.labels {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.ui.labels .ui.label {
+  margin: 0;
+}
+
+.text-muted {
+  color: var(--color-text-light-2);
+}
+</style>