Components can now be added via a sub-page

app/assets/sass/partials/_sidebar.scss

@@ -55,6 +55,12 @@ body.dashboard {
 							text-decoration: none;
 						}
 					}
+
+					&.sub-nav-item {
+						a {
+							padding-left: 40px;
+						}
+					}
 				}
 			}
 		}

app/controllers/DashboardController.php

@@ -33,6 +33,16 @@ class DashboardController extends Controller {
         ]);
     }
 
+    /**
+     * Shows the add component view.
+     * @return \Illuminate\View\View
+     */
+    public function showAddComponent() {
+        return View::make('dashboard.component-add')->with([
+            'pageTitle' => 'Add Component - Dashboard',
+        ]);
+    }
+
     /**
      * Creates a new component.
      * @return \Illuminate\Http\RedirectResponse

app/lang/en/cachet.php

@@ -32,6 +32,7 @@ return array(
     'dashboard' => array(
         'dashboard' => 'Dashboard',
         'components' => 'Components',
+        'component-add' => 'Add Component',
         'incidents' => 'Incidents',
         'metrics' => 'Metrics',
         'status_page' => 'Status Page',

app/routes/dashboard.php

@@ -6,7 +6,8 @@ Route::group(['before' => 'auth', 'prefix' => 'dashboard'], function() {
 
     // TODO: Switch for Route::controller?
     Route::get('components', ['as' => 'dashboard.components', 'uses' => 'DashboardController@showComponents']);
-    Route::post('components/create', 'DashboardController@createComponentAction');
+    Route::get('components/add', ['as' => 'dashboard.components.add', 'uses' => 'DashboardController@showAddComponent']);
+    Route::post('components/add', 'DashboardController@createComponentAction');
     Route::get('components/{component}/delete', 'DashboardController@deleteComponentAction');
 
     Route::get('incidents', ['as' => 'dashboard.incidents', 'uses' => 'DashboardController@showIncidents']);

app/views/dashboard/component-add.blade.php

@@ -0,0 +1,37 @@
+@extends('layout.dashboard')
+
+@section('content')
+<div class="header">
+	<i class="fa fa-list-ul"></i> {{ Lang::get('cachet.dashboard.components') }}
+</div>
+<div class="row">
+	<div class="col-sm-12">
+		<h3>Create a component</h3>
+		@if($component = Session::get('component'))
+		<div class='alert alert-{{ $component->isValid() ? "success" : "danger" }}'>
+			@if($component->isValid())
+			<strong>Awesome.</strong> Component added.
+			@else
+			<strong>Whoops.</strong> Something went wrong with the component. {{ $component->getErrors() }}
+			@endif
+		</div>
+		@endif
+
+		<form name='CreateComponentForm' class='form-vertical' role='form' action='/dashboard/components/add' method='POST'>
+			<fieldset>
+				<div class='form-group'>
+					<label for='incident-name'>Component Name</label>
+					<input type='text' class='form-control' name='component[name]' id='component-name' required />
+				</div>
+				<div class='form-group'>
+					<label>Description</label>
+					<textarea name='component[description]' class='form-control' rows='5'></textarea>
+				</div>
+			</fieldset>
+
+			<button type="submit" class="btn btn-primary">Submit</button>
+			<input type='hidden' name='component[user_id]' value='{{ Auth::user()->id }}' />
+		</form>
+	</div>
+</div>
+@stop

app/views/dashboard/components.blade.php

@@ -26,33 +26,6 @@
 				<li class='list-group-item text-danger'>You should add a component.</li>
 				@endforelse
 			</ul>
-
-			<h3>Create a component</h3>
-			@if($component = Session::get('component'))
-			<div class='alert alert-{{ $component->isValid() ? "success" : "danger" }}'>
-				@if($component->isValid())
-				<strong>Awesome.</strong> Component added.
-				@else
-				<strong>Whoops.</strong> Something went wrong with the component. {{ $component->getErrors() }}
-				@endif
-			</div>
-			@endif
-
-			<form name='CreateComponentForm' class='form-vertical' role='form' action='/dashboard/components/create' method='POST'>
-				<fieldset>
-					<div class='form-group'>
-						<label for='incident-name'>Component Name</label>
-						<input type='text' class='form-control' name='component[name]' id='component-name' required />
-					</div>
-					<div class='form-group'>
-						<label>Description</label>
-						<textarea name='component[description]' class='form-control' rows='5'></textarea>
-					</div>
-				</fieldset>
-
-				<button type="submit" class="btn btn-primary">Submit</button>
-				<input type='hidden' name='component[user_id]' value='{{ Auth::user()->id }}' />
-			</form>
 		</div>
 	</div>
 @stop

app/views/partials/dashboard/sidebar.blade.php

@@ -22,6 +22,11 @@
                     <i class="fa fa-list-ul"></i> {{ Lang::get('cachet.dashboard.components') }}
                 </a>
             </li>
+            <li class="{{ Request::is('dashboard/components/add') ? 'active' : '' }} sub-nav-item">
+                <a href="{{ URL::route('dashboard.components.add') }}">
+                    <i class="fa fa-plus"></i> {{ Lang::get('cachet.dashboard.component-add') }}
+                </a>
+            </li>
             <li class="{{ Request::is('dashboard/incidents') ? 'active' : '' }}">
                 <a href="{{ URL::route('dashboard.incidents') }}">
                     <i class="fa fa-exclamation-triangle"></i> {{ Lang::get('cachet.dashboard.incidents') }}

public/build/css/all-ced1a963.css

@@ -4350,6 +4350,8 @@ body.dashboard .sidebar {
             padding-right: 10px; }
           body.dashboard .sidebar .sidebar-inner ul li a:hover {
             text-decoration: none; }
+        body.dashboard .sidebar .sidebar-inner ul li.sub-nav-item a {
+          padding-left: 40px; }
 
 body.dashboard .content {
   padding-top: 69px;

public/build/css/all.css

@@ -4350,6 +4350,8 @@ body.dashboard .sidebar {
             padding-right: 10px; }
           body.dashboard .sidebar .sidebar-inner ul li a:hover {
             text-decoration: none; }
+        body.dashboard .sidebar .sidebar-inner ul li.sub-nav-item a {
+          padding-left: 40px; }
 
 body.dashboard .content {
   padding-top: 69px;

public/build/rev-manifest.json

@@ -1,4 +1,4 @@
 {
-  "css/all.css": "css/all-dbb960ea.css",
+  "css/all.css": "css/all-ced1a963.css",
   "js/all.js": "js/all-d8f5640f.js"
 }