Uploaded image for project: 'Percona Monitoring and Management'
  1. Percona Monitoring and Management
  2. PMM-5796

Get rid of imperative code style in React components

    XMLWordPrintable

    Details

    • Type: Admin & Maintenance Task
    • Status: Done
    • Priority: Low
    • Resolution: Fixed
    • Affects Version/s: None
    • Fix Version/s: 2.7.0
    • Component/s: PMM UI
    • Labels:
    • Story Points:
      2
    • Sprint:
      Platform Sprint 17
    • Needs Review:
      Yes
    • Needs QA:
      Yes

      Description

      React shines best when the reactive pattern is applied. In our code we should try to stick to only one pattern - reactive - and avoid imperative patterns coming mostly from pre-React times (think jQuery, dojo etc). The mix of patterns would make it impossible to maintain the application, ever growing in size and complexity.
      Therefore, we shall refactor components violating this rule.

      Example: 

      // this is imperative
      class Styling {  static addPluginPanelClass(panelWrapperSelector = '#antd',   newClass = 'custom-grafana-plugin') {
        const pluginsList = document.querySelectorAll(panelWrapperSelector);
        pluginsList.forEach(element => { 
          while (element.parentNode !== null) { 
            element = element.parentNode as Element; 
            if (element && element.classList.contains('panel-container')) {
              element.classList.add(newClass);
              break;
            }
         }
        });
       }
      }

       

      We shall try to implement it on one component, see how the refactored component behaves, test it and go ahead with refactoring the rest.

        Attachments

          Issue Links

            Activity

              People

              Assignee:
              Unassigned
              Reporter:
              alexander.tymchuk Alexander Tymchuk
              Reviewer:
              Alexander Tymchuk
              Votes:
              0 Vote for this issue
              Watchers:
              3 Start watching this issue

                Dates

                Created:
                Updated:
                Resolved:

                  Time Tracking

                  Estimated:
                  Original Estimate - Not Specified
                  Not Specified
                  Remaining:
                  Remaining Estimate - Not Specified
                  Not Specified
                  Logged:
                  Time Spent - 1 day, 40 minutes
                  1d 40m

                    Smart Checklist