chore(attack-pahts): improve attack paths queries attribution (#9983)

ui/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 All notable changes to the **Prowler UI** are documented in this file.
 
+## [1.19.0] (Prowler UNRELEASED)
+
+### 🔄 Changed
+
+- Attack Paths: Query list now shows their name and short description, when one is selected it also shows a longer description and an attribution if it has it [(#9983)](https://github.com/prowler-cloud/prowler/pull/9983)
+
+---
+
 ## [1.18.1] (Prowler UNRELEASED)
 
 ### 🐞 Fixed

ui/app/(prowler)/attack-paths/(workflow)/query-builder/_components/query-selector.tsx

@@ -35,7 +35,7 @@ export const QuerySelector = ({
             <div className="flex flex-col gap-1">
               <span className="font-medium">{query.attributes.name}</span>
               <span className="text-xs text-gray-500">
-                {query.attributes.description}
+                {query.attributes.short_description}
               </span>
             </div>
           </SelectItem>

ui/app/(prowler)/attack-paths/(workflow)/query-builder/page.tsx

@@ -340,6 +340,33 @@ export default function AttackPathAnalysisPage() {
                   onQueryChange={handleQueryChange}
                 />
 
+                {queryBuilder.selectedQueryData && (
+                  <div className="bg-bg-neutral-tertiary text-text-neutral-secondary dark:text-text-neutral-secondary rounded-md p-3 text-sm">
+                    <p className="whitespace-pre-line">
+                      {queryBuilder.selectedQueryData.attributes.description}
+                    </p>
+                    {queryBuilder.selectedQueryData.attributes.attribution && (
+                      <p className="mt-2 text-xs">
+                        Source:{" "}
+                        <a
+                          href={
+                            queryBuilder.selectedQueryData.attributes
+                              .attribution.link
+                          }
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="underline"
+                        >
+                          {
+                            queryBuilder.selectedQueryData.attributes
+                              .attribution.text
+                          }
+                        </a>
+                      </p>
+                    )}
+                  </div>
+                )}
+
                 {queryBuilder.selectedQuery && (
                   <QueryParametersForm
                     selectedQuery={queryBuilder.selectedQueryData}

ui/types/attack-paths.ts

@@ -90,11 +90,18 @@ export interface AttackPathQueryParameter {
   required?: boolean;
 }
 
+export interface AttackPathQueryAttribution {
+  text: string;
+  link: string;
+}
+
 export interface AttackPathQueryAttributes {
   name: string;
+  short_description: string;
   description: string;
   provider: string;
   parameters: AttackPathQueryParameter[];
+  attribution: AttackPathQueryAttribution | null;
 }
 
 export interface AttackPathQuery {