Progress bar (stepper) to be consistent and indicate my steps as a form designer.

app/frontend/src/components/base/BaseStepper.vue

@@ -0,0 +1,80 @@
+<template>
+  <BaseSecure :idp="[IDP.IDIR]" :class="{ 'dir-rtl': isRTL }">
+    <v-stepper
+      v-model="creatorStep"
+      class="elevation-0 d-flex flex-column"
+      alt-labels
+    >
+      <v-stepper-header
+        style="width: 40%"
+        class="elevation-0 px-0 align-self-center"
+      >
+        <v-stepper-step :complete="creatorStep > 1" step="1" class="pl-1 pr-1">
+          <span :class="{ 'mr-2': isRTL }" :lang="lang">
+            {{ $t('trans.baseStepper.setUpForm') }}
+          </span>
+        </v-stepper-step>
+        <v-divider />
+        <v-stepper-step :complete="creatorStep > 2" step="2" class="pl-1 pr-1">
+          <span :class="{ 'mr-2': isRTL }" :lang="lang">
+            {{ $t('trans.baseStepper.designForm') }}
+          </span>
+        </v-stepper-step>
+        <v-divider />
+        <v-stepper-step
+          :complete="creatorStep === 3"
+          step="3"
+          class="pl-1 pr-1"
+        >
+          <span :class="{ 'mr-2': isRTL }" :lang="lang">
+            {{ $t('trans.baseStepper.manageForm') }}
+          </span>
+        </v-stepper-step>
+      </v-stepper-header>
+      <v-stepper-items>
+        <v-stepper-content step="1" class="pa-1">
+          <div class="mt-4">
+            <slot name="setUpForm"></slot>
+          </div>
+        </v-stepper-content>
+        <v-stepper-content step="2" class="pa-1">
+          <div class="mt-4">
+            <slot name="designForm"></slot>
+          </div>
+        </v-stepper-content>
+        <v-stepper-content step="3" class="pa-1">
+          <div class="mt-4">
+            <slot name="manageForm"></slot>
+          </div>
+        </v-stepper-content>
+      </v-stepper-items>
+    </v-stepper>
+  </BaseSecure>
+</template>
+<script>
+import { mapGetters } from 'vuex';
+import { IdentityProviders } from '@/utils/constants';
+export default {
+  name: 'BaseStepper',
+  props: {
+    step: Number,
+  },
+  computed: {
+    ...mapGetters('form', ['lang', 'isRTL']),
+    IDP: () => IdentityProviders,
+    creatorStep() {
+      return this.step;
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+/* unset 'overflow: hidden' from all parents of FormDesigner, so FormDesigner's 'sticky' components menu sticks. */
+.v-stepper,
+.v-stepper__items,
+.v-stepper ::v-deep .v-stepper__wrapper {
+  overflow: initial !important;
+}
+</style>
+
+step

app/frontend/src/components/designer/FloatButton.vue

@@ -19,7 +19,7 @@
         data-cy="publishRouterLink"
         class="fabAction"
         :to="{
-          name: 'FormManage',
+          name: 'PublishForm',
           query: { f: formId, fd: 'formDesigner', d: draftId },
         }"
         :class="{ 'disabled-router': !formId }"
@@ -302,7 +302,6 @@ export default {
       });
       window.open(route.href);
     },
