Better Explore Groups view

6 files changed, 137 insertions, 41 deletions

diff --git a/app/assets/javascripts/dispatcher.js b/app/assets/javascripts/dispatcher.js
index 15fe87f21ea..0bdce52cc89 100644
--- a/app/assets/javascripts/dispatcher.js
+++ b/app/assets/javascripts/dispatcher.js
@@ -44,6 +44,7 @@ import GroupsList from './groups_list';
 import ProjectsList from './projects_list';
 import MiniPipelineGraph from './mini_pipeline_graph_dropdown';
 import BlobLinePermalinkUpdater from './blob/blob_line_permalink_updater';
+import Landing from './landing';
 import BlobForkSuggestion from './blob/blob_fork_suggestion';
 import UserCallout from './user_callout';
 import { ProtectedTagCreate, ProtectedTagEditList } from './protected_tags';
@@ -148,8 +149,19 @@ const ShortcutsBlob = require('./shortcuts_blob');
           new ProjectsList();
           break;
         case 'dashboard:groups:index':
+          new GroupsList();
+          break;
         case 'explore:groups:index':
           new GroupsList();
+
+          const landingElement = document.querySelector('.js-explore-groups-landing');
+          if (!landingElement) break;
+          const exploreGroupsLanding = new Landing(
+            landingElement,
+            landingElement.querySelector('.dismiss-button'),
+            'explore_groups_landing_dismissed',
+          );
+          exploreGroupsLanding.toggle();
           break;
         case 'projects:milestones:new':
         case 'projects:milestones:edit':
diff --git a/app/assets/javascripts/landing.js b/app/assets/javascripts/landing.js
new file mode 100644
index 00000000000..8c0950ad5d5
--- /dev/null
+++ b/app/assets/javascripts/landing.js
@@ -0,0 +1,37 @@
+import Cookies from 'js-cookie';
+
+class Landing {
+  constructor(landingElement, dismissButton, cookieName) {
+    this.landingElement = landingElement;
+    this.cookieName = cookieName;
+    this.dismissButton = dismissButton;
+    this.eventWrapper = {};
+  }
+
+  toggle() {
+    const isDismissed = this.isDismissed();
+
+    this.landingElement.classList.toggle('hidden', isDismissed);
+    if (!isDismissed) this.addEvents();
+  }
+
+  addEvents() {
+    this.eventWrapper.dismissLanding = this.dismissLanding.bind(this);
+    this.dismissButton.addEventListener('click', this.eventWrapper.dismissLanding);
+  }
+
+  removeEvents() {
+    this.dismissButton.removeEventListener('click', this.eventWrapper.dismissLanding);
+  }
+
+  dismissLanding() {
+    this.landingElement.classList.add('hidden');
+    Cookies.set(this.cookieName, 'true', { expires: 365 });
+  }
+
+  isDismissed() {
+    return Cookies.get(this.cookieName) === 'true';
+  }
+}
+
+export default Landing;
diff --git a/app/assets/stylesheets/framework/blocks.scss b/app/assets/stylesheets/framework/blocks.scss
index f3e2a5db0a6..ac1fc0eb8ae 100644
--- a/app/assets/stylesheets/framework/blocks.scss
+++ b/app/assets/stylesheets/framework/blocks.scss
@@ -254,6 +254,63 @@
   padding: 10px 0;
 }
 
+.landing {
+  margin-bottom: $gl-padding;
+  overflow: hidden;
+  display: flex;
+  position: relative;
+  border: 1px solid $blue-300;
+  border-radius: $border-radius-default;
+  background-color: $blue-25;
+  justify-content: center;
+
+  .dismiss-button {
+    position: absolute;
+    right: 6px;
+    top: 6px;
+    cursor: pointer;
+    color: $blue-300;
+    z-index: 1;
+    border: none;
+    background-color: transparent;
+
+    &:hover,
+    &:focus {
+      border: none;
+      color: $blue-400;
+    }
+  }
+
+  .svg-container {
+    align-self: center;
+  }
+
+  .inner-content {
+    text-align: left;
+    white-space: nowrap;
+
+    h4 {
+      color: $gl-text-color;
+      font-size: 17px;
+    }
+
+    p {
+      color: $gl-text-color;
+      margin-bottom: $gl-padding;
+    }
+  }
+
+  @media (max-width: $screen-sm-min) {
+    flex-direction: column;
+
+    .inner-content {
+      white-space: normal;
+      padding: 0 28px;
+      text-align: center;
+    }
+  }
+}
+
 .empty-state {
   margin: 100px 0 0;
 
diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index 638c1403b25..1a6f36d032d 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -424,6 +424,11 @@ table {
   }
 }
 
+.bordered-box {
+  border: 1px solid $border-color;
+  border-radius: $border-radius-default;
+}
+
 .str-truncated {
   &-60 {
     @include str-truncated(60%);
diff --git a/app/assets/stylesheets/pages/cycle_analytics.scss b/app/assets/stylesheets/pages/cycle_analytics.scss
index ad3dbc7ac48..403724cd68a 100644
--- a/app/assets/stylesheets/pages/cycle_analytics.scss
+++ b/app/assets/stylesheets/pages/cycle_analytics.scss
@@ -93,11 +93,6 @@
     top: $gl-padding-top;
   }
 
-  .bordered-box {
-    border: 1px solid $border-color;
-    border-radius: $border-radius-default;
-  }
-
   .content-list {
     li {
       padding: 18px $gl-padding $gl-padding;
@@ -139,42 +134,9 @@
     }
   }
 
-  .landing {
-    margin-bottom: $gl-padding;
-    overflow: hidden;
-
-    .dismiss-icon {
-      position: absolute;
-      right: $cycle-analytics-box-padding;
-      cursor: pointer;
-      color: $cycle-analytics-dismiss-icon-color;
-    }
-
-    .svg-container {
-      text-align: center;
-
-      svg {
-        width: 136px;
-        height: 136px;
-      }
-    }
-
-    .inner-content {
-      @media (max-width: $screen-xs-max) {
-        padding: 0 28px;
-        text-align: center;
-      }
-
-      h4 {
-        color: $gl-text-color;
-        font-size: 17px;
-      }
-
-      p {
-        color: $cycle-analytics-box-text-color;
-        margin-bottom: $gl-padding;
-      }
-    }
+  .landing svg {
+    width: 136px;
+    height: 136px;
   }
 
   .fa-spinner {
diff --git a/app/assets/stylesheets/pages/groups.scss b/app/assets/stylesheets/pages/groups.scss
index 73a5889867a..72d73b89a2a 100644
--- a/app/assets/stylesheets/pages/groups.scss
+++ b/app/assets/stylesheets/pages/groups.scss
@@ -88,3 +88,26 @@
   color: $gl-text-color-secondary;
   margin-top: 10px;
 }
+
+.explore-groups.landing {
+  margin-top: 10px;
+
+  .inner-content {
+    padding: 0;
+
+    p {
+      margin: 7px 0 0;
+      max-width: 480px;
+      padding: 0 $gl-padding;
+
+      @media (max-width: $screen-sm-min) {
+        margin: 0 auto;
+      }
+    }
+  }
+
+  svg {
+    width: 62px;
+    height: 50px;
+  }
+}