From 2c707b48366d6fe8a81303266789fdc7cbedbda4 Mon Sep 17 00:00:00 2001
From: cnotv <giuseppe.leo@suse.com>
Date: Wed, 18 Sep 2024 16:16:51 +0200
Subject: [PATCH] Correct manually :deep() statements

---
 .../components/ExplainPanel.vue               | 32 ++++++++---------
 .../src/components/StringList/StringList.vue  | 10 +++---
 shell/components/ButtonDropdown.vue           |  6 ++--
 shell/components/ChartReadme.vue              | 11 +++---
 shell/components/DashboardMetrics.vue         |  6 ++--
 shell/components/ExplorerMembers.vue          |  2 +-
 .../components/ExplorerProjectsNamespaces.vue |  6 ++--
 shell/components/Markdown.vue                 | 16 ++++-----
 shell/components/auth/RoleDetailEdit.vue      | 36 +++++++++----------
 shell/components/form/EnvVars.vue             |  4 +--
 shell/components/form/InputWithSelect.vue     | 14 ++++----
 shell/components/form/LabeledSelect.vue       |  4 +--
 shell/components/form/NameNsDescription.vue   |  4 +--
 shell/components/form/ServicePorts.vue        |  4 +--
 shell/components/formatter/ClusterLink.vue    | 18 +++++-----
 shell/components/nav/Group.vue                | 10 +++---
 shell/components/nav/Header.vue               | 10 +++---
 .../index.vue                                 |  4 +--
 shell/edit/logging-flow/index.vue             | 10 +++---
 .../networking.k8s.io.ingress/RulePath.vue    |  6 ++--
 .../tabs/MachinePool.vue                      |  8 +++--
 21 files changed, 108 insertions(+), 113 deletions(-)

