nautobot 3.0.0a2__py3-none-any.whl → 3.0.0a3__py3-none-any.whl

nautobot/ui/src/js/collapse.js

@@ -5,7 +5,7 @@
  * ---
  * Critical difference between this and default Bootstrap 5 collapse implementation is that Bootstrap only supports
  * toggling individual panel states without an option to toggle them collectively. See an explanation below:
- * Bootstrap 5 on "Collapse All" button click:  |  Nautobot on "Collapse All" button click:
+ * Bootstrap 5 on "Collapse All Groups" button click:  |  Nautobot on "Collapse All Groups" button click:
  *   * X [expanded]  -> [collapsed]             |    * X [expanded]  -> [collapsed]
  *   * Y [collapsed] -> [expanded]              |    * Y [collapsed] -> [collapsed]
  *   * Z [expanded]  -> [collapsed]             |    * Z [expanded]  -> [collapsed]
@@ -45,7 +45,7 @@ export const initializeCollapseToggleAll = () => {
       .filter((collapseToggleAll) => areAll(getCollapseToggleAllTargets(collapseToggleAll), 'collapsed'))
       .forEach((collapseToggleAll) => {
         collapseToggleAll.setAttribute('aria-expanded', 'false');
-        collapseToggleAll.textContent = 'Expand All';
+        collapseToggleAll.textContent = 'Expand All Groups';
       });
 
   const onShownBsCollapse = () =>
@@ -53,7 +53,7 @@ export const initializeCollapseToggleAll = () => {
       .filter((collapseToggleAll) => areAll(getCollapseToggleAllTargets(collapseToggleAll), 'expanded'))
       .forEach((collapseToggleAll) => {
         collapseToggleAll.setAttribute('aria-expanded', 'true');
-        collapseToggleAll.textContent = 'Collapse All';
+        collapseToggleAll.textContent = 'Collapse All Groups';
       });
 
   // Using event delegation pattern here to avoid re-creating listeners each time DOM is modified.

nautobot/ui/src/js/nautobot.js

@@ -109,4 +109,20 @@ document.addEventListener('DOMContentLoaded', () => {
     event.detail.path = isFavorite ? element.dataset.deleteUrl : element.dataset.addUrl;
   };
   window.setRequestUrl = setRequestUrl;
+
+  // Remove the blur after clicking the footer links that are opening mostly in the new tab
+  // Keeping focus on those items is what keeps the tooltip as well
+  document.querySelectorAll('a[data-bs-toggle="tooltip"], div[data-bs-toggle="tooltip"] > a').forEach((el) => {
+    el.addEventListener('click', () => {
+      el.blur();
+    });
+  });
+
+  // When modal is being closed, bootstrap automatically restore the focus on the element that was triggering the modal
+  // As a result, after modal close tooltip was triggered as well
+  document.addEventListener('hidden.bs.modal', () => {
+    document.querySelectorAll('[data-bs-toggle="tooltip"] > a').forEach((el) => {
+      el.blur();
+    });
+  });
 });

nautobot/ui/src/scss/colors.scss

@@ -36,7 +36,7 @@ $gray-3-dark:   #b5b5b5;
 
 $blue-0-dark:   #339dff;
 $blue-1-dark:   #1a2936;
-$blue-2-dark:   #0e1C2B;
+$blue-2-dark:   #0e1c2b;
 $orange-0-dark: #ff9933;
 $orange-1-dark: #2a1c0f;
 $orange-2-dark: #3d2a16;

nautobot/ui/src/scss/nautobot.scss

@@ -414,8 +414,8 @@ $btn-close-opacity:          0.68;
 $btn-close-hover-opacity:    1;
 $btn-close-focus-opacity:    1;
 $btn-close-disabled-opacity: 0.31;
-$btn-close-filter:           invert(1%) sepia(10%) saturate(233%) hue-rotate(314deg) brightness(99%) contrast(81%);
-$btn-close-filter-dark:      invert(96%) sepia(0%) saturate(1%) hue-rotate(250deg) brightness(86%) contrast(91%);
+$btn-close-filter:           invert(1%) sepia(10%) saturate(233%) hue-rotate(314deg) brightness(99%) contrast(81%); /* $black-0: #1a1a1a; */
+$btn-close-filter-dark:      invert(100%); /* $black-0-dark: #ffffff; */
 $btn-close-white-filter:     $btn-close-filter-dark;
 
 /* Code */
@@ -431,6 +431,18 @@ $kbd-bg:        var(--#{$prefix}secondary-bg);
 /* 4. Include any default map overrides here */
 $theme-colors-rgb-dark: map-loop($theme-colors-dark, to-rgb, "$value");
 
+/* Breakpoints */
+$sidenav-width-for-breakpoints: 240px; // this is only for calculations below; sidenav has separate variable in rem in Layout section
+
+$grid-breakpoints: (
+  xs: 0,
+  sm: 576px + $sidenav-width-for-breakpoints,
+  md: 768px + $sidenav-width-for-breakpoints,
+  lg: 992px + $sidenav-width-for-breakpoints,
+  xl: 1200px + $sidenav-width-for-breakpoints,
+  xxl: 1400px + $sidenav-width-for-breakpoints
+);
+
 /* 5. Include remainder of required parts */
 @import "bootstrap/scss/maps";
 @import "bootstrap/scss/mixins";
@@ -746,12 +758,6 @@ $nautobot-chevron-svg: "<svg viewBox='0 0 17 20' fill='none' xmlns='http://www.w
   }
 }
 
