From e20c8f8634c1cbed4519ff97cc35700e7611997f Mon Sep 17 00:00:00 2001
From: Phil Renaud <phil@riotindustries.com>
Date: Wed, 5 Jun 2024 15:06:27 -0400
Subject: [PATCH] A few more style tweaks and the beginnings of a
 recent-searches list

---
 ui/app/components/global-search.hbs           | 16 ++++--
 ui/app/initializers/history.js                |  5 ++
 .../components/global-search-dropdown.scss    | 50 +++++++++++--------
 .../components/global-search-test.js          |  5 ++
 ui/tests/unit/initializers/history-test.js    |  5 ++
 ui/tests/unit/services/history-test.js        |  5 ++
 6 files changed, 63 insertions(+), 23 deletions(-)

diff --git a/ui/app/components/global-search.hbs b/ui/app/components/global-search.hbs
index 431e9332191c..0d8970ca9152 100644
--- a/ui/app/components/global-search.hbs
+++ b/ui/app/components/global-search.hbs
@@ -35,18 +35,28 @@
 >
   {{#if this.expanded}}
     {{log "EXPANDED"}}
+    {{#if this.results}}
     <div class="results">
       TODO: Search results here...
     </div>
+    {{else}}
+    <div class="recent-searches">
+      <h3>Recent Searches:</h3>
+      TODO: Recent searches here...
+    </div>
+    {{/if}}
     <div class="recents">
-      <h3>Jump to:</h3>
+      <h3>Recently Visited:</h3>
       {{#each this.history.recommendations as |recent|}}
         <div class="recent">
           <LinkTo
             @route="jobs.index"
           >
-            <header>{{recent.entityType}}</header>
-            <h4>{{or recent.label recent.identifier}}</h4>
+            {{!-- <header>{{recent.entityType}}</header> --}}
+            <h4>
+              {{or recent.label recent.identifier}}
+              <small>{{recent.entityType}}</small>
+            </h4>
             <footer>
               <em>
                 {{#if recent.reason}}
diff --git a/ui/app/initializers/history.js b/ui/app/initializers/history.js
index 464a827dbd22..527acbb23363 100644
--- a/ui/app/initializers/history.js
+++ b/ui/app/initializers/history.js
@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
 // @ts-check
 
 export function initialize(application) {
diff --git a/ui/app/styles/components/global-search-dropdown.scss b/ui/app/styles/components/global-search-dropdown.scss
index 33f71724f986..88249f8c0f58 100644
--- a/ui/app/styles/components/global-search-dropdown.scss
+++ b/ui/app/styles/components/global-search-dropdown.scss
@@ -71,7 +71,7 @@
   justify-content: center;
   align-items: center;
   .mega-search-input {
-    width: 30em;
+    width: 350px;
   }
 }
 
@@ -79,55 +79,58 @@
   position: fixed;
   background: #fff;
   z-index: 300;
-  width: 100vw;
-  left: 0;
-  top: 0;
-  height: 0;
+  width: 800px;
+  left: calc(50% - 400px);
+  top: -30vh;
+  height: 30vh;
   overflow: hidden;
   z-index: $z-mega-menu;
-  transition: height 0.2s ease-out, box-shadow 0.5s ease-out;
+  transition: top 0.1s ease-out, box-shadow 0.5s ease-out;
+  // transition: box-shadow 0.5s ease-out;
   box-shadow: 2px 2px 12px 3000px rgb(0, 0, 0, 0);
   display: grid;
   grid-template-rows: 1fr auto;
   gap: 0.5rem;
   color: $black;
-  padding-left: 2rem;
-  padding-right: 2rem;
+  border-radius: 0 0 0.5rem 0.5rem;
+  overflow: auto;
 
   &.expanded {
     // animation-name: megaSearchSlideIn;
     // animation-duration: 2s;
     // animation-fill-mode: both;
-    height: 30vh;
-    padding-top: 50px; // offset search box
+    // height: 30vh;
+    top: 0;
+    padding: 50px; // offset search box
     box-shadow: 2px 2px 12px 3000px rgb(0, 0, 0, 0.8);
   }
 
   .recents {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-    width: 100%;
+    // grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+    // width: 100%;
     gap: 0.5rem;
     padding: 0.5rem;
 
     h3 {
       font-weight: bold;
       font-size: 1.5rem;
-      grid-column: -1 / 1;
+      // grid-column: -1 / 1;
     }
 
     .recent a {
-      border-radius: 0.25rem;
-      padding: 0.5rem;
+      // border-radius: 0.25rem;
+      // padding: 0.5rem;
       // background-color: $grey-blue;
-      background-color: var(--token-color-surface-faint);
+      // background-color: var(--token-color-surface-faint);
       display: flex;
       flex-direction: column;
       justify-content: space-between;
-      height: 100%;
+      // height: 100%;
       color: $black;
-      border: 1px solid #ddd;
+      // border: 1px solid #ddd;
       transition: 0.2s;
+      text-decoration: none;
 
       &:hover {
         background-color: var(--token-color-surface-strong);
@@ -138,9 +141,16 @@
         font-weight: bold;
         flex-grow: 1;
         display: flex;
-        // align-items: center;
+        gap: 0.25rem;
+        align-items: baseline;
+        small {
+          font-size: 0.75rem;
+          font-weight: normal;
+          font-style: italic;
+          opacity: 0.75;
+        }
       }
-      header,
+      // header,
       footer {
         font-size: 0.75rem;
       }
diff --git a/ui/tests/integration/components/global-search-test.js b/ui/tests/integration/components/global-search-test.js
index 629d5ee6cc07..5f5c728217f0 100644
--- a/ui/tests/integration/components/global-search-test.js
+++ b/ui/tests/integration/components/global-search-test.js
@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 import { render } from '@ember/test-helpers';
diff --git a/ui/tests/unit/initializers/history-test.js b/ui/tests/unit/initializers/history-test.js
index e36c08b7f86a..261c5d0f1079 100644
--- a/ui/tests/unit/initializers/history-test.js
+++ b/ui/tests/unit/initializers/history-test.js
@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
 import Application from '@ember/application';
 
 import config from 'nomad-ui/config/environment';
diff --git a/ui/tests/unit/services/history-test.js b/ui/tests/unit/services/history-test.js
index 1ceef6260d5e..b973d8da6e00 100644
--- a/ui/tests/unit/services/history-test.js
+++ b/ui/tests/unit/services/history-test.js
@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
 import { module, test } from 'qunit';
 import { setupTest } from 'ember-qunit';