From 776fc7510877797fa1187a4769fb1cfe3f812ddc Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Thu, 27 Dec 2018 10:59:03 +0000
Subject: [PATCH] Extract action cards component

---
 src/components/Environment/ActionCards.vue | 138 +++++++++++++++++++++
 src/views/Environment.vue                  | 129 +------------------
 2 files changed, 141 insertions(+), 126 deletions(-)
 create mode 100644 src/components/Environment/ActionCards.vue

diff --git a/src/components/Environment/ActionCards.vue b/src/components/Environment/ActionCards.vue
new file mode 100644
index 0000000..e73bece
--- /dev/null
+++ b/src/components/Environment/ActionCards.vue
@@ -0,0 +1,138 @@
+<template>
+  <div class="flex flex-wrap -mx-4 -mb-4">
+    <div class="w-full md:w-1/3 px-4 mb-4">
+      <div class="border border-grey rounded shadow bg-white overflow-hidden">
+        <div class="border-t-4 border-teal">
+          <div class="border-b border-grey-dark">
+            <div class="px-3 py-4">
+              <div class="flex flex-row-reverse">
+                <div class="flex-1">
+                  <h2 class="text-grey-darker text-base mb-1">Code</h2>
+                  <div class="text-xs text-grey-darker">{{ environment.name }}: {{ environment.label }}</div>
+                </div>
+
+                <div class="mr-3">
+                  <svg class="h-8 w-8 fill-current text-teal" role="presentation"><use xlink:href="/img/icons.symbol.svg#objects__code"></use></svg>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div>
+            <ul class="list-reset flex -ml-px">
+              <li class="w-1/2 flex-1 text-center border-l border-grey-dark">
+                <button type="button" class="w-full py-3 text-blue-dark text-xs font-bold no-underline hover:underline focus:underline hover:bg-grey-lighter focus:bg-grey-lighter focus:outline-none block">
+                  <svg class="h-6 w-6 fill-current mb-2" role="presentation"><use xlink:href="/img/icons.symbol.svg#objects__fork"></use></svg>
+                  <span class="block">Deploy</span>
+                </button>
+              </li>
+
+              <li class="w-1/2 flex-1 text-center border-l border-grey-dark">
+                <button type="button" class="w-full py-3 text-blue-dark text-xs font-bold no-underline hover:underline focus:underline hover:bg-grey-lighter focus:bg-grey-lighter focus:outline-none block">
+                  <svg class="h-6 w-6 fill-current mb-2" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__switch"></use></svg>
+                  <span class="block">Switch</span>
+                </button>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="w-full md:w-1/3 px-4 mb-4">
+      <div class="border border-grey rounded shadow bg-white overflow-hidden">
+        <div class="border-t-4 border-teal">
+          <div class="border-b border-grey-dark">
+            <div class="px-3 py-4">
+              <div class="flex flex-row-reverse">
+                <div class="flex-1">
+                  <h2 class="text-grey-darker text-base mb-1">Databases</h2>
+                  <div class="text-xs text-grey-darker">{{ environment.name }}</div>
+                </div>
+
+                <div class="mr-3">
+                  <svg class="h-8 w-8 fill-current text-teal" role="presentation"><use xlink:href="/img/icons.symbol.svg#objects__database"></use></svg>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div>
+            <ul class="list-reset flex -ml-px">
+              <li class="w-1/2 flex-1 text-center border-l border-grey-dark">
+                <button type="button" class="w-full py-3 text-blue-dark text-xs font-bold no-underline hover:underline focus:underline hover:bg-grey-lighter focus:bg-grey-lighter focus:outline-none block">
+                  <svg class="h-6 w-6 fill-current mb-2" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__copy"></use></svg>
+                  <span class="block">Copy</span>
+                </button>
+              </li>
+
+              <li class="w-1/2 flex-1 text-center border-l border-grey-dark">
+                <button type="button" class="w-full py-3 text-blue-dark text-xs font-bold no-underline hover:underline focus:underline hover:bg-grey-lighter focus:bg-grey-lighter focus:outline-none block">
+                  <svg class="h-6 w-6 fill-current mb-2" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__backup"></use></svg>
+                  <span class="block">Back up</span>
+                </button>
+              </li>
+
+              <li class="w-1/2 flex-1 text-center border-l border-grey-dark">
+                <button
+                  type="button"
+                  class="w-full py-3 text-xs font-bold no-underline hover:underline focus:underline hover:bg-grey-lighter focus:bg-grey-lighter focus:outline-none block"
+                  :class="{
+                    'text-blue-dark': !isProduction,
+                    'text-grey cursor-not-allowed': isProduction
+                  }"
+                  :disabled="isProduction"
+                >
+                  <svg class="h-6 w-6 fill-current mb-2" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__restore"></use></svg>
+                  <span class="block">Restore</span>
+                </button>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="w-full md:w-1/3 px-4 mb-4">
+      <div class="border border-grey rounded shadow bg-white overflow-hidden">
+        <div class="border-t-4 border-teal">
+          <div class="border-b border-grey-dark">
+            <div class="px-3 py-4">
+              <div class="flex flex-row-reverse">
+                <div class="flex-1">
+                  <h2 class="text-grey-darker text-base mb-1">Files</h2>
+                  <div class="text-xs text-grey-darker">{{ environment.name }}</div>
+                </div>
+
+                <div class="mr-3">
+                  <svg class="h-8 w-8 fill-current text-teal" role="presentation"><use xlink:href="/img/icons.symbol.svg#objects__environment"></use></svg>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div>
+            <ul class="list-reset flex -ml-px">
+              <li class="w-1/2 flex-1 text-center border-l border-grey-dark">
+                <button type="button" class="w-full py-3 text-blue-dark text-xs font-bold no-underline hover:underline focus:underline hover:bg-grey-lighter focus:bg-grey-lighter focus:outline-none block">
+                  <svg class="h-6 w-6 fill-current mb-2" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__copy"></use></svg>
+                  <span class="block">Copy</span>
+                </button>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+
+<script>
+export default {
+  props: {
+    environment: Object,
+    isProduction: Boolean
+  },
+}
+</script>
diff --git a/src/views/Environment.vue b/src/views/Environment.vue
index 7d03c88..eb5f409 100644
--- a/src/views/Environment.vue
+++ b/src/views/Environment.vue
@@ -55,132 +55,7 @@
             </div>
 
             <div class="mb-6">