diff --git a/pkg/kubectl-explain/components/ExplainPanel.vue b/pkg/kubectl-explain/components/ExplainPanel.vue
index 366f67b0270..36ba62e780e 100644
--- a/pkg/kubectl-explain/components/ExplainPanel.vue
+++ b/pkg/kubectl-explain/components/ExplainPanel.vue
@@ -190,7 +190,7 @@ export default {
   </div>
 </template>
 
-<style lang="scss" scoped> 
+<style lang="scss" scoped>
 // TODO #11952: Correct deep statement
   .main {
     overflow: auto;
@@ -302,24 +302,22 @@ export default {
     }
   }
 </style>
-<style lang="scss" scoped> 
+<style lang="scss" scoped>
 // TODO #11952: Correct deep statement
-  .markdown {
-    :deep( ) {
-      P {
-        line-height: 1.25;
-        margin-bottom: 10px;
-      }
+:deep(.markdown)  {
+  P {
+    line-height: 1.25;
+    margin-bottom: 10px;
+  }
 
-      LI:not(:last-child) {
-        margin-bottom: 10px;
-      }
+  LI:not(:last-child) {
+    margin-bottom: 10px;
+  }
 
-      code {
-        font-size: 12.5px;
-        line-height: normal;
-        padding: 0;
-      }
-    }
+  code {
+    font-size: 12.5px;
+    line-height: normal;
+    padding: 0;
   }
+}
 </style>
diff --git a/pkg/rancher-components/src/components/StringList/StringList.vue b/pkg/rancher-components/src/components/StringList/StringList.vue
index 9de3ffac874..edcd1cb73aa 100644
--- a/pkg/rancher-components/src/components/StringList/StringList.vue
+++ b/pkg/rancher-components/src/components/StringList/StringList.vue
@@ -639,13 +639,13 @@ export default defineComponent({
   }
 }
 
-:deep( ) {
-  .labeled-input INPUT.no-label,
-  .labeled-input INPUT:hover.no-label,
-  .labeled-input INPUT:focus.no-label {
+:deep(.labeled-input) {
+  INPUT.no-label,
+  INPUT:hover.no-label,
+  INPUT:focus.no-label {
     padding: 1px 0px 0px 0px;
   }
-  .labeled-input.compact-input {
+  &.compact-input {
     min-height: 0;
   }
 }
diff --git a/shell/components/ButtonDropdown.vue b/shell/components/ButtonDropdown.vue
index 117f6b82dd2..ee1a97ccc2a 100644
--- a/shell/components/ButtonDropdown.vue
+++ b/shell/components/ButtonDropdown.vue
@@ -226,7 +226,7 @@ export default {
   </v-select>
 </template>
 
-<style lang='scss' scoped> 
+<style lang='scss' scoped>
 // TODO #11952: Correct deep statement
 .button-dropdown.btn-sm {
   :deep( > .vs__dropdown-toggle ) {
@@ -252,7 +252,7 @@ export default {
   color: var(--link);
   padding: 0;
 
-  &.vs--open :deep( ) {
+  &:deep( .vs--open) {
     outline: none;
     box-shadow: none;
   }
@@ -273,7 +273,7 @@ export default {
     }
   }
 
-  :deep( > .vs__dropdown-toggle ) {
+   > :deep(.vs__dropdown-toggle ) {
     width: 100%;
     display: grid;
     grid-template-columns: 75% 25%;
diff --git a/shell/components/ChartReadme.vue b/shell/components/ChartReadme.vue
index 26f9458206d..0b7407d6b47 100644
--- a/shell/components/ChartReadme.vue
+++ b/shell/components/ChartReadme.vue
@@ -52,7 +52,7 @@ export default {
   </div>
 </template>
 
-<style lang="scss" scoped> 
+<style lang="scss" scoped>
 // TODO #11952: Correct deep statement
   .chart-readmes {
     & > h1 {
@@ -64,13 +64,14 @@ export default {
     max-width: 100%;
     line-height: 1.6;
 
-    :deep( ) {
+    :deep(
       * + H1,
       * + H2,
       * + H3,
       * + H4,
       * + H5,
-      * + H6 {
+      * + H6
+    ) {
         margin-top: 20px;
       }
     }
@@ -89,13 +90,11 @@ export default {
       word-break: break-word;
     }
 
-    :deep(  > h1:first-of-type ) {
+    > :deep(h1:first-of-type ) {
       display: none;
     }
 
     :deep( p ) {
       margin-bottom: 0.5em;
     }
-  }
-
 </style>
diff --git a/shell/components/DashboardMetrics.vue b/shell/components/DashboardMetrics.vue
index e6e14f0c99b..f03dc1cf375 100644
--- a/shell/components/DashboardMetrics.vue
+++ b/shell/components/DashboardMetrics.vue
@@ -98,10 +98,10 @@ export default {
   </div>
 </template>
 
-<style lang="scss" scoped> 
+<style lang="scss" scoped>
 // TODO #11952: Correct deep statement
 .dashboard-metrics {
-  & :deep( ) {
+  :deep(&) {
     .external-link {
       position: absolute;
       left: 200px;
@@ -115,7 +115,7 @@ export default {
 }
 
 .dashboard-metrics.external-link-pull-left {
-  & :deep( ) {
+  :deep(&) {
     .external-link {
       position: absolute;
       left: 10px;
diff --git a/shell/components/ExplorerMembers.vue b/shell/components/ExplorerMembers.vue
index 5cf3682e773..77b057603bf 100644
--- a/shell/components/ExplorerMembers.vue
+++ b/shell/components/ExplorerMembers.vue
@@ -405,7 +405,7 @@ export default {
   </div>
 </template>
 
-<style lang='scss' scoped> 
+<style lang='scss' scoped>
 // TODO #11952: Correct deep statement
 
 .role {
diff --git a/shell/components/ExplorerProjectsNamespaces.vue b/shell/components/ExplorerProjectsNamespaces.vue
index d7c5e3febc4..c0b6aa51a3a 100644
--- a/shell/components/ExplorerProjectsNamespaces.vue
+++ b/shell/components/ExplorerProjectsNamespaces.vue
@@ -501,10 +501,10 @@ export default {
     <MoveModal @moving="clearSelection" />
   </div>
 </template>
-<style lang="scss" scoped> 
+<style lang="scss" scoped>
 // TODO #11952: Correct deep statement
 .project-namespaces {
-  & :deep( ) {
+  :deep(&) {
     .project-namespaces-table table {
       table-layout: fixed;
     }
@@ -569,7 +569,7 @@ export default {
   }
 }
 </style>
-<style lang="scss"> 
+<style lang="scss">
 // TODO #11952: Correct deep statement
   .psa-tooltip {
     // These could pop up a lot as the mouse moves around, keep them as small and unintrusive as possible
diff --git a/shell/components/Markdown.vue b/shell/components/Markdown.vue
index 6587debb078..820dade96b7 100644
--- a/shell/components/Markdown.vue
+++ b/shell/components/Markdown.vue
@@ -76,17 +76,15 @@ export default {
   <Loading v-else />
 </template>
 
-<style lang="scss"> 
+<style lang="scss">
 // TODO #11952: Correct deep statement
 
-:deep( ) {
-  P {
-    font-size: initial;
-    line-height: initial;
-    font-weight: initial;
-    letter-spacing: initial;
-    font-style: normal;
-  }
+:deep(P) {
+  font-size: initial;
+  line-height: initial;
+  font-weight: initial;
+  letter-spacing: initial;
+  font-style: normal;
 }
 
 .markdown {
diff --git a/shell/components/auth/RoleDetailEdit.vue b/shell/components/auth/RoleDetailEdit.vue
index 9cc08a2d401..79738de92ab 100644
--- a/shell/components/auth/RoleDetailEdit.vue
+++ b/shell/components/auth/RoleDetailEdit.vue
@@ -797,34 +797,32 @@ export default {
   </CruResource>
 </template>
 
-<style lang="scss" scoped> 
+<style lang="scss" scoped>
 // TODO #11952: Correct deep statement
   .required {
     color: var(--error);
   }
 
-  :deep( ) {
-    .column-headers {
-      margin-right: 75px;
-      margin-bottom: 5px;
-    }
+  :deep(.column-headers)  {
+    margin-right: 75px;
+    margin-bottom: 5px;
+  }
 
-    .box {
-      align-items: initial;
+  :deep(.box)  {
+    align-items: initial;
 
-      .remove {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: flex-end;
-      }
+    .remove {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: flex-end;
     }
+  }
 
-    .columns {
-      .col > .unlabeled-select:not(.taggable) {
-        // override the odd padding-top from shell/assets/styles/global/_select.scss
-        padding: $unlabaled-select-padding
-      }
+  :deep(.columns)  {
+    .col > .unlabeled-select:not(.taggable) {
+      // override the odd padding-top from shell/assets/styles/global/_select.scss
+      padding: $unlabaled-select-padding
     }
   }
 </style>
diff --git a/shell/components/form/EnvVars.vue b/shell/components/form/EnvVars.vue
index 451656c754d..3811efdb61f 100644
--- a/shell/components/form/EnvVars.vue
+++ b/shell/components/form/EnvVars.vue
@@ -130,9 +130,9 @@ export default {
   </div>
 </template>
 
-<style lang='scss' scoped> 
+<style lang='scss' scoped>
 // TODO #11952: Correct deep statement
-.value-from :deep( ) {
+:deep(.value-from) {
   .v-select {
     height: 50px;
   }
diff --git a/shell/components/form/InputWithSelect.vue b/shell/components/form/InputWithSelect.vue
index c359568e15c..af9f49ef07b 100644
--- a/shell/components/form/InputWithSelect.vue
+++ b/shell/components/form/InputWithSelect.vue
@@ -198,7 +198,7 @@ export default {
   </div>
 </template>
 
-<style lang='scss' scoped> 
+<style lang='scss' scoped>
 // TODO #11952: Correct deep statement
 .input-container {
   display: flex;
@@ -285,18 +285,18 @@ export default {
       border: 1px solid var(--outline) !important;
     }
 
-    &.labeled-select.focused :deep(),
-    &.unlabeled-select.focused :deep( ) {
+    &:deep(.labeled-select.focused),
+    &:deep(.unlabeled-select.focused) {
       outline: none;
     }
 
-    &.labeled-select:not(.disabled):not(.view) :deep(),
-    &.unlabeled-select:not(.disabled):not(.view) :deep( ) {
+    &:deep(.labeled-select:not(.disabled):not(.view)),
+    &:deep(.unlabeled-select:not(.disabled):not(.view)) {
       border: solid 1px var(--input-border);
     }
 
-    &.labeled-select :deep(),
-    &.unlabeled-select :deep( ) {
+    &:deep(.labeled-select ),
+    &:deep(.unlabeled-select  ) {
       box-shadow: none;
       width: 20%;
       margin-right: 1px; // push the input box right so the full focus outline of the select can be seen, z-index borks
diff --git a/shell/components/form/LabeledSelect.vue b/shell/components/form/LabeledSelect.vue
index 4df2df72d04..b928210d016 100644
--- a/shell/components/form/LabeledSelect.vue
+++ b/shell/components/form/LabeledSelect.vue
@@ -419,7 +419,7 @@ export default {
   </div>
 </template>
 
-<style lang='scss' scoped> 
+<style lang='scss' scoped>
 // TODO #11952: Correct deep statement
 
 .labeled-select {
@@ -559,7 +559,7 @@ export default {
     }
   }
 
-  .no-label :deep( ) {
+  :deep(.no-label) {
     &.v-select:not(.vs--single) {
       min-height: 33px;
     }
diff --git a/shell/components/form/NameNsDescription.vue b/shell/components/form/NameNsDescription.vue
index d940e816570..04b31c63c1d 100644
--- a/shell/components/form/NameNsDescription.vue
+++ b/shell/components/form/NameNsDescription.vue
@@ -505,7 +505,7 @@ export default {
   </div>
 </template>
 
-<style lang="scss" scoped> 
+<style lang="scss" scoped>
 // TODO #11952: Correct deep statement
 button {
   all: unset;
@@ -527,7 +527,7 @@ button {
     max-height: $input-height;
   }
 
-  .namespace-select :deep( ) {
+  :deep(.namespace-select) {
     .labeled-select {
       min-width: 40%;
 
diff --git a/shell/components/form/ServicePorts.vue b/shell/components/form/ServicePorts.vue
index d1901dd920b..036fbae5be5 100644
--- a/shell/components/form/ServicePorts.vue
+++ b/shell/components/form/ServicePorts.vue
@@ -273,7 +273,7 @@ export default {
   </div>
 </template>
 
-<style lang="scss" scoped> 
+<style lang="scss" scoped>
 // TODO #11952: Correct deep statement
  $remove: 75;
   $checkbox: 75;
@@ -320,7 +320,7 @@ export default {
       height: 100%;
     }
 
-    .port-protocol :deep( ) {
+    :deep(.port-protocol) {
       .unlabeled-select {
         .v-select.inline {
           margin-top: 2px;
diff --git a/shell/components/formatter/ClusterLink.vue b/shell/components/formatter/ClusterLink.vue
index 0d30bf2d5b0..9966a7318d3 100644
--- a/shell/components/formatter/ClusterLink.vue
+++ b/shell/components/formatter/ClusterLink.vue
@@ -84,7 +84,7 @@ export default {
   </span>
 </template>
 
-<style lang="scss" scoped> 
+<style lang="scss" scoped>
 // TODO #11952: Correct deep statement
   .cluster-link {
     display: flex;
@@ -94,15 +94,13 @@ export default {
     color: var(--error);
     margin-left: 4px;
   }
-  :deep( ) {
-    .labeled-tooltip, .status-icon {
-      position: relative;
-      display: inline;
-      left: auto;
-      right: auto;
-      top: 2px;
-      bottom: auto;
-    }
+  :deep(.labeled-tooltip, .status-icon) {
+    position: relative;
+    display: inline;
+    left: auto;
+    right: auto;
+    top: 2px;
+    bottom: auto;
   }
   .mytooltip ul {
     outline: 1px dashed red;
diff --git a/shell/components/nav/Group.vue b/shell/components/nav/Group.vue
index dd304d3e240..40a0b2cd33d 100644
--- a/shell/components/nav/Group.vue
+++ b/shell/components/nav/Group.vue
@@ -282,7 +282,7 @@ export default {
   </div>
 </template>
 
-<style lang="scss" scoped> 
+<style lang="scss" scoped>
 // TODO #11952: Correct deep statement
   .header {
     position: relative;
@@ -398,8 +398,10 @@ export default {
     }
   }
 
-  .body :deep() > .child.router-link-active,
-  .header :deep( > .child.router-link-exact-active ) {
+  :deep(
+    .body > .child.router-link-active,
+    .header  > .child.router-link-exact-active
+  ) {
     padding: 0;
 
     A, A I {
@@ -413,7 +415,7 @@ export default {
     }
   }
 
-  .body :deep( > .child ) {
+  :deep(.body  > .child ) {
     A {
       border-left: solid 5px transparent;
       line-height: 16px;
diff --git a/shell/components/nav/Header.vue b/shell/components/nav/Header.vue
index dd486fd5cce..b14b74db591 100644
--- a/shell/components/nav/Header.vue
+++ b/shell/components/nav/Header.vue
@@ -779,7 +779,7 @@ export default {
   </header>
 </template>
 
-<style lang="scss" scoped> 
+<style lang="scss" scoped>
 // TODO #11952: Correct deep statement
   // It would be nice to grab this from `Group.vue`, but there's margin, padding and border, which is overkill to var
   $side-menu-group-padding-left: 16px;
@@ -814,8 +814,10 @@ export default {
     }
 
     .filter {
-      :deep() .labeled-select,
-      :deep( .unlabeled-select ) {
+      :deep(
+        .labeled-select,
+        .unlabeled-select
+      ) {
         .vs__search::placeholder {
           color: var(--body-text) !important;
         }
@@ -977,7 +979,7 @@ export default {
         width: 40px;
       }
 
-      :deep( > div > .btn.role-tertiary ) {
+      :deep(div > .btn.role-tertiary ) {
         border: 1px solid var(--header-btn-bg);
         border: none;
         background: var(--header-btn-bg);
diff --git a/shell/detail/autoscaling.horizontalpodautoscaler/index.vue b/shell/detail/autoscaling.horizontalpodautoscaler/index.vue
index 6a4ca62c7cd..55d7041c1bb 100644
--- a/shell/detail/autoscaling.horizontalpodautoscaler/index.vue
+++ b/shell/detail/autoscaling.horizontalpodautoscaler/index.vue
@@ -240,10 +240,10 @@ export default {
   </ResourceTabs>
 </template>
 
-<style lang="scss" scoped> 
+<style lang="scss" scoped>
 // TODO #11952: Correct deep statement
 .hpa-metrics-table {
-  .info-box :deep( ) {
+  :deep(.info-box  ) {
     background-color: var(--simple-box-bg);
   }
   .row {
diff --git a/shell/edit/logging-flow/index.vue b/shell/edit/logging-flow/index.vue
index 63eef6bb38a..77676919854 100644
--- a/shell/edit/logging-flow/index.vue
+++ b/shell/edit/logging-flow/index.vue
@@ -473,12 +473,10 @@ export default {
   />
 </template>
 
-<style lang="scss" scoped> 
+<style lang="scss" scoped>
 // TODO #11952: Correct deep statement
-:deep( ) {
-  .icon-info {
-    margin-top: -3px;
-    margin-right: 4px;
-  }
+:deep(.icon-info) {
+  margin-top: -3px;
+  margin-right: 4px;
 }
 </style>
diff --git a/shell/edit/networking.k8s.io.ingress/RulePath.vue b/shell/edit/networking.k8s.io.ingress/RulePath.vue
index a6253d54610..1d1e3ca444d 100644
--- a/shell/edit/networking.k8s.io.ingress/RulePath.vue
+++ b/shell/edit/networking.k8s.io.ingress/RulePath.vue
@@ -180,11 +180,11 @@ export default {
     </button>
   </div>
 </template>
-<style lang="scss" scoped> 
+<style lang="scss" scoped>
 // TODO #11952: Correct deep statement
 $row-height: 40px;
 
-.labeled-input :deep(, :deep() .labeled-input ) {
+:deep(.labeled-input), :deep(.labeled-input ) {
   padding: 0 !important;
   height: 100%;
   input.no-label {
@@ -192,7 +192,7 @@ $row-height: 40px;
     padding: 10px;
   }
 }
-.rule-path :deep( ) {
+:deep(.rule-path ) {
   .col, INPUT {
     height: $row-height;
   }
diff --git a/shell/edit/provisioning.cattle.io.cluster/tabs/MachinePool.vue b/shell/edit/provisioning.cattle.io.cluster/tabs/MachinePool.vue
index 8085f994aac..962e153ef37 100644
--- a/shell/edit/provisioning.cattle.io.cluster/tabs/MachinePool.vue
+++ b/shell/edit/provisioning.cattle.io.cluster/tabs/MachinePool.vue
@@ -366,10 +366,12 @@ export default {
   </div>
 </template>
 
-<style lang="scss" scoped> 
+<style lang="scss" scoped>
 // TODO #11952: Correct deep statement
-  .advanced :deep() >.vue-portal-target:empty,
-  .advanced :deep( >.vue-portal-target:empty + .spacer ) {
+:deep(
+  .advanced >.vue-portal-target:empty,
+  .advanced  >.vue-portal-target:empty + .spacer
+) {
     display: none;
   }
 </style>