Update step text element [SCI-8880]

Gemfile.lock

@@ -772,7 +772,7 @@ DEPENDENCIES
   omniauth-okta!
   omniauth-rails_csrf_protection (~> 1.0)
   overcommit
-  pg (~> 1.1)
+  pg (~> 1.5)
   pg_search
   pry
   pry-byebug

app/assets/stylesheets/application.scss

@@ -91,6 +91,7 @@
 @import "reports/*";
 @import "settings/*";
 @import "shared/*";
+@import "shared/content/*";
 @import "steps/*";
 @import "themes/*";
 

app/assets/stylesheets/application.tailwind.css

@@ -5,6 +5,9 @@
 @tailwind components;
 @tailwind utilities;
 
+.tw-hidden {
+  @apply hidden
+}
 
 html {
   font-size: 16px;

app/assets/stylesheets/shared/content/text.scss

@@ -0,0 +1,27 @@
+.content__text-container {
+
+  // TinyMCE table of contents
+  .mce-toc ul,
+  .mce-toc li {
+    list-style-type: none;
+  }
+
+  .img-responsive {
+    display: inline;
+    vertical-align: baseline;
+  }
+
+  .view-text-element {
+    a {
+      pointer-events: initial;
+    }
+  }
+
+  img {
+    max-width: 100%;
+  }
+
+  &:hover:not(.edit):not(.locked) {
+    background: $color-concrete;
+  }
+}

app/assets/stylesheets/steps/components/text.scss

@@ -1,83 +0,0 @@
-.step-text-container {
-  display: flex;
-  border-radius: 4px;
-  margin-bottom: 16px;
-  padding-left: var(--left-component-padding);
-  position: relative;
-  width: calc(100% + 16px);
-
-  // TinyMCE table of contents
-  .mce-toc ul,
-  .mce-toc li {
-    list-style-type: none;
-  }
-
-  .step-element-grip-placeholder {
-    flex: 0;
-  }
-
-  .img-responsive {
-    display: inline;
-    vertical-align: baseline;
-  }
-
-  .view-text-element {
-    a {
-      pointer-events: initial;
-    }
-  }
-
-  .empty-text-element {
-    color: $color-silver-chalice;
-  }
-
-  .buttons-container {
-    background: linear-gradient(
-      90deg,
-      transparent 0%,
-      $color-concrete 25%,
-      $color-concrete 100%
-    );
-    border-radius: 4px;
-    opacity: 0;
-    padding-left: 2em;
-    position: absolute;
-    right: 0;
-  }
-
-
-  .step-element-grip {
-    align-items: center;
-    color: $color-silver-chalice;
-    display: none;
-    height: 100%;
-    justify-content: center;
-    left: 0;
-    padding: .5em;
-    position: absolute;
-  }
-
-  img {
-    max-width: 100%;
-  }
-
-  &:hover:not(.edit):not(.locked) {
-    background: $color-concrete;
-
-    .buttons-container {
-      display: flex;
-      opacity: 1;
-    }
-
-    .step-element-grip {
-      display: flex;
-    }
-  }
-
-  &.edit {
-    .buttons-container,
-    .step-element-grip {
-      display: none;
-    }
-  }
-}

app/assets/stylesheets/steps/step.scss

@@ -1,8 +1,6 @@
 // scss-lint:disable SelectorDepth
 // scss-lint:disable NestingDepth
 
-@import "components/*";
-
 .step-container {
   --left-component-padding: 2rem;
   border: $border-transparent;

app/controllers/step_elements/texts_controller.rb

@@ -60,7 +60,7 @@ module StepElements
     private
 
     def step_text_params
-      params.require(:step_text).permit(:text)
+      params.require(:text_component).permit(:text)
     end
 
     def load_step_text

app/javascript/vue/protocol/container.vue

@@ -149,7 +149,6 @@
         </div>
       </div>
     </div>
-    <ProtocolModals/>
     <ReorderableItemsModal v-if="reordering"
       :title="i18n.t('protocols.reorder_steps.modal.title')"
       :items="steps"
@@ -170,7 +169,6 @@
   import Step from './step'
   import ProtocolMetadata from './protocolMetadata'
   import ProtocolOptions from './protocolOptions'
-  import ProtocolModals from './modals'
   import Tinymce from '../shared/tinymce.vue'
   import ReorderableItemsModal from './modals/reorderable_items_modal.vue'
   import PublishProtocol from './modals/publish_protocol.vue'
@@ -185,7 +183,7 @@
         required: true
       }
     },
