Redesign DAST profile summary with Drawer

What does this MR do and why?

This MR adds a few components to redesign the DAST Profile summary which will be opened in a sidebar.

Note: It copies a few existing components. The existing components will be removed as soon the feature flag is rolled out

Screenshots or screen recordings

How to set up and validate locally

1. Create DAST Profiles (ignore if the project already have profiles created)
2. Create DAST Scan (ignore if the project already have DAST scan)
3. Apply the following patch and edit any existing scan -- Eg: http://gdk.test:3000/flightjs/Flight/-/on_demand_scans/24/edit

diff --git a/ee/app/assets/javascripts/on_demand_scans_form/components/on_demand_scans_form.vue b/ee/app/assets/javascripts/on_demand_scans_form/components/on_demand_scans_form.vue
index 7d4e398b3bf5..67a5ec5a338c 100644
--- a/ee/app/assets/javascripts/on_demand_scans_form/components/on_demand_scans_form.vue
+++ b/ee/app/assets/javascripts/on_demand_scans_form/components/on_demand_scans_form.vue
@@ -11,6 +11,7 @@ import {
   GlSprintf,
   GlSafeHtmlDirective,
   GlTooltipDirective,
+  GlDrawer,
 } from '@gitlab/ui';
 import * as Sentry from '@sentry/browser';
 import { SCAN_TYPE } from 'ee/security_configuration/dast_profiles/dast_scanner_profiles/constants';
@@ -29,6 +30,8 @@ import validation from '~/vue_shared/directives/validation';
 import { HELP_PAGE_PATH, DAST_CONFIGURATION_HELP_PATH } from 'ee/on_demand_scans/constants';
 import SectionLayout from '~/vue_shared/security_configuration/components/section_layout.vue';
 import ConfigurationPageLayout from 'ee/security_configuration/components/configuration_page_layout.vue';
+import ScannerProfileSummary from 'ee/security_configuration/dast_profiles/dast_profile_selector/scanner_profile_summary.vue';
+import SiteProfileSummary from 'ee/security_configuration/dast_profiles/dast_profile_selector/site_profile_summary.vue';
 import dastProfileCreateMutation from '../graphql/dast_profile_create.mutation.graphql';
 import dastProfileUpdateMutation from '../graphql/dast_profile_update.mutation.graphql';
 import {
@@ -133,6 +136,9 @@ export default {
     ConfigurationPageLayout,
     ScannerProfileEmptyState,
     SiteProfileEmptyState,
+    GlDrawer,
+    ScannerProfileSummary,
+    SiteProfileSummary,
   },
   directives: {
     SafeHtml: GlSafeHtmlDirective,
@@ -492,7 +498,7 @@ export default {
           </gl-sprintf>
         </template>
         <template #features>
-          <scanner-profile-empty-state
+          <!-- <scanner-profile-empty-state
             v-if="!hasScannerProfileSelector && glFeatures.dastUiRedesign"
             class="gl-mb-8"
             :new-profile-path="newScannerProfilePath"
@@ -520,7 +526,18 @@ export default {
             :selected-profile="selectedSiteProfile"
             :has-conflict="hasProfilesConflict"
             :dast-scan-id="dastScanId"
-          />
+          /> -->
+          <div>Scanner Profile</div>
+          <scanner-profile-summary :profile="scannerProfiles[0]" />
+          <div>Site Profile</div>
+          <site-profile-summary :profile="siteProfiles[0]" />
+          <gl-drawer open="true">
+            <div>Scanner Profile</div>
+            <scanner-profile-summary :profile="scannerProfiles[0]" />
+            <div>Site Profile</div>
+            <site-profile-summary :profile="siteProfiles[0]" />
+            <div>dummy</div>
+          </gl-drawer>
         </template>
       </section-layout>

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

• I have evaluated the MR acceptance checklist for this MR.