Merge pull request #5897 from Abishekcs/fix/disable-field-editing-aft…

…er-sync Disable editing of title, school and term/when fields after event sync
WikiEducationFoundation · Jul 15, 2024 · b795ae8 · b795ae8
2 parents e1bcac3 + 8878cc8
commit b795ae8
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 34 deletions.
diff --git a/app/assets/javascripts/components/overview/details.jsx b/app/assets/javascripts/components/overview/details.jsx
@@ -143,32 +143,53 @@ const Details = createReactClass({
     const canRename = this.canRename();
     const isClassroomProgramType = this.props.course.type === 'ClassroomProgramCourse';
     const timelineDatesDiffer = this.props.course.start !== this.props.course.timeline_start || this.props.course.end !== this.props.course.timeline_end;
+    const eventSync = this.props.course.flags.event_sync;
+
     let campus;
     let staff;
     let school;
     let academic_system;
+    let online;
+    let eventSyncTooltip;
+
     if (Features.wikiEd) {
       staff = <WikiEdStaff {...this.props} />;
       campus = <CampusVolunteers {...this.props} />;
     }
-    let online;
+
     if (Features.wikiEd || this.props.course.online_volunteers_enabled) {
       online = <OnlineVolunteers {...this.props} />;
     }
 
+    if (eventSync && canRename) {
+      eventSyncTooltip = (
+        <div className="tooltip-trigger">
+          <img src="/assets/images/info.svg" alt="tooltip default logo" />
+          <div className="tooltip large dark">
+            <p>
+              {I18n.t('courses.event_sync')}
+            </p>
+          </div>
+        </div>
+      );
+    }
+
     if (this.props.course.school || canRename) {
       school = (
-        <TextInput
-          id="school-input"
-          onChange={this.updateSlugPart}
-          value={this.props.course.school}
-          value_key="school"
-          validation={CourseUtils.courseSlugRegex()}
-          editable={canRename}
-          type="text"
-          label={CourseUtils.i18n('school', this.props.course.string_prefix)}
-          required={true}
-        />
+        <div className={eventSync ? 'event-sync' : ''}>
+          <TextInput
+            id="school-input"
+            onChange={this.updateSlugPart}
+            value={this.props.course.school}
+            value_key="school"
+            validation={CourseUtils.courseSlugRegex()}
+            editable={eventSync ? false : canRename}
+            type="text"
+            label={CourseUtils.i18n('school', this.props.course.string_prefix)}
+            required={true}
+          />
+          {eventSyncTooltip}
+        </div>
       );
     }
 
@@ -191,34 +212,41 @@ const Details = createReactClass({
     let title;
     if (canRename) {
       title = (
-        <TextInput
-          id="title-input"
-          onChange={this.updateSlugPart}
-          value={this.props.course.title}
-          value_key="title"
-          validation={CourseUtils.courseSlugRegex()}
-          editable={canRename}
-          type="text"
-          label={CourseUtils.i18n('title', this.props.course.string_prefix)}
-          required={true}
-        />
+        <div className={eventSync ? 'event-sync' : ''}>
+          <TextInput
+            id="title-input"
+            onChange={this.updateSlugPart}
+            value={this.props.course.title}
+            value_key="title"
+            validation={CourseUtils.courseSlugRegex()}
+            editable={eventSync ? false : canRename}
+            type="text"
+            label={CourseUtils.i18n('title', this.props.course.string_prefix)}
+            required={true}
+          />
+          {eventSyncTooltip}
+        </div>
       );
     }
 
     let term;
+
     if (this.props.course.term || canRename) {
       term = (
-        <TextInput
-          id="term-input"
-          onChange={this.updateSlugPart}
-          value={this.props.course.term}
-          value_key="term"
-          validation={CourseUtils.courseSlugRegex()}
-          editable={canRename}
-          type="text"
-          label={CourseUtils.i18n('term', this.props.course.string_prefix)}
-          required={false}
-        />
+        <div className={eventSync ? 'event-sync' : ''}>
+          <TextInput
+            id="term-input"
+            onChange={this.updateSlugPart}
+            value={this.props.course.term}
+            value_key="term"
+            validation={CourseUtils.courseSlugRegex()}
+            editable= {eventSync ? false : canRename}
+            type="text"
+            label={CourseUtils.i18n('term', this.props.course.string_prefix)}
+            required={false}
+          />
+          {eventSyncTooltip}
+        </div>
       );
     }
 

diff --git a/app/assets/stylesheets/modules/_course.styl b/app/assets/stylesheets/modules/_course.styl
@@ -151,6 +151,10 @@ rating(color)
     width 700px
     margin-top 200px
 
+.event-sync
+  width 100%
+  display inline-flex
+
 .rating
   round-placeholder(23)
   rating(#D2D2D2)

diff --git a/config/locales/en.yml b/config/locales/en.yml
@@ -667,6 +667,7 @@ en:
     enrollment_edits_enabled_tooltip: >
       If enabled, the dashboard will post a template to the userpage and talk page of
       each editor who joins the program.
+    event_sync: "Editing disabled: This field cannot be changed because the course is already linked to an event. Changing it would disrupt the event's integration."
     courses_enrolled: Courses enrolled
     error:
       exists: That course already exists! Please try again with a different title, school, or term.