Merge pull request #3419 from NationalSecurityAgency/t#3418/position_top_in_iframe

#3418: use `position=top` for search dialog when displaying within an…

Author: sudo-may

dashboard/src/skills-display/components/SkillsDisplaySearch.vue

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 <script setup>
-import { nextTick, onMounted, ref } from 'vue'
+import { computed, nextTick, onMounted, ref } from 'vue'
 import SkillsDialog from '@/components/utils/inputForm/SkillsDialog.vue'
 import { useSkillsDisplayService } from '@/skills-display/services/UseSkillsDisplayService.js'
 import { useSkillsAnnouncer } from '@/common-components/utilities/UseSkillsAnnouncer.js'
@@ -24,7 +24,7 @@ import { useFocusState } from '@/stores/UseFocusState.js'
 import SkillsSpinner from '@/components/utils/SkillsSpinner.vue'
 import { useSkillsDisplayAttributesState } from '@/skills-display/stores/UseSkillsDisplayAttributesState.js'
 
-const emit = defineEmits(['level-changed', 'hidden']);
+const emit = defineEmits(['hidden']);
 const props = defineProps({
   projectId: {
     type: String,
@@ -139,6 +139,9 @@ const getTotalProgress = (skill) => {
 const getProgressLabel = (skill) => {
   return isSkill(skill) ? attributes.pointDisplayNamePlural : attributes.skillDisplayNamePlural
 }
+const dialogPosition = computed(() => {
+  return skillDisplayInfo.isSkillsClientPath() ? 'top' : 'center'
+});
 </script>
 
 <template>
@@ -149,6 +152,7 @@ const getProgressLabel = (skill) => {
       :aria-label="`Search for ${attributes.subjectDisplayName}s, ${attributes.skillDisplayName}s or Badges`"
       :enable-return-focus="true"
       @on-cancel="closeMe"
+      :position="dialogPosition"
       :show-header="false"
       :show-ok-button="false"
       :show-cancel-button="false"

e2e-tests/cypress/e2e/client-display/skills-display-training-wide-search_spec.js

@@ -205,7 +205,7 @@ describe('Training Keyboard Shortcuts Tests', () => {
         cy.get('[data-cy="trainingSearchDialog"]').should('be.visible')
     })
 
-    it('search dialog honers custom labels', () => {
+    it('search dialog honors custom labels', () => {
         cy.createProject(1);
         cy.createSubject(1, 1);
         cy.createSkill(1, 1, 1);
@@ -234,5 +234,60 @@ describe('Training Keyboard Shortcuts Tests', () => {
         cy.get('[data-cy="subjectName"]').first().should('have.text', "Course: Subject 1");
     });
 
+    it('client-display: training-wide search dialog is visible and displayed with position=top when in client-display iframe', () => {
+        cy.createProject(1)
+        cy.createSubject(1, 1)
+        cy.createSkill(1, 1, 1)
+        cy.createSkill(1, 1, 2)
+        cy.createSkill(1, 1, 3)
+        cy.createBadge(1, 1);
+        cy.assignSkillToBadge(1, 1, 1);
+        cy.createBadge(1, 1, { enabled: true });
+
+        cy.visit('/test-skills-client/proj1')
+        cy.wrapIframe().contains('Overall Points');
+
+        cy.wrapIframe().find('[data-cy="skillsDisplaySearchBtn"]').click()
+        cy.wait(1000)
+        cy.wrapIframe().find('[data-cy="trainingSearchDialog"]').should('be.visible')
+        cy.wrapIframe().find('[data-cy="trainingSearchDialog"]').first().then(($el) => {
+            const bounding = $el[0].getBoundingClientRect();
+            const windowWidth = Cypress.config('viewportWidth');
+            const windowHeight = Cypress.config('viewportHeight');
+
+            expect(bounding.top).to.be.gte(0);
+            expect(bounding.left).to.be.gte(0);
+            expect(bounding.right).to.be.lte(windowWidth);
+            expect(bounding.bottom).to.be.lte(windowHeight);
+        });
+    })
+
+    it('training-wide search dialog is visible and displayed with position=center when not in client-display iframe', () => {
+        cy.createProject(1)
+        cy.createSubject(1, 1)
+        cy.createSkill(1, 1, 1)
+        cy.createSkill(1, 1, 2)
+        cy.createSkill(1, 1, 3)
+        cy.createBadge(1, 1);
+        cy.assignSkillToBadge(1, 1, 1);
+        cy.createBadge(1, 1, { enabled: true });
+
+        cy.visit('/progress-and-rankings/projects/proj1');
+        cy.contains('Overall Points');
+
+        cy.get('[data-cy="skillsDisplaySearchBtn"]').click()
+        cy.wait(1000)
+        cy.get('[data-cy="trainingSearchDialog"]').should('be.visible')
+        cy.get('[data-cy="trainingSearchDialog"]').first().then(($el) => {
+            const bounding = $el[0].getBoundingClientRect();
+            const windowWidth = Cypress.config('viewportWidth');
+            const windowHeight = Cypress.config('viewportHeight');
+
+            expect(bounding.top).to.be.gte(0);
+            expect(bounding.left).to.be.gte(0);
+            expect(bounding.right).to.be.lte(windowWidth);
+            expect(bounding.bottom).to.be.lte(windowHeight);
+        });
+    })
 
 })