Adds html and css to add mattermost team name to group in new and edit

app/assets/stylesheets/pages/groups.scss

@@ -74,8 +74,18 @@
   }
 }
 
-.mattermost-icon svg{
+.mattermost-icon svg {
   width: 16px;
   height: 16px;
   vertical-align: text-bottom;
 }
+
+.mattermost-team-name {
+  color: $gl-text-color-secondary;
+}
+
+.mattermost-info {
+  display: block;
+  color: $gl-text-color-secondary;
+  margin-top: 10px;
+}

app/views/groups/edit.html.haml

@@ -22,6 +22,26 @@
 
       = render 'shared/visibility_level', f: f, visibility_level: @group.visibility_level, can_change_visibility_level: can_change_group_visibility_level?(@group), form_model: @group
 
+      .form-group
+        = f.label :name, class: 'control-label' do
+          %span.mattermost-icon
+            = custom_icon('icon_mattermost')
+          Mattermost
+        .col-sm-10
+          .checkbox
+            = f.label :name do
+              = f.check_box :name, checked: true
+              Link the group to a new or existing Mattermost team
+
+
+      - enabled = Gitlab.config.mattermost.enabled
+      - if enabled
+      .form-group
+        .col-sm-offset-2.col-sm-10
+          = f.text_field :name, placeholder: "FILL WITH TEAM NAME", class: 'form-control mattermost-team-name'
+          %span.mattermost-info
+            Team URL: INSERT TEAM URL
+
       .form-group
         .col-sm-offset-2.col-sm-10
           = render 'shared/allow_request_access', form: f

app/views/groups/new.html.haml

@@ -27,6 +27,12 @@
           = f.check_box :chat_team
           Link the group to a new or existing Mattermost team
 
+- enabled = Gitlab.config.mattermost.enabled
+- if enabled
+  .form-group
+    .col-sm-offset-2.col-sm-10
+      = f.text_field :name, placeholder: 'Mattermost team name', class: 'form-control  mattermost-team-name'
+
   .form-group
     .col-sm-offset-2.col-sm-10
       = render 'shared/group_tips'