Add side-title to CmkCollapsible and use it in PendingChangesList

Add number of change besides the "Changes" title.

Move "Foreign changes" on the same line as section title and reduce opacity.

CMK-24849

Change-Id: Ic10ab6274f3eb21a9e6d5d0089c9ab6e84454455

Author: alecmkandro

packages/cmk-frontend-vue/src/components/CmkCollapsibleTitle.vue

@@ -10,6 +10,9 @@ interface CollapsibleTitleProps {
   /**@property {string} title - Text to display next to the chevron */
   title: string
 
+  /**@property {string} sideTitle - Text to display on the right side of the title */
+  sideTitle?: string
+
   /** @property {boolean} open - If true, the collapsible element will be open by default,
    * otherwise it will be rendered closed
    */
@@ -32,12 +35,17 @@ defineEmits(['toggleOpen'])
     <span class="cmk-collapsible-title__text">
       {{ title }}
     </span>
+    <span v-if="sideTitle" class="cmk-collapsible-title__side-text">
+      {{ sideTitle }}
+    </span>
     <HelpText v-if="help_text" :help="help_text" />
   </button>
 </template>
 
 <style scoped>
 .cmk-collapsible-title {
+  display: flex;
+  align-items: center;
   position: relative;
   margin-left: 0;
   padding-left: 0;
@@ -91,9 +99,14 @@ defineEmits(['toggleOpen'])
   &.cmk-collapsible-title__chevron--right:before {
     top: 4px;
     left: 0;
-    margin-bottom: 16px;
     transform: rotate(45deg);
     transition: transform 100ms linear;
   }
 }
+
+.cmk-collapsible-title__side-text {
+  color: var(--font-color-dimmed);
+  font-weight: var(--font-weight-default);
+  margin-left: auto;
+}
 </style>

packages/cmk-frontend-vue/src/components/_demo/DemoCmkCollapsibles.vue

@@ -15,13 +15,27 @@ const open = ref(false)
 </script>
 
 <template>
-  <CmkCollapsibleTitle
-    :title="'Collapsible Title'"
-    :open="open"
-    :help_text="'Some help text'"
-    @toggle-open="open = !open"
-  />
-  <CmkCollapsible :open="open">
-    <CmkIndent> Some text inside the collapsible </CmkIndent>
-  </CmkCollapsible>
+  <div class="demo-container">
+    <CmkCollapsibleTitle
+      :title="'Collapsible Title'"
+      :side-title="'Side Title'"
+      :open="open"
+      :help_text="'Some help text'"
+      class="collapsible"
+      @toggle-open="open = !open"
+    />
+    <CmkCollapsible :open="open">
+      <CmkIndent> Some text inside the collapsible </CmkIndent>
+    </CmkCollapsible>
+  </div>
 </template>
+
+<style scoped>
+.demo-container {
+  min-width: 400px;
+}
+
+.collapsible {
+  width: 100%;
+}
+</style>

packages/cmk-frontend-vue/src/main-menu/components/pending-changes/PendingChangesList.vue

@@ -5,7 +5,7 @@ conditions defined in the file COPYING, which is part of this source code packag
 -->
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 import CmkCollapsibleTitle from '@/components/CmkCollapsibleTitle.vue'
 import CmkCollapsible from '@/components/CmkCollapsible.vue'
 import CmkIndent from '@/components/CmkIndent.vue'
@@ -17,35 +17,35 @@ import PendingChangeItemText from './PendingChangeItemText.vue'
 
 const { t } = usei18n('changes-app')
 
-defineProps<{
+const props = defineProps<{
   pendingChanges: PendingChanges[]
   selectedSites: string[]
   numberOfForeignChanges: number
   userName: string
 }>()
 
 const pendingChangesCollapsible = ref<boolean>(true)
+
+const changesTitle = computed(() => {
+  return `${t('changes', 'Changes')} (${props.pendingChanges.length})`
+})
+
+const changesSideTitle = computed(() => {
+  return `${t('foreign-changes', 'Foreign changes: ')} ${props.numberOfForeignChanges}`
+})
 </script>
 
 <template>
   <div class="pending-changes-container">
     <CmkCollapsibleTitle
-      :title="`Changes`"
+      :title="changesTitle"
+      :side-title="changesSideTitle"
       class="collapsible-title"
       :open="pendingChangesCollapsible"
       @toggle-open="pendingChangesCollapsible = !pendingChangesCollapsible"
     />
 
     <CmkCollapsible :open="pendingChangesCollapsible" class="cmk-collapsible-pending-changes">
-      <CmkIndent class="cmk-indent-foreign-changes-container">
-        <div class="cmk-div-foreign-changes-text">
-          {{ t('foreign-changes', 'Foreign changes: ') }}
-        </div>
-        <div class="cmk-div-foreign-changes-text">
-          {{ numberOfForeignChanges }}
-        </div>
-      </CmkIndent>
-
       <CmkIndent v-if="selectedSites.length === 0" class="cmk-indent-no-sites-selected-container">
         <div class="cmk-div-no-sites-selected">
           {{ t('no-sites-selected', "You haven't selected any sites") }}
@@ -112,8 +112,6 @@ const pendingChangesCollapsible = ref<boolean>(true)
   background-color: var(--ux-theme-5);
   width: 100%;
   box-sizing: border-box;
-  display: block;
-  text-align: left;
 }
 
 .cmk-collapsible-pending-changes {
@@ -125,14 +123,6 @@ const pendingChangesCollapsible = ref<boolean>(true)
   height: 100%;
 }
 
-.cmk-indent-foreign-changes-container {
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  gap: 6px;
-  border-bottom: 2px solid var(--ux-theme-4) !important;
-}
-
 .cmk-indent-no-sites-selected-container {
   display: flex;
   flex-direction: column;