feat: Toggle automation status (#3991)

app/javascript/dashboard/components/index.js

@@ -21,6 +21,7 @@ import SubmitButton from './buttons/FormSubmitButton';
 import Tabs from './ui/Tabs/Tabs';
 import TabsItem from './ui/Tabs/TabsItem';
 import Thumbnail from './widgets/Thumbnail.vue';
+import ConfirmModal from './widgets/modal/ConfirmationModal.vue';
 
 const WootUIKit = {
   AvatarUploader,
@@ -45,6 +46,7 @@ const WootUIKit = {
   Tabs,
   TabsItem,
   Thumbnail,
+  ConfirmModal,
   install(Vue) {
     const keys = Object.keys(this);
     keys.pop(); // remove 'install' from keys

app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue

@@ -20,7 +20,8 @@
         data-view-component="true"
         label="Beta"
         class="beta"
-        >Beta
+      >
+        {{ $t('SIDEBAR.BETA') }}
       </span>
     </router-link>
 
@@ -233,7 +234,7 @@ export default {
   padding-left: var(--space-smaller) !important;
   margin-left: var(--space-half) !important;
   display: inline-block;
-  font-size: var(--font-size-mini);
+  font-size: var(--font-size-micro);
   font-weight: var(--font-weight-medium);
   line-height: 18px;
   border: 1px solid transparent;

app/javascript/dashboard/components/widgets/modal/ConfirmationModal.vue

@@ -0,0 +1,75 @@
+<template>
+  <modal :show.sync="show" :on-close="cancel">
+    <div class="column content-box">
+      <woot-modal-header :header-title="title"> </woot-modal-header>
+      <div class="row modal-content">
+        <div class="medium-12 columns">
+          <p>
+            {{ description }}
+          </p>
+        </div>
+        <div class="modal-footer">
+          <div class="medium-12 columns">
+            <woot-button @click="confirm">
+              {{ confirmLabel }}
+            </woot-button>
+            <button class="button clear" @click="cancel">
+              {{ cancelLabel }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </modal>
+</template>
+<script>
+import Modal from '../../Modal';
+
+export default {
+  components: {
+    Modal,
+  },
+  props: {
+    title: {
+      type: String,
+      default: 'This is a title',
+    },
+    description: {
+      type: String,
+      default: 'This is your description',
+    },
+    confirmLabel: {
+      type: String,
+      default: 'Yes',
+    },
+    cancelLabel: {
+      type: String,
+      default: 'No',
+    },
+  },
+  data: () => ({
+    show: false,
+    resolvePromise: undefined,
+    rejectPromise: undefined,
+  }),
+
+  methods: {
+    showConfirmation() {
+      this.show = true;
+      return new Promise((resolve, reject) => {
+        this.resolvePromise = resolve;
+        this.rejectPromise = reject;
+      });
+    },
+    confirm() {
+      this.resolvePromise(true);
+      this.show = false;
+    },
+
+    cancel() {
+      this.resolvePromise(false);
+      this.show = false;
+    },
+  },
+};
+</script>