-
     setSizes() {
       this.floatButtonSize = {};
 

app/frontend/src/components/forms/manage/ApiKey.vue

@@ -190,7 +190,7 @@ export default {
       );
     },
     secret() {
-      return this.apiKey && this.apiKey.secret ? this.apiKey.secret : undefined;
+      return this.apiKey && this.apiKey.secret ? this.apiKey.secret : '';
     },
   },
   methods: {

app/frontend/src/components/forms/manage/ManageVersions.vue

@@ -268,7 +268,7 @@ import { FormPermissions } from '@/utils/constants';
 
 export default {
   name: 'ManageVersions',
-  inject: ['fd', 'draftId', 'formId'],
+  inject: ['formDesigner', 'draftId'],
   data() {
     return {
       formSchema: {
@@ -379,19 +379,6 @@ export default {
     cancelPublish() {
       this.showPublishDialog = false;
       document.documentElement.style.overflow = 'auto';
-      if (this.draftId) {
-        this.$router
-          .replace({
-            name: 'FormDesigner',
-            query: {
-              f: this.formId,
-              d: this.draftId,
-              saved: true,
-            },
-          })
-          .catch(() => {});
-        return;
-      }
       // To get the toggle back to original state
       this.rerenderTable += 1;
     },
@@ -421,6 +408,7 @@ export default {
       }
     },
     async updatePublish() {
+      document.documentElement.style.overflow = 'auto';
       this.showPublishDialog = false;
       document.documentElement.style.overflow = 'auto';
       // if publishing a draft version
@@ -490,10 +478,10 @@ export default {
       }
     },
   },
-  created() {
+  async created() {
     //check if the navigation to this page is from FormDesigner
-    if (this.fd) {
-      this.turnOnPublish();
+    if (this.formDesigner) {
+      await this.turnOnPublish();
     }
   },
 };

app/frontend/src/internationalization/trans/chefs/ar/ar.json

@@ -762,10 +762,15 @@
     "createOnlineTitle": "قم بإنشاء نماذج عبر الإنترنت لجمع المعلومات من عملائك وتحسين سير العمل الخاص بك.",
     "getStarted": "البدء"
   },
+  "baseStepper": {
+    "designForm": "نموذج التصميم",
+    "setUpForm": "قم بإعداد النموذج",
+    "publishForm": "نشر النموذج",
+    "manageForm": "إدارة النموذج"
+  },
+
   "create": {
     "createNewForm": "إنشاء نموذج جديد",
-    "setUpForm": "قم بإعداد النموذج",
-    "designForm": "نموذج التصميم",
     "formSettings": "إعدادات النموذج",
     "disclaimer": "تنصل",
     "disclaimerStmt": "أوافق على إخلاء المسؤولية وبيان المسؤولية لمصممي النماذج",

app/frontend/src/internationalization/trans/chefs/de/de.json

@@ -762,10 +762,13 @@
     "createOnlineTitle": "Erstellen Sie Online-Formulare, um Informationen von Ihren Kunden zu sammeln und Ihre Arbeitsabläufe zu verbessern.",
     "getStarted": "Loslegen"
   },
+  "baseStepper": {
+    "designForm": "Designform",
+    "setUpForm": "Formular einrichten",
+    "manageForm": "Formular verwalten"
+  },
   "create": {
     "createNewForm": "Neues Formular erstellen",
-    "setUpForm": "Formular einrichten",
-    "designForm": "Designform",
     "formSettings": "Formulareinstellungen",
     "disclaimer": "Haftungsausschluss",
     "disclaimerStmt": "Ich stimme dem Haftungsausschluss und der Haftungserklärung von Form Designers zu",

app/frontend/src/internationalization/trans/chefs/en/en.json

@@ -762,10 +762,13 @@
     "createOnlineTitle": "Create online forms to collect information from your clients and improve your workflows.",
     "getStarted": "Get started"
   },
+  "baseStepper": {
+    "designForm": "Design Form",
+    "setUpForm": "Set up Form",
+    "manageForm": "Manage Form"
+  },
   "create": {
     "createNewForm": "Create New Form",
-    "setUpForm": "Set up Form",
-    "designForm": "Design Form",
     "formSettings": "Form Settings",
     "disclaimer": "Disclaimer",
     "disclaimerStmt": "I agree to the disclaimer and statement of responsibility for Form Designers",

app/frontend/src/internationalization/trans/chefs/es/es.json

@@ -762,10 +762,13 @@
     "createOnlineTitle": "Cree formularios en línea para recopilar información de sus clientes y mejorar sus flujos de trabajo.",
     "getStarted": "Empezar"
   },
+"baseStepper": {
+  "setUpForm": "Configurar formulario",
+  "designForm": "Formulario de diseño",
+  "manageForm": "Administrar formulario"
+},
   "create": {
     "createNewForm": "Crear nuevo formulario",
-    "setUpForm": "Configurar formulario",
-    "designForm": "Formulario de diseño",
     "formSettings": "Configuración de formulario",
     "disclaimer": "Descargo de responsabilidad",
     "disclaimerStmt": "Acepto el descargo de responsabilidad y la declaración de responsabilidad de Form Designers",

app/frontend/src/internationalization/trans/chefs/fa/fa.json

@@ -762,10 +762,13 @@
     "createOnlineTitle": "فرم های آنلاین برای جمع آوری اطلاعات از مشتریان خود و بهبود گردش کار خود ایجاد کنید.",
     "getStarted": "شروع کنید"
   },
+"baseStepper": {
+  "setUpForm": "فرم را تنظیم کنید",
+  "designForm": "فرم طراحی",
+  "manageForm": "مدیریت فرم"
+},
   "create": {
     "createNewForm": "ایجاد فرم جدید",
-    "setUpForm": "فرم را تنظیم کنید",
-    "designForm": "فرم طراحی",
     "formSettings": "تنظیمات فرم",
     "disclaimer": "سلب مسئولیت",
     "disclaimerStmt": "من با سلب مسئولیت و بیانیه مسئولیت طراحان فرم موافقم",

app/frontend/src/internationalization/trans/chefs/fr/fr.json

@@ -762,10 +762,13 @@
     "createOnlineTitle": "Créez des formulaires en ligne pour collecter des informations auprès de vos clients et améliorer vos flux de travail.",
     "getStarted": "Commencer"
   },
+"baseStepper": {
+  "setUpForm": "Configurer le formulaire",
+    "designForm": "Formulaire de conception",
+    "manageForm": "Gérer le formulaire"
+},
   "create": {
     "createNewForm": "Créer un nouveau formulaire",
-    "setUpForm": "Configurer le formulaire",
-    "designForm": "Formulaire de conception",
     "formSettings": "Paramètres du formulaire",
     "disclaimer": "Clause de non-responsabilité",
     "disclaimerStmt": "J'accepte la clause de non-responsabilité et la déclaration de responsabilité des concepteurs de formulaires",

app/frontend/src/internationalization/trans/chefs/hi/hi.json

@@ -762,10 +762,13 @@
     "createOnlineTitle": "अपने ग्राहकों से जानकारी एकत्र करने और अपने कार्यप्रवाह में सुधार करने के लिए ऑनलाइन फॉर्म बनाएं।",
     "getStarted": "शुरू हो जाओ"
   },
+"baseStepper": {
+  "setUpForm": "फॉर्म सेट करें",
+    "designForm": "डिज़ाइन फॉर्म",
+    "manageForm": "प्रपत्र प्रबंधित करें"
+},
   "create": {
     "createNewForm": "नया फॉर्म बनाएं",
-    "setUpForm": "फॉर्म सेट करें",
-    "designForm": "डिज़ाइन फॉर्म",
     "formSettings": "फॉर्म सेटिंग्स",
     "disclaimer": "अस्वीकरण",
     "disclaimerStmt": "मैं फॉर्म डिजाइनरों के अस्वीकरण और जिम्मेदारी के बयान से सहमत हूं",

app/frontend/src/internationalization/trans/chefs/it/it.json

@@ -762,10 +762,13 @@
     "createOnlineTitle": "Crea moduli online per raccogliere informazioni dai tuoi clienti e migliorare i tuoi flussi di lavoro.",
     "getStarted": "Iniziare"
   },
+"baseStepper": {
+  "setUpForm": "Imposta modulo",
+    "designForm": "Modulo di progettazione",
+    "manageForm": "Gestisci modulo"
+},
   "create": {
     "createNewForm": "Crea nuovo modulo",
-    "setUpForm": "Imposta modulo",
-    "designForm": "Modulo di progettazione",
     "formSettings": "Impostazioni modulo",
     "disclaimer": "Disclaimer",
     "disclaimerStmt": "Accetto il disclaimer e la dichiarazione di responsabilità per Form Designers",

app/frontend/src/internationalization/trans/chefs/ja/ja.json

@@ -762,10 +762,13 @@
     "createOnlineTitle": "オンライン フォームを作成してクライアントから情報を収集し、ワークフローを改善します。",
     "getStarted": "始めましょう"
   },
-  "create": {
-    "createNewForm": "新しいフォームの作成",
+  "baseStepper": {
     "setUpForm": "フォームの設定",
     "designForm": "デザインフォーム",
+    "manageForm": "フォームの管理"
+    },
+  "create": {
+    "createNewForm": "新しいフォームの作成",
     "formSettings": "フォーム設定",
     "disclaimer": "免責事項",
     "disclaimerStmt": "フォームデザイナーの免責事項と責任声明に同意します",

app/frontend/src/internationalization/trans/chefs/ko/ko.json

@@ -762,10 +762,13 @@
     "createOnlineTitle": "클라이언트로부터 정보를 수집하고 작업 흐름을 개선하기 위한 온라인 양식을 만드십시오.",
     "getStarted": "시작하다"
   },
-  "create": {
-    "createNewForm": "새 양식 만들기",
+  "baseStepper": {
     "setUpForm": "양식 설정",
     "designForm": "디자인 양식",
+    "manageForm": "양식 관리"
+    },
+  "create": {
+    "createNewForm": "새 양식 만들기",
     "formSettings": "양식 설정",
     "disclaimer": "부인 성명",
     "disclaimerStmt": "양식 디자이너에 대한 면책 조항 및 책임 진술에 동의합니다.",

app/frontend/src/internationalization/trans/chefs/pa/pa.json

@@ -762,10 +762,13 @@
     "createOnlineTitle": "ਆਪਣੇ ਗਾਹਕਾਂ ਤੋਂ ਜਾਣਕਾਰੀ ਇਕੱਠੀ ਕਰਨ ਅਤੇ ਆਪਣੇ ਵਰਕਫਲੋ ਨੂੰ ਬਿਹਤਰ ਬਣਾਉਣ ਲਈ ਔਨਲਾਈਨ ਫਾਰਮ ਬਣਾਓ।",
     "getStarted": "ਸ਼ੁਰੂ ਕਰੋ"
   },
-  "create": {
-    "createNewForm": "ਨਵਾਂ ਫਾਰਮ ਬਣਾਓ",
+  "baseStepper": {
     "setUpForm": "ਫਾਰਮ ਸੈਟ ਅਪ ਕਰੋ",
     "designForm": "ਡਿਜ਼ਾਈਨ ਫਾਰਮ",
+    "manageForm": "ਫਾਰਮ ਦਾ ਪ੍ਰਬੰਧਨ ਕਰੋ"
+    },
+  "create": {
+    "createNewForm": "ਨਵਾਂ ਫਾਰਮ ਬਣਾਓ",
     "formSettings": "ਫਾਰਮ ਸੈਟਿੰਗਾਂ",
     "disclaimer": "ਬੇਦਾਅਵਾ",
     "disclaimerStmt": "ਮੈਂ ਫਾਰਮ ਡਿਜ਼ਾਈਨਰਾਂ ਲਈ ਬੇਦਾਅਵਾ ਅਤੇ ਜ਼ਿੰਮੇਵਾਰੀ ਦੇ ਬਿਆਨ ਨਾਲ ਸਹਿਮਤ ਹਾਂ",

app/frontend/src/internationalization/trans/chefs/pt/pt.json

@@ -762,10 +762,14 @@
     "createOnlineTitle": "Crie formulários online para coletar informações de seus clientes e melhorar seus fluxos de trabalho.",
     "getStarted": "iniciar"
   },
+
+"baseStepper": {
+  "setUpForm": "Configurar formulário",
+    "designForm": "Forma de desenho",
+    "manageForm": "Gerenciar formulário"
+},
   "create": {
     "createNewForm": "Criar novo formulário",
-    "setUpForm": "Configurar formulário",
-    "designForm": "Forma de desenho",
     "formSettings": "Configurações do formulário",
     "disclaimer": "Isenção de responsabilidade",
     "disclaimerStmt": "Eu concordo com a isenção de responsabilidade e declaração de responsabilidade para Form Designers",

app/frontend/src/internationalization/trans/chefs/ru/ru.json

@@ -761,10 +761,13 @@
     "createOnlineTitle": "Создавайте онлайн-формы для сбора информации от ваших клиентов и улучшения рабочих процессов.",
     "getStarted": "Начать"
   },
-  "create": {
-    "createNewForm": "Создать новую форму",
+  "baseStepper": {
     "setUpForm": "Настройка формы",
     "designForm": "Форма дизайна",
+    "manageForm": "Управление формой"
+    },
+  "create": {
+    "createNewForm": "Создать новую форму",
     "formSettings": "Настройки формы",
     "disclaimer": "Отказ от ответственности",
     "disclaimerStmt": "Я согласен с заявлением об отказе от ответственности и заявлением об ответственности дизайнеров форм",

app/frontend/src/internationalization/trans/chefs/tl/tl.json

@@ -762,10 +762,13 @@
     "createOnlineTitle": "Lumikha ng mga online na form upang mangolekta ng impormasyon mula sa iyong mga kliyente at pagbutihin ang iyong mga daloy ng trabaho.",
     "getStarted": "Magsimula"
   },
-  "create": {
-    "createNewForm": "Lumikha ng Bagong Form",
+  "baseStepper": {
     "setUpForm": "I-set up ang Form",
     "designForm": "Form ng Disenyo",
+    "manageForm": "Pamahalaan ang Form"
+    },
+  "create": {
+    "createNewForm": "Lumikha ng Bagong Form",
     "formSettings": "Mga Setting ng Form",
     "disclaimer": "Disclaimer",
     "disclaimerStmt": "Sumasang-ayon ako sa disclaimer at pahayag ng responsibilidad para sa mga Form Designer",