Hackweek 2025 Policy Wizard

ui/app/styles/components/popup-menu.scss

@@ -9,8 +9,7 @@
  */
 
 // Popup menu no longer exists, but these styles are still used in some places
-.popup-menu-content,
-.ember-power-select-options {
+.popup-menu-content {
   border-radius: size_variables.$radius;
   margin: -2px 0 0 0;
 
@@ -38,8 +37,6 @@
 
   button.link,
   a,
-  .ember-power-select-option,
-  .ember-power-select-option[aria-current='true'],
   .menu-item {
     background: transparent;
     box-shadow: none;
@@ -69,8 +66,6 @@
   }
 
   button.link,
-  .ember-power-select-option,
-  .ember-power-select-option[aria-current='true'],
   a {
     background-color: color_variables.$white;
     color: color_variables.$grey-darkest;
@@ -155,34 +150,6 @@
   }
 }
 
-.ember-basic-dropdown-content {
-  background-color: transparent;
-
-  &--left.popup-menu {
-    margin: 0px 0 0 -8px;
-  }
-
-  &--below {
-    &.ember-basic-dropdown--transitioning-in {
-      animation: drop-fade-above 0.15s;
-    }
-
-    &.ember-basic-dropdown--transitioning-out {
-      animation: drop-fade-above 0.15s reverse;
-    }
-  }
-
-  &--above {
-    &.ember-basic-dropdown--transitioning-in {
-      animation: drop-fade-below 0.15s;
-    }
-
-    &.ember-basic-dropdown--transitioning-out {
-      animation: drop-fade-below 0.15s reverse;
-    }
-  }
-}
-
 // Match HDS styling for namespace ink
 a.ns-dropdown-item {
   color: var(--token-color-foreground-primary);

ui/app/styles/components/search-select.scss

@@ -8,97 +8,6 @@
  * SPDX-License-Identifier: BUSL-1.1
  */
 
-.ember-power-select-dropdown {
-  background: transparent;
-  box-shadow: none;
-  overflow: visible;
-
-  &.ember-power-select-dropdown.ember-basic-dropdown-content--below {
-    border: 0;
-  }
-}
-
-.ember-power-select-trigger {
-  border: 0;
-  border-radius: size_variables.$radius;
-  padding-right: 0;
-
-  &--active {
-    outline-width: 3px;
-    outline-offset: -2px;
-  }
-}
-
-.ember-power-select-trigger:focus,
-.ember-power-select-trigger--active {
-  border: 0;
-}
-
-.ember-power-select-status-icon {
-  display: none;
-}
-
-.ember-power-select-search {
-  left: 0;
-  padding: 0;
-  position: absolute;
-  top: 0;
-  right: 0;
-  transform: translateY(-100%);
-  z-index: -1;
-
-  &::after {
-    background: color_variables.$white;
-    bottom: size_variables.$spacing-4;
-    content: '';
-    left: size_variables.$spacing-4 + size_variables.$spacing-24;
-    position: absolute;
-    right: size_variables.$spacing-4;
-    top: size_variables.$spacing-4;
-    z-index: -1;
-  }
-}
-
-.ember-power-select-search-input {
-  background: transparent;
-  border: 0;
-  padding: size_variables.$spacing-4 size_variables.$spacing-12;
-  padding-left: size_variables.$spacing-4 + size_variables.$spacing-24;
-}
-
-div > .ember-power-select-options {
-  background: color_variables.$white;
-  border: box-shadow_variables.$base-border;
-  box-shadow: box-shadow_variables.$box-shadow-middle;
-  margin: -4px size_variables.$spacing-8 0;
-  padding: size_variables.$spacing-4 0;
-
-  .ember-power-select-option,
-  .ember-power-select-option[aria-current='true'] {
-    align-items: center;
-    display: flex;
-    justify-content: space-between;
-  }
-
-  .ember-power-select-option[aria-current='true'] {
-    background-color: color_variables.$ui-gray-050;
-    color: color_variables.$ui-gray-900;
-  }
-
-  .ember-power-select-option--no-matches-message {
-    color: color_variables.$grey;
-    font-size: size_variables.$size-8;
-    font-weight: font_variables.$font-weight-semibold;
-    text-transform: uppercase;
-
-    &:hover,
-    &:focus {
-      background: transparent;
-      color: color_variables.$grey;
-    }
-  }
-}
-
 .search-select-list-item {
   align-items: center;
   display: flex;
@@ -126,14 +35,6 @@ div > .ember-power-select-options {
   font-size: size_variables.$size-8;
 }
 
-.ember-power-select-dropdown.ember-basic-dropdown-content {
-  animation: none;
-
-  .ember-power-select-options {
-    animation: drop-fade-above 0.15s;
-  }
-}
-
 .search-select .search-icon {
   position: absolute;
   width: 20px;

ui/app/styles/core/buttons.scss

@@ -390,3 +390,19 @@ a.button.disabled {
     }
   }
 }
+
+.policy-wizard {
+  background: linear-gradient(
+    135deg,
+    color_variables.$blue,
+    hsl(237, 100%, 71%)
+  ); // only use case for purple in the app. define here instead of utils/color_var
+  animation: env-banner-color-rotate 8s infinite linear alternate;
+  color: color_variables.$white;
+
+  .notification {
+    background-color: transparent;
+    line-height: 2;
+    padding: 0 size_variables.$spacing-12;
+  }
+}

ui/app/templates/vault/cluster.hbs

@@ -71,6 +71,13 @@
     />
   {{/if}}
 </div>
+
+{{! HACKWEEK }}
+{{! template-lint-disable no-inline-styles}}
+<div style="position: fixed; top: 1%; right: 1%; z-index: 1000; ">
+  <PolicyBuilder />
+</div>
+
 <div class="global-flash">
   {{#each this.flashMessages.queue as |flash|}}
     <FlashMessage data-test-flash-message={{true}} @flash={{flash}} as |customComponent flash close|>

ui/app/utils/policy-path-map.ts

@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import apiPath from './api-path';
+
+const API_PATHS = {
+  kvv2: {
+    overview: [apiPath`${'backend'}/data/${'path'}`, apiPath`${'backend'}/metadata/${'path'}`],
+    subkeys: [apiPath`${'backend'}/subkeys/${'path'}`, apiPath`${'backend'}/data/${'path'}`],
+  },
+  secretsList: [apiPath`${'backend'}/`],
+};
+
+// Regex-based route matching - more flexible for parent/child relationships
+const ROUTE_PATTERNS: Array<{ pattern: RegExp; paths: ReturnType<typeof apiPath>[] }> = [
+  // KV v2 routes - matches any kv secret route
+  {
+    pattern: /^vault\.cluster\.secrets\.backend\.kv\.secret\.patch/,
+    paths: API_PATHS.kvv2.subkeys,
+  },
+  {
+    pattern: /^vault\.cluster\.secrets\.backend\.kv/,
+    paths: API_PATHS.kvv2.overview,
+  },
+  {
+    pattern: /^vault\.cluster\.secrets\./,
+    paths: API_PATHS.secretsList,
+  },
+];
+
+export default function mapApiPathToRoute(routeName: string): ReturnType<typeof apiPath>[] {
+  // Try pattern matching
+  for (const { pattern, paths } of ROUTE_PATTERNS) {
+    if (pattern.test(routeName)) {
+      return paths;
+    }
+  }
+
+  return [];
+}