-              <div class="flex flex-wrap -mx-4 -mb-4">
-                <div class="w-full md:w-1/3 px-4 mb-4">
-                  <div class="border border-grey rounded shadow bg-white overflow-hidden">
-                    <div class="border-t-4 border-teal">
-                      <div class="border-b border-grey-dark">
-                        <div class="px-3 py-4">
-                          <div class="flex flex-row-reverse">
-                            <div class="flex-1">
-                              <h2 class="text-grey-darker text-base mb-1">Code</h2>
-                              <div class="text-xs text-grey-darker">{{ environment.name }}: {{ environment.label }}</div>
-                            </div>
-
-                            <div class="mr-3">
-                              <svg class="h-8 w-8 fill-current text-teal" role="presentation"><use xlink:href="/img/icons.symbol.svg#objects__code"></use></svg>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-
-                      <div>
-                        <ul class="list-reset flex -ml-px">
-                          <li class="w-1/2 flex-1 text-center border-l border-grey-dark">
-                            <button type="button" class="w-full py-3 text-blue-dark text-xs font-bold no-underline hover:underline focus:underline hover:bg-grey-lighter focus:bg-grey-lighter focus:outline-none block">
-                              <svg class="h-6 w-6 fill-current mb-2" role="presentation"><use xlink:href="/img/icons.symbol.svg#objects__fork"></use></svg>
-                              <span class="block">Deploy</span>
-                            </button>
-                          </li>
-
-                          <li class="w-1/2 flex-1 text-center border-l border-grey-dark">
-                            <button type="button" class="w-full py-3 text-blue-dark text-xs font-bold no-underline hover:underline focus:underline hover:bg-grey-lighter focus:bg-grey-lighter focus:outline-none block">
-                              <svg class="h-6 w-6 fill-current mb-2" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__switch"></use></svg>
-                              <span class="block">Switch</span>
-                            </button>
-                          </li>
-                        </ul>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-
-                <div class="w-full md:w-1/3 px-4 mb-4">
-                  <div class="border border-grey rounded shadow bg-white overflow-hidden">
-                    <div class="border-t-4 border-teal">
-                      <div class="border-b border-grey-dark">
-                        <div class="px-3 py-4">
-                          <div class="flex flex-row-reverse">
-                            <div class="flex-1">
-                              <h2 class="text-grey-darker text-base mb-1">Databases</h2>
-                              <div class="text-xs text-grey-darker">{{ environment.name }}</div>
-                            </div>
-
-                            <div class="mr-3">
-                              <svg class="h-8 w-8 fill-current text-teal" role="presentation"><use xlink:href="/img/icons.symbol.svg#objects__database"></use></svg>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-
-                      <div>
-                        <ul class="list-reset flex -ml-px">
-                          <li class="w-1/2 flex-1 text-center border-l border-grey-dark">
-                            <button type="button" class="w-full py-3 text-blue-dark text-xs font-bold no-underline hover:underline focus:underline hover:bg-grey-lighter focus:bg-grey-lighter focus:outline-none block">
-                              <svg class="h-6 w-6 fill-current mb-2" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__copy"></use></svg>
-                              <span class="block">Copy</span>
-                            </button>
-                          </li>
-
-                          <li class="w-1/2 flex-1 text-center border-l border-grey-dark">
-                            <button type="button" class="w-full py-3 text-blue-dark text-xs font-bold no-underline hover:underline focus:underline hover:bg-grey-lighter focus:bg-grey-lighter focus:outline-none block">
-                              <svg class="h-6 w-6 fill-current mb-2" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__backup"></use></svg>
-                              <span class="block">Back up</span>
-                            </button>
-                          </li>
-
-                          <li class="w-1/2 flex-1 text-center border-l border-grey-dark">
-                            <button
-                              type="button"
-                              class="w-full py-3 text-xs font-bold no-underline hover:underline focus:underline hover:bg-grey-lighter focus:bg-grey-lighter focus:outline-none block"
-                              :class="{
-                                'text-blue-dark': !isProduction,
-                                'text-grey cursor-not-allowed': isProduction
-                              }"
-                              :disabled="isProduction"
-                            >
-                              <svg class="h-6 w-6 fill-current mb-2" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__restore"></use></svg>
-                              <span class="block">Restore</span>
-                            </button>
-                          </li>
-                        </ul>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-
-                <div class="w-full md:w-1/3 px-4 mb-4">
-                  <div class="border border-grey rounded shadow bg-white overflow-hidden">
-                    <div class="border-t-4 border-teal">
-                      <div class="border-b border-grey-dark">
-                        <div class="px-3 py-4">
-                          <div class="flex flex-row-reverse">
-                            <div class="flex-1">
-                              <h2 class="text-grey-darker text-base mb-1">Files</h2>
-                              <div class="text-xs text-grey-darker">{{ environment.name }}</div>
-                            </div>
-
-                            <div class="mr-3">
-                              <svg class="h-8 w-8 fill-current text-teal" role="presentation"><use xlink:href="/img/icons.symbol.svg#objects__environment"></use></svg>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-
-                      <div>
-                        <ul class="list-reset flex -ml-px">
-                          <li class="w-1/2 flex-1 text-center border-l border-grey-dark">
-                            <button type="button" class="w-full py-3 text-blue-dark text-xs font-bold no-underline hover:underline focus:underline hover:bg-grey-lighter focus:bg-grey-lighter focus:outline-none block">
-                              <svg class="h-6 w-6 fill-current mb-2" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__copy"></use></svg>
-                              <span class="block">Copy</span>
-                            </button>
-                          </li>
-                        </ul>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
+              <action-cards :environment="environment" :is-production="isProduction"></action-cards>
             </div>
 
             <div class="mb-6 rounded border border-grey shadow overflow-hidden">
@@ -275,11 +150,13 @@
 </template>
 
 <script>
+import ActionCards from '@/components/Environment/ActionCards'
 import ApplicationTags from '@/components/Application/ApplicationTags'
 import data from '@/data.json'
 
 export default {
   components: {
+    ActionCards,
     ApplicationTags,
   },