Fixes oppia#20080 : Multiple Input Fields Exceeding MaxLength in Topi…

…c and Subtopic Editor. (oppia#20081) * exploration editor acceptance test * fixed linting failures * linting error fixed * linting errors fixed * linter * fixex * fixing * fixes * lint * correction * correction * correction * correction * flakes fixed * fixed flakes * fixed flakes * Update e2e_lighthouse_performance_acceptance_tests.yml * Update e2e_lighthouse_performance_acceptance_tests.yml * lint * lint * parameterized the functions * lint * lint fix * lint * lint fix * lint fix * lint * fixes * lints * lint fixes * lint fix * lint fix * resolved conflicts * migrated to ts * lint fix * lint fix * lint fix * type fix * lint fix * refactoring * changes * updating * lint * correction * lint * lint * updated * correct * corrected the maxlength issue * updates * updates * updates
Ash-2k3 · Mar 31, 2024 · 8a4fda4 · 8a4fda4
1 parent 4f7557e
commit 8a4fda4
Show file tree

Hide file tree

Showing 10 changed files with 69 additions and 20 deletions.
diff --git a/core/templates/pages/topic-editor-page/editor-tab/topic-editor-tab.directive.html b/core/templates/pages/topic-editor-page/editor-tab/topic-editor-tab.directive.html
@@ -38,11 +38,11 @@ <h3 class="topic-card-header">Details</h3>
                      [(ngModel)]="editableName"
                      (blur)="updateTopicName(editableName)"
                      placeholder="Enter a name for the topic."
-                     [maxlength]="MAX_CHARS_IN_TOPIC_NAME"
+                     [maxlength]="maxCharsInTopicName"
                      [ngClass]="{'is-invalid': topicNameExists}">
               <span class="oppia-input-box-subtitle">
                 <em>
-                  Topic name should be at most {{ MAX_CHARS_IN_TOPIC_NAME }} characters.
+                  Topic name should be at most {{ maxCharsInTopicName }} characters.
                 </em>
               </span>
               <div *ngIf="topicNameExists" class="oppia-input-box-subtitle text-danger">
@@ -62,12 +62,12 @@ <h3 class="topic-card-header">Details</h3>
                      [disabled]="!topicRights.canEditTopic()"
                      [(ngModel)]="editableTopicUrlFragment"
                      (blur)="updateTopicUrlFragment(editableTopicUrlFragment)"
-                     [maxlength]="MAX_CHARS_IN_TOPIC_URL_FRAGMENT"
+                     [maxlength]="maxCharsInTopicUrlFragment"
                      [ngClass]="{'is-invalid': topicUrlFragmentExists}"
                      trim>
               <span class="oppia-input-box-subtitle">
                 <em>
-                  The topic URL fragment is used to uniquely access the topic viewer page. It should consist of one or more hyphen-separated words, all in lowercase, with at most {{ MAX_CHARS_IN_TOPIC_URL_FRAGMENT }} characters in total. Please use meaningful keywords, and avoid using words like "and", "of", or "the".
+                  The topic URL fragment is used to uniquely access the topic viewer page. It should consist of one or more hyphen-separated words, all in lowercase, with at most {{ maxCharsInTopicUrlFragment }} characters in total. Please use meaningful keywords, and avoid using words like "and", "of", or "the".
                   This topic can be accessed at the following URL:<br>
                   {{ hostname }}/learn/{{ getClassroomUrlFragment() }}/{{ editableTopicUrlFragment }}
                 </em>
@@ -86,7 +86,7 @@ <h3 class="topic-card-header">Details</h3>
               <textarea type="text"
                         class="form-control topic-description e2e-test-topic-description-field"
                         [(ngModel)]="editableDescription"
-                        [maxlength]="MAX_CHARS_IN_TOPIC_DESCRIPTION"
+                        [maxlength]="maxCharsInTopicDescription"
                         (change)="updateTopicDescriptionStatus(editableDescription)"
                         (blur)="updateTopicDescription(editableDescription)"
                         [disabled]="!topicRights.canEditTopic()"
@@ -95,7 +95,7 @@ <h3 class="topic-card-header">Details</h3>
               </textarea>
               <span class="oppia-input-box-subtitle">
                 <em>
-                  Topic description should be at most {{ MAX_CHARS_IN_TOPIC_DESCRIPTION }} characters.
+                  Topic description should be at most {{ maxCharsInTopicDescription }} characters.
                 </em>
               </span>
               <span *ngIf="editableDescriptionIsEmpty && topicDescriptionChanged" class="form-text">
@@ -112,7 +112,7 @@ <h3 class="topic-card-header">Details</h3>
               <textarea type="text"
                         class="form-control topic-description e2e-test-topic-page-title-fragment-field"
                         [(ngModel)]="editablePageTitleFragmentForWeb"
-                        [maxlength]="MAX_CHARS_IN_PAGE_TITLE_FRAGMENT_FOR_WEB"
+                        [maxlength]="maxCharsInPageTitleFragmentForWeb"
                         (blur)="updateTopicPageTitleFragmentForWeb(editablePageTitleFragmentForWeb)"
                         [disabled]="!topicRights.canEditTopic()"
                         aria-label="Page Title Fragment"
@@ -121,7 +121,7 @@ <h3 class="topic-card-header">Details</h3>
               <span class="oppia-input-box-subtitle">
                 <em>
                   Enter the middle component of the page title. For example, if you enter "Add, Subtract, Multiply and Divide" it will show up in the browser tab as "Learn {{ editableName }} | Add, Subtract, Multiply and Divide | Oppia".
-                  It should be at least {{ MIN_CHARS_IN_PAGE_TITLE_FRAGMENT_FOR_WEB }} and at most {{ MAX_CHARS_IN_PAGE_TITLE_FRAGMENT_FOR_WEB }} characters.
+                  It should be at least {{ minCharsInPageTitleFragmentForWeb }} and at most {{ maxCharsInPageTitleFragmentForWeb }} characters.
                 </em>
               </span>
             </div>
@@ -134,7 +134,7 @@ <h3 class="topic-card-header">Details</h3>
               <textarea type="text"
                         class="form-control topic-description e2e-test-topic-meta-tag-content-field"
                         [(ngModel)]="editableMetaTagContent"
-                        [maxlength]="MAX_CHARS_IN_META_TAG_CONTENT"
+                        [maxlength]="maxCharsInMetaTagContent"
                         (blur)="updateTopicMetaTagContent(editableMetaTagContent)"
                         [disabled]="!topicRights.canEditTopic()"
                         placeholder="Enter the meta tag content for the topic"
@@ -143,7 +143,7 @@ <h3 class="topic-card-header">Details</h3>
               <span class="oppia-input-box-subtitle">
                 <em>
                   Meta tags provide information about the webpage. This information will not displayed on the page but it can be read by search engines and web crawlers. This text will be shown to users in seach engine results.
-                  Topic meta tag content should be at most {{ MAX_CHARS_IN_META_TAG_CONTENT }} characters.
+                  Topic meta tag content should be at most {{ maxCharsInMetaTagContent }} characters.
                 </em>
               </span>
             </div>

diff --git a/core/templates/pages/topic-editor-page/editor-tab/topic-editor-tab.directive.spec.ts b/core/templates/pages/topic-editor-page/editor-tab/topic-editor-tab.directive.spec.ts
@@ -29,6 +29,7 @@ import {ShortSkillSummary} from 'domain/skill/short-skill-summary.model';
 import {Subtopic} from 'domain/topic/subtopic.model';
 import {StoryReference} from 'domain/topic/story-reference-object.model';
 import {Topic} from 'domain/topic/topic-object.model';
+import {AppConstants} from 'app.constants';
 import {ImageUploadHelperService} from 'services/image-upload-helper.service';
 import {UrlInterpolationService} from 'domain/utilities/url-interpolation.service';
 import {TopicEditorStateService} from 'pages/topic-editor-page/services/topic-editor-state.service';
@@ -249,6 +250,24 @@ describe('Topic editor tab directive', () => {
     expect(component.SUBTOPIC_LIST).toEqual('subtopic');
     expect(component.SKILL_LIST).toEqual('skill');
     expect(component.STORY_LIST).toEqual('story');
+    expect(component.maxCharsInTopicName).toEqual(
+      AppConstants.MAX_CHARS_IN_TOPIC_NAME
+    );
+    expect(component.maxCharsInTopicUrlFragment).toEqual(
+      AppConstants.MAX_CHARS_IN_TOPIC_URL_FRAGMENT
+    );
+    expect(component.maxCharsInTopicDescription).toEqual(
+      AppConstants.MAX_CHARS_IN_TOPIC_DESCRIPTION
+    );
+    expect(component.maxCharsInPageTitleFragmentForWeb).toEqual(
+      AppConstants.MAX_CHARS_IN_PAGE_TITLE_FRAGMENT_FOR_WEB
+    );
+    expect(component.maxCharsInMetaTagContent).toEqual(
+      AppConstants.MAX_CHARS_IN_META_TAG_CONTENT
+    );
+    expect(component.minCharsInPageTitleFragmentForWeb).toEqual(
+      AppConstants.MIN_CHARS_IN_PAGE_TITLE_FRAGMENT_FOR_WEB
+    );
   });
 
   it('should call EntityCreationService to create skill', () => {

diff --git a/core/templates/pages/topic-editor-page/editor-tab/topic-editor-tab.directive.ts b/core/templates/pages/topic-editor-page/editor-tab/topic-editor-tab.directive.ts
@@ -92,6 +92,12 @@ export class TopicEditorTabComponent implements OnInit, OnDestroy {
   uncategorizedEditOptionsIndex: number;
   subtopicEditOptionsAreShown: number;
   skillOptionDialogueBox: boolean = true;
+  maxCharsInTopicName!: number;
+  maxCharsInTopicUrlFragment!: number;
+  maxCharsInTopicDescription!: number;
+  maxCharsInPageTitleFragmentForWeb!: number;
+  maxCharsInMetaTagContent!: number;
+  minCharsInPageTitleFragmentForWeb!: number;
 
   constructor(
     private contextService: ContextService,
@@ -651,6 +657,16 @@ export class TopicEditorTabComponent implements OnInit, OnDestroy {
     );
     this.initEditor();
     this._initStorySummaries();
+    this.maxCharsInTopicName = AppConstants.MAX_CHARS_IN_TOPIC_NAME;
+    this.maxCharsInTopicUrlFragment =
+      AppConstants.MAX_CHARS_IN_TOPIC_URL_FRAGMENT;
+    this.maxCharsInTopicDescription =
+      AppConstants.MAX_CHARS_IN_TOPIC_DESCRIPTION;
+    this.maxCharsInPageTitleFragmentForWeb =
+      AppConstants.MAX_CHARS_IN_PAGE_TITLE_FRAGMENT_FOR_WEB;
+    this.maxCharsInMetaTagContent = AppConstants.MAX_CHARS_IN_META_TAG_CONTENT;
+    this.minCharsInPageTitleFragmentForWeb =
+      AppConstants.MIN_CHARS_IN_PAGE_TITLE_FRAGMENT_FOR_WEB;
   }
 
   ngOnDestroy(): void {

diff --git a/...emplates/pages/topic-editor-page/modal-templates/create-new-subtopic-modal.component.html b/...emplates/pages/topic-editor-page/modal-templates/create-new-subtopic-modal.component.html
@@ -63,7 +63,7 @@ <h3>
       </div>
 
       <div class="thumbnail-editor e2e-test-subtopic-thumbnail e2e-test-photo-button create-new-subtopic-input-field">
-        <strong>Thubmnail Image*</strong>
+        <strong>Thumbnail Image*</strong>
         <oppia-thumbnail-uploader (updateFilename)="updateSubtopicThumbnailFilename($event)"
                                   [useLocalStorage]="false"
                                   [bgColor]="editableThumbnailBgColor"

diff --git a/...lates/pages/topic-editor-page/modal-templates/create-new-subtopic-modal.component.spec.ts b/...lates/pages/topic-editor-page/modal-templates/create-new-subtopic-modal.component.spec.ts
@@ -206,7 +206,7 @@ describe('create new subtopic modal', function () {
 
   it(
     'should update editableThumbnailFilename when ' +
-      'filename updated in "Thubmnail Image" modal',
+      'filename updated in "Thumbnail Image" modal',
     () => {
       let newFileName = 'shivamOppiaFile';
       component.updateSubtopicThumbnailFilename(newFileName);
@@ -217,7 +217,7 @@ describe('create new subtopic modal', function () {
 
   it(
     'should update ThumbnailBgColor when ' +
-      'user select new color in "Thubmnail Image" modal',
+      'user select new color in "Thumbnail Image" modal',
     () => {
       let newThumbnailBgColor = 'red';
       component.updateSubtopicThumbnailBgColor(newThumbnailBgColor);

diff --git a/...ages/topic-editor-page/modal-templates/rearrange-skills-in-subtopics-modal.component.html b/...ages/topic-editor-page/modal-templates/rearrange-skills-in-subtopics-modal.component.html
@@ -73,7 +73,7 @@ <h3>
             </div>
           </div>
           <div *ngIf="subtopic.getId() === selectedSubtopicId">
-            <input type="text" [(ngModel)]="editableName">
+            <input type="text" [(ngModel)]="editableName" maxlength="{{maxCharsInSubtopicTitle}}">
             <button class="btn btn-secondary"
                     (click)="editNameOfSubtopicWithId(null)">
               Cancel

diff --git a/.../pages/topic-editor-page/modal-templates/rearrange-skills-in-subtopics-modal.component.ts b/.../pages/topic-editor-page/modal-templates/rearrange-skills-in-subtopics-modal.component.ts
@@ -32,6 +32,7 @@ import {
   moveItemInArray,
   transferArrayItem,
 } from '@angular/cdk/drag-drop';
+import {AppConstants} from 'app.constants';
 
 @Component({
   selector: 'oppia-rearrange-skills-in-subtopics-modal',
@@ -49,6 +50,7 @@ export class RearrangeSkillsInSubtopicsModalComponent
   errorMsg: string;
   editableName: string;
   selectedSubtopicId: number;
+  maxCharsInSubtopicTitle: number = AppConstants.MAX_CHARS_IN_SUBTOPIC_TITLE;
 
   SKILL_EDITOR_URL_TEMPLATE = '/skill_editor/<skillId>';
   directiveSubscriptions = new Subscription();

diff --git a/core/templates/pages/topic-editor-page/subtopic-editor/subtopic-editor-tab.component.html b/core/templates/pages/topic-editor-page/subtopic-editor/subtopic-editor-tab.component.html
@@ -37,19 +37,19 @@ <h3 class="subtopic-card-heading">Review Material</h3>
                      [(ngModel)]="editableTitle"
                      aria-label="Input field to add Subtopic title"
                      [ngModelOptions]="{standalone: true}"
-                     maxlength="MAX_CHARS_IN_SUBTOPIC_TITLE"
+                     [maxlength]="maxCharsInSubtopicTitle"
                      (change)="resetErrorMsg()">
               <span class="oppia-input-box-subtitle">
                 <em>
-                  Subtopic title should be at most {{ MAX_CHARS_IN_SUBTOPIC_TITLE }} characters.
+                  Subtopic title should be at most {{ maxCharsInSubtopicTitle }} characters.
                 </em>
               </span>
             </form>
             <span class="form-text error-msg" *ngIf="errorMsg">
               <em>{{ errorMsg }}</em>
             </span>
-            <span class="form-text error-message" *ngIf="editableTitle?.length === 80">
-              <em>The maximum length of subtopic title is 80 characters.</em>
+            <span class="form-text error-message" *ngIf="editableTitle?.length === maxCharsInSubtopicTitle">
+              <em>The maximum length of subtopic title is {{ maxCharsInSubtopicTitle }} characters.</em>
             </span>
           </div>
           <div class="subtopic-url-fragment" tabindex="0">
@@ -64,15 +64,21 @@ <h3 class="subtopic-card-heading">Review Material</h3>
                      [(ngModel)]="editableUrlFragment"
                      aria-label="Input field to add Subtopic URL"
                      [ngModelOptions]="{standalone: true}"
-                     maxlength="MAX_CHARS_IN_SUBTOPIC_URL_FRAGMENT">
+                     [maxlength]="maxCharsInSubtopicUrlFragment">
               <span class="oppia-input-box-subtitle">
                 <em>
-                  The subtopic URL fragment is used to uniquely access the subtopic viewer page. It should consist of one or more hyphen-separated words, all in lowercase, with at most {{ MAX_CHARS_IN_SUBTOPIC_URL_FRAGMENT }} characters in total and must be unique across the topic. Please use meaningful keywords, and avoid using words like "and", "of", or "the".
+                  The subtopic URL fragment is used to uniquely access the subtopic viewer page. It should consist of one or more hyphen-separated words, all in lowercase, with at most {{ maxCharsInSubtopicUrlFragment }} characters in total and must be unique across the topic. Please use meaningful keywords, and avoid using words like "and", "of", or "the".
                   This subtopic can be accessed at the following URL:<br>
                   {{ hostname }}/learn/{{ classroomUrlFragment }}/{{ topic?.getUrlFragment() }}/revision/{{ editableUrlFragment }}
                 </em>
               </span>
             </form>
+            <span class="form-text error-msg" *ngIf="errorMsg">
+              <em>{{ errorMsg }}</em>
+            </span>
+            <span class="form-text error-message" *ngIf="editableUrlFragment?.length === maxCharsInSubtopicUrlFragment">
+              <em>The maximum length of subtopic title is {{ maxCharsInSubtopicUrlFragment }} characters.</em>
+            </span>
             <div class="oppia-input-box-subtitle text-danger"
                  *ngIf="editableUrlFragment && subtopicUrlFragmentExists" aria-live="polite">
               <em>The subtopic url fragment is not unique.</em>

diff --git a/core/templates/pages/topic-editor-page/subtopic-editor/subtopic-editor-tab.component.ts b/core/templates/pages/topic-editor-page/subtopic-editor/subtopic-editor-tab.component.ts
@@ -67,6 +67,8 @@ export class SubtopicEditorTabComponent implements OnInit, OnDestroy {
   skillsListIsShown: boolean;
   subtopicEditorCardIsShown: boolean;
   selectedSkillEditOptionsIndex: number;
+  maxCharsInSubtopicTitle!: number;
+  maxCharsInSubtopicUrlFragment!: number;
   SUBTOPIC_PAGE_SCHEMA: {type: string; ui_config: {rows: number}};
 
   constructor(
@@ -338,6 +340,9 @@ export class SubtopicEditorTabComponent implements OnInit, OnDestroy {
     if (this.topicEditorStateService.hasLoadedTopic()) {
       this.initEditor();
     }
+    this.maxCharsInSubtopicTitle = AppConstants.MAX_CHARS_IN_SUBTOPIC_TITLE;
+    this.maxCharsInSubtopicUrlFragment =
+      AppConstants.MAX_CHARS_IN_SUBTOPIC_URL_FRAGMENT;
   }
 
   ngOnDestroy(): void {

diff --git a/...lates/pages/topics-and-skills-dashboard-page/modals/create-new-topic-modal.component.html b/...lates/pages/topics-and-skills-dashboard-page/modals/create-new-topic-modal.component.html
@@ -52,6 +52,7 @@ <h3>
       <div>
         <input class="e2e-test-new-page-title-fragm-field required"
                [(ngModel)]="newlyCreatedTopic.pageTitleFragment"
+               [maxlength]="maxWebTitleFrag"
                [ngModelOptions]="{standalone: true}">
       </div>
       <span class="oppia-input-box-subtitle">