-    components: { Step, InlineEdit, ProtocolModals, ProtocolOptions, Tinymce, ReorderableItemsModal, ProtocolMetadata, PublishProtocol },
+    components: { Step, InlineEdit, ProtocolOptions, Tinymce, ReorderableItemsModal, ProtocolMetadata, PublishProtocol },
     mixins: [UtilsMixin],
     computed: {
       inRepository() {

app/javascript/vue/protocol/modals.vue

@@ -1,12 +0,0 @@
-<template>
-  <div class="protocol-modals">
-  </div>
-</template>
-<script>
-  import deleteElementModal from './modals/delete_element.vue'
-
-  export default {
-    name: 'ProtocolModals',
-    components: { deleteElementModal }
-  }
-</script>

app/javascript/vue/protocol/step.vue

@@ -199,9 +199,9 @@
   }
 
   import InlineEdit from '../shared/inline_edit.vue'
-  import StepTable from './step_elements/table.vue'
-  import StepText from './step_elements/text.vue'
-  import Checklist from './step_elements/checklist.vue'
+  import StepTable from '../shared/content/table.vue'
+  import StepText from '../shared/content/text.vue'
+  import Checklist from '../shared/content/checklist.vue'
   import deleteStepModal from './modals/delete_step.vue'
   import Attachments from './attachments.vue'
   import fileModal from './step_attachments/file_modal.vue'

app/javascript/vue/shared/content/checklist.vue

@@ -79,11 +79,11 @@
 </template>
 
  <script>
-  import DeleteMixin from '../mixins/components/delete.js'
-  import DuplicateMixin from '../mixins/components/duplicate.js'
-  import deleteElementModal from '../modals/delete_element.vue'
-  import InlineEdit from '../../shared/inline_edit.vue'
-  import ChecklistItem from '../step_elements/checklistItem.vue'
+  import DeleteMixin from './mixins/delete.js'
+  import DuplicateMixin from './mixins/duplicate.js'
+  import deleteElementModal from './modal/delete.vue'
+  import InlineEdit from '../inline_edit.vue'
+  import ChecklistItem from './checklistItem.vue'
   import Draggable from 'vuedraggable'
 
   export default {

app/javascript/vue/shared/content/checklistItem.vue

@@ -52,9 +52,9 @@
 </template>
 
  <script>
-  import DeleteMixin from '../mixins/components/delete.js'
-  import InlineEdit from '../../shared/inline_edit.vue'
-  import deleteElementModal from '../modals/delete_element.vue'
+  import DeleteMixin from './mixins/delete.js'
+  import InlineEdit from '../inline_edit.vue'
+  import deleteElementModal from './modal/delete.vue'
 
   export default {
     name: 'ChecklistItem',

app/javascript/vue/shared/content/table.vue

@@ -59,11 +59,11 @@
 </template>
 
  <script>
-  import DeleteMixin from '../mixins/components/delete.js'
-  import DuplicateMixin from '../mixins/components/duplicate.js'
-  import deleteElementModal from '../modals/delete_element.vue'
-  import InlineEdit from '../../shared/inline_edit.vue'
-  import TableNameModal from '../modals/table_name_modal.vue'
+  import DeleteMixin from './mixins/delete.js'
+  import DuplicateMixin from './mixins/duplicate.js'
+  import deleteElementModal from './modal/delete.vue'
+  import InlineEdit from '../inline_edit.vue'
+  import TableNameModal from './modal/table_name.vue'
 
   export default {
     name: 'StepTable',

app/javascript/vue/shared/content/text.vue

@@ -1,10 +1,14 @@
 <template>
-  <div class="step-text-container" :class="{ 'edit': inEditMode, 'step-element--locked': !element.attributes.orderable.urls.update_url }" @keyup.enter="enableEditMode($event)" tabindex="0">
-    <div v-if="reorderElementUrl" class="step-element-grip" @click="$emit('reorder')">
+  <div class="content__text-container flex rounded pl-10 mb-4 relative w-full group/text_container" :class="{ 'edit': inEditMode, 'component__element--locked': !element.attributes.orderable.urls.update_url }" @keyup.enter="enableEditMode($event)" tabindex="0">
+    <div v-if="reorderElementUrl"
+         class="absolute items-center h-full justify-center left-0 p-2 tw-hidden text-sn-grey"
+         :class="{ 'group-hover/text_container:flex': !inEditMode }"
+         @click="$emit('reorder')"
+    >
       <i class="sn-icon sn-icon-sort"></i>
     </div>
-    <div v-else class="step-element-grip-placeholder"></div>
-    <div class="buttons-container">
+    <div v-else class="flex-none"></div>
+    <div class="bg-sn-light-grey rounded absolute right-0 flex z-10 tw-hidden" :class="{ 'group-hover/text_container:flex': !inEditMode && element.attributes.orderable.urls.update_url }">
       <button v-if="element.attributes.orderable.urls.update_url" class="btn icon-btn btn-light btn-sm" tabindex="0" @click="enableEditMode($event)">
         <i class="sn-icon sn-icon-edit"></i>
       </button>
@@ -22,9 +26,9 @@
       :placeholder="element.attributes.orderable.placeholder"
       :inEditMode="inEditMode || isNew"
       :updateUrl="element.attributes.orderable.urls.update_url"
-      :objectType="'StepText'"
+      :objectType="'TextContent'"
       :objectId="element.attributes.orderable.id"
-      :fieldName="'step_text[text]'"
+      :fieldName="'text_component[text]'"
       :lastUpdated="element.attributes.orderable.updated_at"
       :assignableMyModuleId="assignableMyModuleId"
       :characterLimit="1000000"
@@ -33,7 +37,7 @@
       @editingEnabled="enableEditMode"
     />
     <div class="view-text-element" v-else-if="element.attributes.orderable.text_view" v-html="element.attributes.orderable.text_view"></div>
-    <div v-else class="empty-text-element">
+    <div v-else class="text-sn-grey">
       {{ i18n.t("protocols.steps.text.empty_text") }}
     </div>
     <deleteElementModal v-if="confirmingDelete" @confirm="deleteElement($event)" @cancel="closeDeleteModal"/>
@@ -41,13 +45,13 @@
 </template>
 
  <script>
-  import DeleteMixin from '../mixins/components/delete.js'
-  import DuplicateMixin from '../mixins/components/duplicate.js'
-  import deleteElementModal from '../modals/delete_element.vue'
-  import Tinymce from '../../shared/tinymce.vue'
+  import DeleteMixin from './mixins/delete.js'
+  import DuplicateMixin from './mixins/duplicate.js'
+  import deleteElementModal from './modal/delete.vue'
+  import Tinymce from '../tinymce.vue'
 
   export default {
-    name: 'StepText',
+    name: 'TextContent',
     components: { deleteElementModal, Tinymce },
     mixins: [DeleteMixin, DuplicateMixin],
     props: {