-@mixin nb-firefox-only {
-  @supports (-moz-appearance: none) {
-    @content;
-  }
-}
-
 /* Links */
 a,
 button {
@@ -1114,6 +1120,11 @@ textarea {
   }
 }
 
+.nb-form-check-input-sm {
+  height: 1rem; /* 16px */
+  width: 1rem; /* 16px */
+}
+
 .form-text {
   display: block;
   font-weight: $font-weight-normal;
@@ -1275,11 +1286,13 @@ textarea {
   &.bg-danger,
   &.bg-info,
   &.bg-primary,
+  &.bg-secondary,
   &.bg-success,
   &.bg-warning,
   &.text-bg-danger,
   &.text-bg-info,
   &.text-bg-primary,
+  &.text-bg-secondary,
   &.text-bg-success,
   &.text-bg-warning {
     --#{$prefix}badge-color: var(--#{$prefix}body-bg);
@@ -1413,6 +1426,14 @@ textarea {
   }
 }
 
+/* Code */
+pre:not(:has(code.hljs)) { /* Do not include highlight.js in this rule because it has its own set of styles. */
+  background: var(--#{$prefix}secondary-bg);
+  border-radius: $border-radius;
+  padding-block: map.get($spacers, 8);
+  padding-inline: map.get($spacers, 10);
+}
+
 /* Collapse */
 .nb-collapse-toggle {
   @include transition($btn-transition);
@@ -1427,7 +1448,7 @@ textarea {
     display: inline-block; /* `transform` does not work on standard `inline` elements, like `span`, hence `inline-block`. */
   }
 
-  &:not([aria-expanded="true"]) > * {
+  &:not([aria-expanded="true"]) > .mdi-chevron-down {
     transform: rotate(-90deg); /* Rotate chevron icon when collapse is closed. */
   }
 }
@@ -1452,7 +1473,8 @@ textarea {
 $nb-drawer-closed-width: 0;
 $nb-drawer-open-width: 20rem; /* 320px */
 $sidenav-width-collapsed: 4rem; /* 64px */
-$sidenav-width-expanded: 15rem; /* 240px */
+$sidenav-width-expanded: ($sidenav-width-for-breakpoints / 16px) * 1rem; /* 16px is default browser conversion rate */
+/* we're converting to rem to have better web accessibility support */
 
 * {
   margin: 0;
@@ -1515,8 +1537,8 @@ body {
 /* Sidenav (a.k.a. navbar, nav menu, sidebar) */
 #sidenav {
   $sidenav-chevron-svg: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill-rule='evenodd' clip-rule='evenodd' d='M14.53 5.46967C14.8229 5.76256 14.8229 6.23744 14.53 6.53033L10.7928 10.2676C10.388 10.6724 10.1167 10.9444 9.92461 11.1708C9.73817 11.3904 9.67071 11.5171 9.6393 11.6137C9.55773 11.8648 9.55773 12.1352 9.6393 12.3863C9.67071 12.4829 9.73817 12.6096 9.92461 12.8292C10.1167 13.0556 10.388 13.3276 10.7928 13.7324L14.53 17.4697C14.8229 17.7626 14.8229 18.2374 14.53 18.5303C14.2371 18.8232 13.7623 18.8232 13.4694 18.5303L9.73211 14.7931L9.71059 14.7715C9.33288 14.3939 9.01761 14.0786 8.7811 13.8C8.53443 13.5094 8.32969 13.2098 8.21272 12.8498C8.03326 12.2975 8.03326 11.7025 8.21272 11.1502C8.32969 10.7902 8.53443 10.4906 8.7811 10.2C9.01761 9.9214 9.33287 9.60615 9.71058 9.22845L9.73211 9.20693L13.4694 5.46967C13.7623 5.17678 14.2371 5.17678 14.53 5.46967Z' fill='#{$nav-white-0}'/></svg>";
-  $sidenav-favorite-icon-svg: "<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M9.13784 4.72433C10.0591 2.8819 10.5197 1.96069 11.143 1.66508C11.6854 1.40782 12.3146 1.40782 12.8571 1.66508C13.4804 1.96069 13.941 2.88191 14.8622 4.72434L15.2215 5.4429C15.5059 6.01177 15.6481 6.29621 15.8562 6.51399C16.0403 6.70676 16.2612 6.86077 16.5058 6.96694C16.782 7.08689 17.0981 7.12201 17.7302 7.19225L18.0564 7.22849C20.2646 7.47385 21.3687 7.59653 21.8677 8.10561C22.3013 8.54802 22.5055 9.16639 22.4205 9.78001C22.3227 10.4861 21.5086 11.242 19.8805 12.7539L19.5361 13.0736C18.9804 13.5897 18.7025 13.8477 18.5419 14.1604C18.4 14.4368 18.3244 14.7424 18.3211 15.0531C18.3174 15.4046 18.4446 15.7671 18.699 16.4921V16.4921C19.5294 18.8587 19.9446 20.042 19.673 20.7338C19.4374 21.3339 18.927 21.7836 18.3021 21.9418C17.5816 22.1241 16.4767 21.5717 14.267 20.4668L13.4311 20.0489C12.9064 19.7865 12.644 19.6553 12.3688 19.6037C12.1251 19.558 11.8749 19.558 11.6312 19.6037C11.356 19.6553 11.0937 19.7865 10.5689 20.0489L9.73299 20.4668C7.52325 21.5717 6.41838 22.1241 5.69791 21.9418C5.07298 21.7836 4.56261 21.3339 4.32703 20.7338C4.05543 20.042 4.47062 18.8587 5.30101 16.4921V16.4921C5.55541 15.7671 5.68261 15.4046 5.67891 15.0531C5.67565 14.7424 5.60005 14.4368 5.45811 14.1604C5.29751 13.8477 5.01964 13.5897 4.46388 13.0736L4.11954 12.7539C2.49141 11.242 1.67734 10.4861 1.57953 9.78001C1.49453 9.16639 1.69867 8.54802 2.13229 8.10561C2.63127 7.59653 3.73538 7.47385 5.9436 7.22849L6.26976 7.19225C6.90189 7.12201 7.21795 7.08689 7.49423 6.96694C7.73879 6.86077 7.95965 6.70676 8.14383 6.51399C8.35189 6.29621 8.49411 6.01178 8.77855 5.44291L9.13784 4.72433Z' fill='none' stroke='#{$nav-white-0}' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>";
-  $sidenav-favorite-icon-svg-filled: "<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M9.13784 4.72433C10.0591 2.8819 10.5197 1.96069 11.143 1.66508C11.6854 1.40782 12.3146 1.40782 12.8571 1.66508C13.4804 1.96069 13.941 2.88191 14.8622 4.72434L15.2215 5.4429C15.5059 6.01177 15.6481 6.29621 15.8562 6.51399C16.0403 6.70676 16.2612 6.86077 16.5058 6.96694C16.782 7.08689 17.0981 7.12201 17.7302 7.19225L18.0564 7.22849C20.2646 7.47385 21.3687 7.59653 21.8677 8.10561C22.3013 8.54802 22.5055 9.16639 22.4205 9.78001C22.3227 10.4861 21.5086 11.242 19.8805 12.7539L19.5361 13.0736C18.9804 13.5897 18.7025 13.8477 18.5419 14.1604C18.4 14.4368 18.3244 14.7424 18.3211 15.0531C18.3174 15.4046 18.4446 15.7671 18.699 16.4921V16.4921C19.5294 18.8587 19.9446 20.042 19.673 20.7338C19.4374 21.3339 18.927 21.7836 18.3021 21.9418C17.5816 22.1241 16.4767 21.5717 14.267 20.4668L13.4311 20.0489C12.9064 19.7865 12.644 19.6553 12.3688 19.6037C12.1251 19.558 11.8749 19.558 11.6312 19.6037C11.356 19.6553 11.0937 19.7865 10.5689 20.0489L9.73299 20.4668C7.52325 21.5717 6.41838 22.1241 5.69791 21.9418C5.07298 21.7836 4.56261 21.3339 4.32703 20.7338C4.05543 20.042 4.47062 18.8587 5.30101 16.4921V16.4921C5.55541 15.7671 5.68261 15.4046 5.67891 15.0531C5.67565 14.7424 5.60005 14.4368 5.45811 14.1604C5.29751 13.8477 5.01964 13.5897 4.46388 13.0736L4.11954 12.7539C2.49141 11.242 1.67734 10.4861 1.57953 9.78001C1.49453 9.16639 1.69867 8.54802 2.13229 8.10561C2.63127 7.59653 3.73538 7.47385 5.9436 7.22849L6.26976 7.19225C6.90189 7.12201 7.21795 7.08689 7.49423 6.96694C7.73879 6.86077 7.95965 6.70676 8.14383 6.51399C8.35189 6.29621 8.49411 6.01178 8.77855 5.44291L9.13784 4.72433Z' fill='#{$nav-white-0}' stroke='#{$nav-white-0}' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>";
+  $sidenav-favorite-icon-svg: "<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M11.4189 0.599609C11.8569 0.444608 12.3438 0.470222 12.7656 0.676758C13.1382 0.85937 13.3661 1.1983 13.5303 1.48926C13.7037 1.79665 13.8896 2.21226 14.1113 2.7041L16.4121 7.80957H20.7764C21.3853 7.80957 21.8928 7.80944 22.2793 7.84277C22.6369 7.87368 23.0791 7.9417 23.4111 8.22754C23.8327 8.59073 24.0486 9.13456 23.9902 9.68359C23.9441 10.116 23.6675 10.4639 23.4268 10.7266C23.1665 11.0102 22.7947 11.3503 22.3486 11.7588L18.7549 15.0479L20.415 19.7119C20.6345 20.3287 20.8155 20.837 20.9189 21.2324C21.0129 21.5918 21.1024 22.0532 20.9238 22.4707C20.7004 22.993 20.2266 23.3717 19.6621 23.4785C19.2108 23.5637 18.7714 23.3814 18.4346 23.2158C18.064 23.0337 17.5972 22.7531 17.0312 22.4131L12 19.3887L6.96875 22.4131C6.40288 22.7531 5.93606 23.0337 5.56543 23.2158C5.22855 23.3813 4.78918 23.5638 4.33789 23.4785C3.77339 23.3717 3.29963 22.993 3.07617 22.4707C2.89765 22.0532 2.9871 21.5918 3.08105 21.2324C3.18447 20.837 3.36558 20.3286 3.58496 19.7119L5.24414 15.0479L1.65137 11.7588C1.20524 11.3502 0.833466 11.0103 0.573242 10.7266C0.332409 10.4639 0.0559191 10.116 0.00976562 9.68359C-0.048592 9.13464 0.168374 8.59073 0.589844 8.22754L0.717773 8.13086C1.02957 7.92557 1.40768 7.86983 1.7207 7.84277C2.10716 7.80943 2.61462 7.80957 3.22363 7.80957H7.58789L9.88867 2.7041C10.1103 2.21236 10.2963 1.79663 10.4697 1.48926C10.6339 1.19837 10.862 0.859412 11.2344 0.676758L11.4189 0.599609ZM12.0918 1.97266C12.0325 1.94907 11.9664 1.94881 11.9072 1.97266C11.8903 1.99137 11.8406 2.05132 11.7588 2.19629C11.6253 2.43288 11.4699 2.77672 11.2363 3.29492L8.74121 8.83203C8.62278 9.09452 8.35775 9.26367 8.06641 9.26367H3.22363C2.58589 9.26367 2.15619 9.26459 1.84961 9.29102C1.65621 9.30775 1.57052 9.33069 1.54395 9.33887C1.4994 9.38481 1.47564 9.44621 1.47656 9.50977C1.4907 9.53411 1.53727 9.6094 1.66699 9.75098C1.87346 9.97601 2.18793 10.2644 2.65527 10.6924L6.60254 14.3066C6.81725 14.5033 6.89362 14.8073 6.79688 15.0801L4.97656 20.1943C4.74783 20.8372 4.59263 21.2751 4.50879 21.5957C4.45591 21.798 4.44774 21.8941 4.44629 21.9258C4.47718 21.982 4.52974 22.0236 4.5918 22.042C4.62177 22.0343 4.71557 22.0082 4.90723 21.9141C5.20782 21.7664 5.61016 21.5255 6.2002 21.1709L11.6162 17.916C11.8518 17.7744 12.1481 17.7744 12.3838 17.916L17.7998 21.1709C18.39 21.5256 18.7921 21.7664 19.0928 21.9141C19.2823 22.0072 19.3761 22.0339 19.4072 22.042C19.4695 22.0238 19.5216 21.982 19.5527 21.9258C19.5512 21.8941 19.5441 21.798 19.4912 21.5957C19.4073 21.2751 19.2522 20.8372 19.0234 20.1943L17.2031 15.0801C17.1064 14.8074 17.183 14.5034 17.3975 14.3066L21.3447 10.6924C21.8119 10.2645 22.1265 9.97601 22.333 9.75098C22.4617 9.61056 22.5079 9.53469 22.5225 9.50977C22.5233 9.44589 22.5 9.38489 22.4551 9.33887C22.4274 9.3304 22.3416 9.30754 22.1504 9.29102C21.8438 9.2646 21.414 9.26367 20.7764 9.26367H15.9336C15.6422 9.26359 15.3771 9.09454 15.2588 8.83203L12.7637 3.29492C12.53 2.7766 12.3747 2.43289 12.2412 2.19629C12.1584 2.04951 12.108 1.99058 12.0918 1.97266Z' fill='#{$nav-white-0}'/></svg>";
+  $sidenav-favorite-icon-svg-filled: "<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M11.4189 0.599457C11.8569 0.444456 12.3438 0.470069 12.7656 0.676605C13.1383 0.859207 13.3671 1.19809 13.5312 1.48911C13.7046 1.79644 13.8897 2.21229 14.1113 2.70395L16.4121 7.80942H20.7773C21.386 7.80942 21.8929 7.80931 22.2793 7.84262C22.6369 7.87353 23.0791 7.94253 23.4111 8.22836C23.8325 8.59154 24.0496 9.13456 23.9912 9.68344C23.9451 10.1159 23.6676 10.4637 23.4268 10.7264C23.1665 11.0101 22.7947 11.3502 22.3486 11.7586L18.7559 15.0477L20.415 19.7118C20.6345 20.3285 20.8155 20.8368 20.9189 21.2323C21.0129 21.5917 21.1024 22.053 20.9238 22.4706C20.7003 22.9929 20.2267 23.3716 19.6621 23.4784C19.2108 23.5635 18.7714 23.3812 18.4346 23.2157C18.0641 23.0336 17.598 22.7529 17.0322 22.4129L12 19.3885L6.96875 22.4129C6.40284 22.753 5.93608 23.0336 5.56543 23.2157C5.22855 23.3811 4.78918 23.5636 4.33789 23.4784C3.77348 23.3715 3.29961 22.9928 3.07617 22.4706C2.89773 22.0531 2.98711 21.5916 3.08105 21.2323C3.18447 20.8368 3.36655 20.3284 3.58594 19.7118L5.24414 15.0477L1.65137 11.7586C1.20515 11.35 0.833472 11.0102 0.573242 10.7264C0.33238 10.4637 0.0558689 10.1159 0.00976562 9.68344C-0.0485905 9.1345 0.168395 8.59155 0.589844 8.22836L0.717773 8.13071C1.02957 7.92542 1.40768 7.86968 1.7207 7.84262C2.10718 7.80926 2.61454 7.80942 3.22363 7.80942H7.58789L9.88867 2.70395C10.1103 2.21223 10.2963 1.79647 10.4697 1.48911C10.6339 1.19814 10.8628 0.859214 11.2354 0.676605L11.4189 0.599457Z' fill='#{$nav-white-0}'/></svg>";
   $sidenav-favorite-size: 1.25rem; /* 20px */
   $sidenav-link-gap: map.get($spacers, 5);
   $sidenav-link-segment-icon-height: 5.625rem; /* 90px */
@@ -1547,10 +1569,11 @@ body {
   @mixin filter-nav-orange-0 {
     /*
      * CSS workaround to change element color (including its `background-image`)
-     * from white to any given color, `$orange-0` in this case.
+     * from white to any given color, `$orange-0-dark` in this case. Though it
+     * evaluates to `#ff9938`, not the exact `#ff9933`, it is _good enough_.
      * Generated with: https://codepen.io/jumarjuaton/full/mdJYWYq
      */
-    filter: invert(50%) sepia(99%) saturate(1810%) hue-rotate(3deg) brightness(93%) contrast(94%);
+    filter: invert(57%) sepia(100%) saturate(478%) hue-rotate(336deg) brightness(141%) contrast(101%);
   }
 
   @mixin filter-nav-gray-3 {
@@ -1558,7 +1581,7 @@ body {
      * CSS workaround to change element color (including its `background-image`) from white to `$nav-gray-3`.
      * Generated with: https://codepen.io/jumarjuaton/full/mdJYWYq
      */
-    filter: invert(39%) sepia(6%) saturate(1228%) hue-rotate(166deg) brightness(54%) contrast(86%);
+    filter: invert(69%) sepia(15%) saturate(1%) hue-rotate(311deg) brightness(223%) contrast(98%);
   }
 
   @include box-shadow(0.0625rem 0 0 0 $navy-2, $box-shadow);
@@ -1655,19 +1678,20 @@ body {
     min-width: $sidenav-link-width;
 
     /*
-     * FIXME(norbert-mieczkowski-codilime): remove this Firefox hack when it fixes its bug: https://bugzilla.mozilla.org/show_bug.cgi?id=995020.
+     * FIXME(norbert-mieczkowski-codilime): remove this hack when browsers fix their bug: https://bugzilla.mozilla.org/show_bug.cgi?id=995020.
+     *   Bug has already been observed in Firefox and Safari, Chrome is confirmed to be _clean_.
      *   Workaround based on: https://www.answeroverflow.com/m/1353731321620598945.
      */
-    @include nb-firefox-only {
-      flex-direction: row;
-      padding-block: map.get($spacers, 0);
-      padding-inline: map.get($spacers, 20);
-      writing-mode: vertical-lr;
+    /* hack */
+    flex-direction: row;
+    padding-block: map.get($spacers, 0);
+    padding-inline: map.get($spacers, 20);
+    writing-mode: vertical-lr;
 
-      > * {
-        writing-mode: horizontal-tb;
-      }
+    > * {
+      writing-mode: horizontal-tb;
     }
+    /* endhack */
   }
 
   .nb-sidenav-link {
@@ -1683,7 +1707,7 @@ body {
     width: $sidenav-link-width;
 
     &-active {
-      color: $orange-0;
+      color: $orange-0-dark;
     }
 
     &::before { /* Segment icon */
@@ -1818,7 +1842,7 @@ body {
     }
 
     &:has(+ .nb-sidenav-flyout .nb-sidenav-link-active) { /* When list item contains an active link */
-      color: $orange-0;
+      color: $orange-0-dark;
 
       > :first-child, /* Nav menu tab icon */
       > :last-child::after { /* Chevron icon */
@@ -2233,11 +2257,11 @@ ul.nb-software-image-hierarchy {
 
 ul.nb-tree-hierarchy {
   list-style-type: none;
-  padding-block-start: map.get($spacers, 0);
+  padding-inline-start: map.get($spacers, 0);
 
   ul {
     list-style-type: "↳ ";
-    padding-block-start: map.get($spacers, 4);
+    padding-inline-start: 1.125rem; /* 18px */
   }
 }
 
@@ -2436,3 +2460,12 @@ pre code.hljs {
     font-size: 1em;
   }
 }
+
+.nb-lg-max-width {
+  max-width: 960px;
+}
+
+/* Workaround to fix `d-none` being overridden by `d-md-flex` (and possibly other `d-{display}` classes). */
+.d-none {
+  display: none !important;
+}

nautobot/users/templates/users/profile.html

@@ -2,16 +2,49 @@
 {% load helpers %}
 
 {% block usercontent %}
-    <small class="text-secondary">User login</small>
-    <h5>{{ request.user.username }}</h5>
-    <small class="text-secondary">Full name</small>
-    <h5>{{ request.user.first_name }} {{ request.user.last_name }}</h5>
-    <small class="text-secondary">Email</small>
-    <h5>{{ request.user.email }}</h5>
-    <small class="text-secondary">Registered</small>
-    <h5>{{ request.user.date_joined }}</h5>
-    <small class="text-secondary">Groups</small>
-    <h5>{{ request.user.groups.all|join:', ' }}</h5>
-    <small class="text-secondary">Admin access</small>
-    <h5>{{ request.user.is_staff|yesno|capfirst }}</h5>
+    <div class="row align-content-start flex-fill">
+        <div class="col-md-8 offset-md-2">
+            <div class="card">
+                <div class="card-header">
+                    <strong>User Profile</strong>
+                </div>
+                <div class="collapse show">
+                    <table class="table table-hover attr-table">
+                        <tr>
+                            <td>User login</td>
+                            <td>{{ request.user.username }}</td>
+                        </tr>
+                        <tr>
+                            <td>Full name</td>
+                            {% if request.user.first_name or request.user.last_name %}
+                                <td>{{ request.user.first_name }} {{ request.user.last_name }}</td>
+                            {% else %}
+                                <td>{{ None|placeholder }}</td>
+                            {% endif %}
+                        </tr>
+                        <tr>
+                            <td>Email</td>
+                            <td>{{ request.user.email|hyperlinked_email }}</td>
+                        </tr>
+                        <tr>
+                            <td>Registered</td>
+                            <td>{{ request.user.date_joined|date:settings.SHORT_DATETIME_FORMAT }}</td>
+                        </tr>
+                        <tr>
+                            <td>Groups</td>
+                            <td>{{ request.user.groups.all|join:', '|placeholder }}</td>
+                        </tr>
+                        <tr>
+                            <td>Admin access</td>
+                            <td>{{ request.user.is_staff|render_boolean }}</td>
+                        </tr>
+                        <tr>
+                            <td>Superuser access</td>
+                            <td>{{ request.user.is_superuser|render_boolean }}</td>
+                        </tr>
+                    </table>
+                </div>
+            </div>
+        </div>
+    </div>
 {% endblock %}

nautobot/users/templates/users/sessionkey_delete.html

@@ -1,4 +1,4 @@
-{% extends 'generic/object_delete.html' %}
+{% extends 'generic/object_destroy.html' %}
 
 {% block message %}
     <p>Are you sure you want to delete your session key?</p>

nautobot/users/tests/test_api.py

@@ -348,6 +348,10 @@ class TokenTest(APIViewTestCases.APIViewTestCase):
 
 class ObjectPermissionTest(APIViewTestCases.APIViewTestCase):
     model = ObjectPermission
+    validation_excluded_fields = [
+        "groups",  # M2M field, excluded by default
+        "users",  # M2M field, excluded by default
+    ]
 
     @classmethod
     def setUpTestData(cls):

nautobot/users/views.py

@@ -64,6 +64,7 @@ class LoginView(View):
             self.template_name,
             {
                 "form": form,
+                "title": "Login",
             },
         )
 
@@ -91,6 +92,7 @@ class LoginView(View):
             self.template_name,
             {
                 "form": form,
+                "title": "Login",
             },
         )
 
@@ -402,7 +404,7 @@ class TokenDeleteView(GenericView):
 
         return render(
             request,
-            "generic/object_delete.html",
+            "generic/object_destroy.html",
             {
                 "obj": token,
                 "obj_type": token._meta.verbose_name,
@@ -421,7 +423,7 @@ class TokenDeleteView(GenericView):
 
         return render(
             request,
-            "generic/object_delete.html",
+            "generic/object_destroy.html",
             {
                 "obj": token,
                 "obj_type": token._meta.verbose_name,

nautobot/virtualization/models.py

@@ -1,6 +1,6 @@
 from django.contrib.contenttypes.models import ContentType
 from django.core.exceptions import ValidationError
-from django.db import models, transaction
+from django.db import models
 
 from nautobot.core.constants import CHARFIELD_MAX_LENGTH
 from nautobot.core.models import BaseManager
@@ -382,73 +382,6 @@ class VMInterface(PrimaryModel, BaseInterface):
 
         return super().to_objectchange(action, related_object=virtual_machine, **kwargs)
 
-    def add_ip_addresses(
-        self,
-        ip_addresses,
-        is_source=False,
-        is_destination=False,
-        is_default=False,
-        is_preferred=False,
-        is_primary=False,
-        is_secondary=False,
-        is_standby=False,
-    ):
-        """Add one or more IPAddress instances to this interface's `ip_addresses` many-to-many relationship.
-
-        Args:
-            ip_addresses (:obj:`list` or `IPAddress`): Instance of `nautobot.ipam.models.IPAddress` or list of `IPAddress` instances.
-            is_source (bool, optional): Is source address. Defaults to False.
-            is_destination (bool, optional): Is destination address. Defaults to False.
-            is_default (bool, optional): Is default address. Defaults to False.
-            is_preferred (bool, optional): Is preferred address. Defaults to False.
-            is_primary (bool, optional): Is primary address. Defaults to False.
-            is_secondary (bool, optional): Is secondary address. Defaults to False.
-            is_standby (bool, optional): Is standby address. Defaults to False.
-
-        Returns:
-            Number of instances added.
-        """
-        if not isinstance(ip_addresses, (tuple, list)):
-            ip_addresses = [ip_addresses]
-        with transaction.atomic():
-            for ip in ip_addresses:
-                instance = self.ip_addresses.through(
-                    ip_address=ip,
-                    vm_interface=self,
-                    is_source=is_source,
-                    is_destination=is_destination,
-                    is_default=is_default,
-                    is_preferred=is_preferred,
-                    is_primary=is_primary,
-                    is_secondary=is_secondary,
-                    is_standby=is_standby,
-                )
-                instance.validated_save()
-        return len(ip_addresses)
-
-    add_ip_addresses.alters_data = True
-
-    def remove_ip_addresses(self, ip_addresses):
-        """Remove one or more IPAddress instances from this interface's `ip_addresses` many-to-many relationship.
-
-        Args:
-            ip_addresses (:obj:`list` or `IPAddress`): Instance of `nautobot.ipam.models.IPAddress` or list of `IPAddress` instances.
-
-        Returns:
-            Number of instances removed.
-        """
-        count = 0
-        if not isinstance(ip_addresses, (tuple, list)):
-            ip_addresses = [ip_addresses]
-        with transaction.atomic():
-            for ip in ip_addresses:
-                qs = self.ip_addresses.through.objects.filter(ip_address=ip, vm_interface=self)
-                deleted_count, _ = qs.delete()
-                count += deleted_count
-        return count
-
-    remove_ip_addresses.alters_data = True
-
     @property
     def parent(self):
         return self.virtual_machine

nautobot/virtualization/navigation.py

@@ -4,12 +4,13 @@ from nautobot.core.apps import (
     NavMenuItem,
     NavMenuTab,
 )
+from nautobot.core.ui.choices import NavigationIconChoices, NavigationWeightChoices
 
 menu_items = (
     NavMenuTab(
         name="Virtualization",
-        icon="cloud-upload",
-        weight=400,
+        icon=NavigationIconChoices.VIRTUALIZATION,
+        weight=NavigationWeightChoices.VIRTUALIZATION,
         groups=(
             NavMenuGroup(
                 name="Virtual Machines",

nautobot/virtualization/templates/virtualization/virtual_machine_vminterface_delete.html

@@ -1,3 +1,3 @@
-{% extends 'generic/object_delete.html' %}
+{% extends 'generic/object_destroy.html' %}
 
 {% block message_extra %}This would also delete any/all child VMInterfaces of this VMInterface.{% endblock %}

nautobot/virtualization/templates/virtualization/virtualmachine.html

@@ -1,2 +1,2 @@
-{% extends 'virtualization/virtualmachine_retrieve.html' %}
+{% extends 'generic/object_retrieve.html' %}
 {% comment %}3.0 TODO: remove this template, which only exists for backward compatibility with 2.4 and earlier{% endcomment %}

nautobot/virtualization/templates/virtualization/virtualmachine_list.html

@@ -2,12 +2,12 @@
 
 {% block bulk_buttons %}
     {% if perms.virtualization.change_virtualmachine %}
-        <div class="btn-group">
+        <div class="dropdown d-inline-flex">
             <button type="button" class="btn btn-sm btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                 <span class="mdi mdi-plus-thick" aria-hidden="true"></span> Add Components <span class="mdi mdi-chevron-down"></span>
             </button>
             <ul class="dropdown-menu">
-                {% if perms.virtualization.add_vminterface %}<li><a href="{% url 'virtualization:virtualmachine_bulk_add_vminterface' %}{% if request.GET %}?{{ request.GET.urlencode }}{% endif %}" class="formaction">Interfaces</a></li>{% endif %}
+                {% if perms.virtualization.add_vminterface %}<li><a href="{% url 'virtualization:virtualmachine_bulk_add_vminterface' %}{% if request.GET %}?{{ request.GET.urlencode }}{% endif %}" class="dropdown-item formaction">Interfaces</a></li>{% endif %}
             </ul>
         </div>
     {% endif %}

nautobot/virtualization/templates/virtualization/virtualmachine_update.html

@@ -31,7 +31,9 @@
             {% render_field form.primary_ip4 %}
             {% render_field form.primary_ip6 %}
             {% render_field form.software_version %}
-            <div class="mb-10 d-flex justify-content-center" id="software_version_image_container" style="display:none">
+            <div class="mb-10 d-flex justify-content-center"
+                 id="software_version_image_container"
+                 style="display:none !important">{# !important is required to override d-flex #}
                 <div class="col-lg-3"></div>
                 <div class="col-lg-9">
                     <span class="form-text">

nautobot/virtualization/tests/test_api.py

@@ -281,6 +281,9 @@ class VMInterfaceTest(APIViewTestCases.APIViewTestCase):
         "description": "New description",
     }
     choices_fields = ["mode"]
+    validation_excluded_fields = [
+        "tagged_vlans",  # M2M field, excluded by default
+    ]
 
     @classmethod
     def setUpTestData(cls):