ENH Allow status flags to be used generically (#1856)

Take styling for versioned badges in their various places and centralise
it as a more generic badge, plus ensure LeftAndMain breadcrumbs include
status flags

client/src/components/GridField/GridField.scss

@@ -210,11 +210,6 @@ div.grid-field__sort-field + .form__fieldgroup-item {
   &:hover .grid-field__icon-action--hidden-on-hover {
     opacity: 1;
   }
-
-  .ss-gridfield-badge {
-    color: $state-draft;
-    padding: 0;
-  }
 }
 
 // Grid-field body
@@ -288,17 +283,3 @@ div.grid-field__sort-field + .form__fieldgroup-item {
 .import-form .advanced {
   display: none;
 }
-
-.version-status {
-  border: 1px solid $border-color-light;
-  background-color: $white;
-  margin-left: $btn-spacing;
-
-  &.version-status--addedtodraft {
-    color: $state-draft;
-  }
-
-  &.version-status--modified {
-    color: $state-modified;
-  }
-}

client/src/styles/bundle.scss

@@ -29,6 +29,7 @@
 @import "legacy/popover-actions-simulate";
 @import "legacy/GridField";
 @import "legacy/SelectionGroup";
+@import "legacy/badges";
 
 // Components
 @import "../components/Accordion/Accordion";

client/src/styles/legacy/GridField.scss

@@ -158,27 +158,6 @@
             border-radius: 2px;
             font-weight: normal;
           }
-
-          span.badge.status-modified {
-            color: $state-draft;
-          }
-
-          span.badge.status-addedtodraft {
-            color: $state-draft;
-          }
-
-          span.badge.status-deletedonlive,
-          span.badge.status-removedfromdraft {
-            color: #636363;
-            border: 1px solid #E49393;
-            background-color: #F2DADB;
-          }
-
-          span.badge.status-workflow-approval {
-            color: #56660C;
-            border: 1px solid #7C8816;
-            background-color: #DAE79A;
-          }
         }
 
         a.view-link {
@@ -417,3 +396,7 @@
     padding: $grid-gutter-width;
   }
 }
+
+.ss-gridfield-badge.badge {
+  margin-left: 5px;
+}

client/src/styles/legacy/_badges.scss

@@ -0,0 +1,16 @@
+.badge {
+  display: inline-block;
+  background-color: $color-notice;
+  border-color: transparent;
+  color: $body-color-dark;
+  // Badges with no text aren't displayed
+  &:empty {
+    display: none;
+  }
+}
+
+.badge--breadcrumbs {
+  border-width: 1px;
+  border-style: solid;
+  margin-left: $btn-spacing;
+}

client/src/styles/legacy/_style.scss

@@ -119,8 +119,10 @@ html, body {
     min-height: $toolbar-height;
     min-width: 250px;
 
-    * {
-      display: inline-block; // align back button and breadcrumbs
+    // align back button and breadcrumbs
+    // but specifically do NOT override badge display
+    *:not(.badge) {
+      display: inline-block;
     }
 
     .section-icon {

client/src/styles/legacy/_tree.scss

@@ -654,6 +654,12 @@
     margin: 0;
     max-width: 40%;
     transition: max-width .75s linear;
+
+    // After the first badge, stop displaying.
+    // There's only enough space for a single badge in this view.
+    ~ .badge {
+      display: none;
+    }
   }
   span.badge:hover {
     max-width: 150px;
@@ -700,14 +706,10 @@ a .jstree-pageicon {
   }
   // Labels
   .jstree .status-#{$label} > .jstree-hovered,
-  .jstree .status-#{$label} > .jstree-clicked,
-  .cms-tree.jstree span.badge.status-#{$label}  {
+  .jstree .status-#{$label} > .jstree-clicked {
     background-color:$bgColor;
     border-color:$textColor;
   }
-  .cms-tree.jstree span.badge.status-#{$label}  {
-    color: $textColor;
-  }
   // Dots
   .cms-tree.jstree .status-#{$label} > a .jstree-pageicon:after  {
     background-color:$dotColor;

templates/SilverStripe/Admin/Includes/CMSBreadcrumbs.ss

@@ -1,7 +1,7 @@
 <div class="breadcrumbs-wrapper flexbox-area-grow" data-pjax-fragment="Breadcrumbs">
 	<% loop $Breadcrumbs %>
 		<% if $IsLast %>
-			<span class="cms-panel-link crumb last">$Title<% if $Extra %>$Extra<% end_if %></span>
+			<span class="cms-panel-link crumb last">$Title<% if $Extra %>$Extra<% end_if %><% if $Top.CurrentPageID %>$Top.CurrentPage.StatusFlagMarkup("badge--breadcrumbs")<% end_if %></span>
 		<% else %>
 			<a class="cms-panel-link crumb" href="$Link">$Title</a>
 			<span class="sep">/</span>

tests/behat/features/gridfield-status-flags.feature

@@ -0,0 +1,20 @@
+@retry @job1
+Feature: Search in GridField
+  As a content author
+  I want to see the status flags for records in gridfields
+  So that I can see at a glance what state my data is in
+
+  Background:
+    Given the "Company" "Walmart" with "Category"="Retail"
+      And the "group" "EDITOR" has permissions "Access to 'Pages' section" and "Access to 'GridField Test Navigation' section" and "TEST_DATAOBJECT_EDIT"
+      And I am logged in as a member of "EDITOR" group
+
+  Scenario: I see status flags in gridfields
+    When I go to "/admin/gridfield-test-navigation"
+      And I should see "Walmart" in the "#Form_EditForm .col-Name" element
+      And I should see "string-flag" in the "#Form_EditForm .col-Name .badge.status-company-status-flag1" element
+      And I should see "array-flag" in the "#Form_EditForm .col-Name .badge.status-company-status-flag2" element
+    Then I click "Walmart" in the "#Form_EditForm" element
+      And I should see "Walmart" in the ".breadcrumbs-wrapper" element
+      And I should see "string-flag" in the ".breadcrumbs-wrapper .badge.status-company-status-flag1" element
+      And I should see "array-flag" in the ".breadcrumbs-wrapper .badge.status-company-status-flag2" element