Improve UX of project creation modal

* Replaces the separate "General" and "Identity" tabs with a non-tabbed view. "Identity" is now a collapsible section that is explicitly marked as optional.
* Makes the modal a proper form, such that it supports confirmation by pressing enter etc.
* Adds proper input validation to prevent invalid configurations from being submitted, e.g. missing classifier, collection project enabled but no collection logic selected, etc.
* Prevents the modal from closing when project creation fails. Lets users refine their inputs and retry.
* Waits for the creation request to complete before closing the modal.
* Redirects directly to the created project instead of back to the project list.

Signed-off-by: nscuro <nscuro@protonmail.com>

Author: nscuro

src/App.vue

@@ -73,17 +73,25 @@ export default {
     }
 
     this.axios.interceptors.response.use(null, (error) => {
+      if (!error.response) {
+        this.$toastr.e(
+          this.$t('condition.unsuccessful_action'),
+          this.$t('condition.http_request_error'),
+        );
+        return Promise.reject(error);
+      }
+      const contentType =
+        (error.response.headers && error.response.headers['content-type']) ||
+        '';
       // On error status codes (4xx - 5xx), display a toast with either:
       //  * The problem title and detail in case of an RFC 9457 response
       //  * the HTTP status code and text
       if (error.response.status >= 400 && error.response.status < 500) {
-        if (
-          error.response.headers['content-type'] === 'application/problem+json'
-        ) {
+        if (contentType.includes('application/problem+json')) {
           this.$toastr.w(error.response.data.detail, error.response.data.title);
         } else if (
           error.response.status === 400 &&
-          error.response.headers['content-type'] === 'application/json' &&
+          contentType.includes('application/json') &&
           error.response.data &&
           Array.isArray(error.response.data) &&
           error.response.data[0].hasOwnProperty('invalidValue')
@@ -102,9 +110,7 @@ export default {
           );
         }
       } else {
-        if (
-          error.response.headers['content-type'] === 'application/problem+json'
-        ) {
+        if (contentType.includes('application/problem+json')) {
           this.$toastr.w(error.response.data.detail, error.response.data.title);
         } else {
           this.$toastr.e(

src/i18n/locales/de.json

@@ -583,6 +583,7 @@
     "identifier": "Kennung",
     "identifier_type": "Kennungstyp",
     "identity": "Identität",
+    "identity_fields_set": null,
     "in_triage": "In Triage",
     "inactive": "Inaktiv",
     "inactive_active_children": "Das Projekt kann nicht auf inaktiv gesetzt werden, wenn es aktive untergeordnete Projekte hat",
@@ -601,6 +602,7 @@
     "internal": "Intern",
     "inventory": "Inventar",
     "inventory_with_vulnerabilities": "Inventarisierung mit Schwachstellen",
+    "is_latest_tooltip": null,
     "item": "Element",
     "justification": "Begründung",
     "justification_tooltip": "Die Begründung, warum der Auswirkungsanalysestatus „Nicht betroffen“ lautete",
@@ -667,6 +669,7 @@
     "only_outdated_tooltip": "Nur Abhängigkeiten anzeigen, für die neuere stabile Versionen verfügbar sind",
     "operational_risk": "Betriebsrisiko",
     "operator": "Operator",
+    "optional": null,
     "osi_approved": "OSI-Zulassung",
     "outdated_only": "Nur veraltet",
     "overview": "Überblick",
@@ -909,6 +912,8 @@
     "rejected": "Abgelehnt",
     "remove_component": "Komponente entfernen",
     "reported_by": "Berichtet von",
+    "required_classifier": null,
+    "required_collection_logic": null,
     "required_component_identifier": "Eine Komponentenkennung ist erforderlich",
     "required_component_name": "Der Komponentenname ist erforderlich",
     "required_component_version": "Die Komponentenversion ist erforderlich",

src/i18n/locales/en.json

@@ -583,6 +583,7 @@
     "identifier": "Identifier",
     "identifier_type": "Identifier Type",
     "identity": "Identity",
+    "identity_fields_set": "{count} field(s) set",
     "in_triage": "In Triage",
     "inactive": "Inactive",
     "inactive_active_children": "The project cannot be set to inactive if it has active children",
@@ -601,6 +602,7 @@
     "internal": "Internal",
     "inventory": "Inventory",
     "inventory_with_vulnerabilities": "Inventory with Vulnerabilities",
+    "is_latest_tooltip": "Marks this version as the latest release of the project",
     "item": "Item",
     "justification": "Justification",
     "justification_tooltip": "The rationale of why the impact analysis state was asserted to be \"Not Affected\"",
@@ -667,6 +669,7 @@
     "only_outdated_tooltip": "Only show dependencies that have newer stable versions available",
     "operational_risk": "Operational Risk",
     "operator": "Operator",
+    "optional": "optional",
     "osi_approved": "OSI Approved",
     "outdated_only": "Outdated only",
     "overview": "Overview",
@@ -909,6 +912,8 @@
     "rejected": "Rejected",
     "remove_component": "Remove Component",
     "reported_by": "Reported By",
+    "required_classifier": "A classifier is required",
+    "required_collection_logic": "A collection logic is required",
     "required_component_identifier": "A component identifier is required",
     "required_component_name": "The component name is required",
     "required_component_version": "The component version is required",

src/i18n/locales/es.json

@@ -583,6 +583,7 @@
     "identifier": "Identificador",
     "identifier_type": "Tipo de identificador",
     "identity": "Identidad",
+    "identity_fields_set": null,
     "in_triage": "En triaje",
     "inactive": "Inactivo",
     "inactive_active_children": "El proyecto no se puede configurar como inactivo si tiene hijos activos",
@@ -601,6 +602,7 @@
     "internal": "Interno",
     "inventory": "Inventario",
     "inventory_with_vulnerabilities": "Inventario con vulnerabilidades",
+    "is_latest_tooltip": null,
     "item": "Elemento",
     "justification": "Justificación",
     "justification_tooltip": "El motivo por el que se afirmó que el estado del análisis de impacto era \"No afectado\"",
@@ -667,6 +669,7 @@
     "only_outdated_tooltip": "Mostrar solo las dependencias que tengan versiones estables más nuevas disponibles",
     "operational_risk": "Riesgo operacional",
     "operator": "Operador",
+    "optional": null,
     "osi_approved": "Aprobado por OSI",
     "outdated_only": "Sólo anticuado",
     "overview": "Descripción general",
@@ -909,6 +912,8 @@
     "rejected": "Rechazado",
     "remove_component": "Quitar componente",
     "reported_by": "Reportado por",
+    "required_classifier": null,
+    "required_collection_logic": null,
     "required_component_identifier": "Se requiere un identificador de componente",
     "required_component_name": "El nombre del componente es obligatorio.",
     "required_component_version": "La versión del componente es obligatoria.",

src/i18n/locales/fr.json

@@ -583,6 +583,7 @@
     "identifier": "Identifiant",
     "identifier_type": "Type d'identifiant",
     "identity": "Identité",
+    "identity_fields_set": null,
     "in_triage": "Au tri",
     "inactive": "Inactif",
     "inactive_active_children": "Le projet ne peut pas être défini comme inactif s'il a des enfants actifs",
@@ -601,6 +602,7 @@
     "internal": "Interne",
     "inventory": "Inventaire",
     "inventory_with_vulnerabilities": "Inventaire avec vulnérabilités",
+    "is_latest_tooltip": null,
     "item": "Élément",
     "justification": "Justification",
     "justification_tooltip": "La raison pour laquelle l'état de l'analyse d'impact a été déclaré « Non affecté »",
@@ -667,6 +669,7 @@
     "only_outdated_tooltip": "Afficher uniquement les dépendances pour lesquelles des versions stables plus récentes sont disponibles",
     "operational_risk": "Risque opérationnel",
     "operator": "Opérateur",
+    "optional": null,
     "osi_approved": "Approuvée par l'OSI",
     "outdated_only": "Obsolète seulement",
     "overview": "Aperçu",
@@ -909,6 +912,8 @@
     "rejected": "Rejetée",
     "remove_component": "Supprimer un composant",
     "reported_by": "Rapporté par",
+    "required_classifier": null,
+    "required_collection_logic": null,
     "required_component_identifier": "Un identifiant de composant est requis",
     "required_component_name": "Le nom du composant est obligatoire",
     "required_component_version": "La version du composant est requise",

src/i18n/locales/hi.json

@@ -583,6 +583,7 @@
     "identifier": "पहचानकर्ता",
     "identifier_type": "पहचानकर्ता प्रकार",
     "identity": "पहचान",
+    "identity_fields_set": null,
     "in_triage": "ट्राइएज में",
     "inactive": "निष्क्रिय",
     "inactive_active_children": "यदि प्रोजेक्ट में सक्रिय बच्चे हैं तो उसे निष्क्रिय नहीं किया जा सकता",
@@ -601,6 +602,7 @@
     "internal": "आंतरिक",
     "inventory": "भंडार",
     "inventory_with_vulnerabilities": "कमज़ोरियों वाली सूची",
+    "is_latest_tooltip": null,
     "item": "वस्तु",
     "justification": "औचित्य",
     "justification_tooltip": "प्रभाव विश्लेषण स्थिति को \"प्रभावित नहीं\" क्यों कहा गया, इसका औचित्य",
@@ -667,6 +669,7 @@
     "only_outdated_tooltip": "केवल उन निर्भरताओं को दिखाएं जिनके नए स्थिर संस्करण उपलब्ध हैं",
     "operational_risk": "परिचालनात्मक जोखिम",
     "operator": "ऑपरेटर",
+    "optional": null,
     "osi_approved": "ओएसआई स्वीकृत",
     "outdated_only": "केवल पुराना",
     "overview": "अवलोकन",
@@ -909,6 +912,8 @@
     "rejected": "अस्वीकार कर दिया",
     "remove_component": "घटक हटाएँ",
     "reported_by": "के द्वारा रिपोर्ट किया गया",
+    "required_classifier": null,
+    "required_collection_logic": null,
     "required_component_identifier": "घटक पहचानकर्ता आवश्यक है",
     "required_component_name": "घटक का नाम आवश्यक है",
     "required_component_version": "घटक संस्करण आवश्यक है",

src/i18n/locales/it.json

@@ -583,6 +583,7 @@
     "identifier": "Identificatore",
     "identifier_type": "Tipo di identificatore",
     "identity": "Identità",
+    "identity_fields_set": null,
     "in_triage": "Nel triage",
     "inactive": "Inattivo",
     "inactive_active_children": "Il progetto non può essere impostato su inattivo se ha figli attivi",
@@ -601,6 +602,7 @@
     "internal": "Interno",
     "inventory": "Inventario",
     "inventory_with_vulnerabilities": "Inventario con vulnerabilità",
+    "is_latest_tooltip": null,
     "item": "Elemento",
     "justification": "Giustificazione",
     "justification_tooltip": "La motivazione per cui lo stato dell'analisi d'impatto è stato dichiarato \"Non interessato\"",
@@ -667,6 +669,7 @@
     "only_outdated_tooltip": "Mostra solo le dipendenze per cui sono disponibili versioni stabili più recenti",
     "operational_risk": "Rischio operativo",
     "operator": "Operatore",
+    "optional": null,
     "osi_approved": "Approvato dall'OSI",
     "outdated_only": "Solo obsoleto",
     "overview": "Panoramica",
@@ -909,6 +912,8 @@
     "rejected": "Respinto",
     "remove_component": "Rimuovi componente",
     "reported_by": "Segnalato da",
+    "required_classifier": null,
+    "required_collection_logic": null,
     "required_component_identifier": "È obbligatorio un identificatore del componente",
     "required_component_name": "Il nome del componente è obbligatorio",
     "required_component_version": "La versione del componente è obbligatoria",

src/i18n/locales/ja.json

@@ -583,6 +583,7 @@
     "identifier": "識別子",
     "identifier_type": "識別子の種類",
     "identity": "身元",
+    "identity_fields_set": null,
     "in_triage": "トリアージ中",
     "inactive": "非活性",
     "inactive_active_children": "アクティブな子プロジェクトがある場合、プロジェクトを非アクティブに設定することはできません。",
@@ -601,6 +602,7 @@
     "internal": "内部",
     "inventory": "インベントリ",
     "inventory_with_vulnerabilities": "脆弱性のあるインベントリ",
+    "is_latest_tooltip": null,
     "item": "アイテム",
     "justification": "正当化",
     "justification_tooltip": "影響分析の状態が「影響を受けない」と主張された理由",
@@ -667,6 +669,7 @@
     "only_outdated_tooltip": "新しい安定バージョンが利用可能な依存関係のみを表示する",
     "operational_risk": "運用リスク",
     "operator": "オペレーター",
+    "optional": null,
     "osi_approved": "OSI承認",
     "outdated_only": "古いもののみ",
     "overview": "概要",
@@ -909,6 +912,8 @@
     "rejected": "拒否",
     "remove_component": "コンポーネントを削除",
     "reported_by": "報告者",
+    "required_classifier": null,
+    "required_collection_logic": null,
     "required_component_identifier": "コンポーネント識別子が必要です",
     "required_component_name": "コンポーネント名は必須です",
     "required_component_version": "コンポーネントのバージョンが必要です",

src/i18n/locales/pl.json

@@ -583,6 +583,7 @@
     "identifier": "Identyfikator",
     "identifier_type": "Typ identyfikatora",
     "identity": "Tożsamość",
+    "identity_fields_set": null,
     "in_triage": "W segregacji",
     "inactive": "Nieaktywny",
     "inactive_active_children": "Projektu nie można ustawić jako nieaktywnego, jeśli ma aktywne elementy podrzędne",
@@ -601,6 +602,7 @@
     "internal": "Wewnętrzny",
     "inventory": "Spis",
     "inventory_with_vulnerabilities": "Inwentarz z lukami w zabezpieczeniach",
+    "is_latest_tooltip": null,
     "item": "Pozycja",
     "justification": "Uzasadnienie",
     "justification_tooltip": "Uzasadnienie, dla którego stwierdzono, że stan analizy wpływu to „Nie ma wpływu”",
@@ -667,6 +669,7 @@
     "only_outdated_tooltip": "Pokazuj tylko zależności, dla których dostępne są nowsze stabilne wersje",
     "operational_risk": "Ryzyko operacyjne",
     "operator": "Operator",
+    "optional": null,
     "osi_approved": "Zatwierdzone przez OSI",
     "outdated_only": "Tylko nieaktualne",
     "overview": "Przegląd",
@@ -909,6 +912,8 @@
     "rejected": "Odrzucony",
     "remove_component": "Usuń komponent",
     "reported_by": "Zgłoszone przez",
+    "required_classifier": null,
+    "required_collection_logic": null,
     "required_component_identifier": "Wymagany jest identyfikator komponentu",
     "required_component_name": "Nazwa komponentu jest wymagana",
     "required_component_version": "Wymagana jest wersja komponentu",

src/i18n/locales/pt-BR.json

@@ -583,6 +583,7 @@
     "identifier": "Identificador",
     "identifier_type": "Tipo de identificador",
     "identity": "Identidade",
+    "identity_fields_set": null,
     "in_triage": "Em triagem",
     "inactive": "Inativo",
     "inactive_active_children": "O projeto não pode ser definido como inativo se tiver filhos ativos",
@@ -601,6 +602,7 @@
     "internal": "interno",
     "inventory": "Inventário",
     "inventory_with_vulnerabilities": "Inventário com vulnerabilidades",
+    "is_latest_tooltip": null,
     "item": "Item",
     "justification": "Justificação",
     "justification_tooltip": "A justificativa pela qual o estado da análise de impacto foi declarado como \"Não afetado\"",
@@ -667,6 +669,7 @@
     "only_outdated_tooltip": "Mostrar apenas dependências que tenham versões estáveis mais recentes disponíveis",
     "operational_risk": "Risco operacional",
     "operator": "Operador",
+    "optional": null,
     "osi_approved": "Aprovado pelo OSI",
     "outdated_only": "Apenas desatualizado",
     "overview": "Visão geral",
@@ -909,6 +912,8 @@
     "rejected": "Rejeitado",
     "remove_component": "Remover componente",
     "reported_by": "Reportado por",
+    "required_classifier": null,
+    "required_collection_logic": null,
     "required_component_identifier": "Um identificador de componente é obrigatório",
     "required_component_name": "O nome do componente é obrigatório",
     "required_component_version": "A versão do componente é obrigatória",