@instructure/outcomes-ui 2.1.4 → 2.1.5

package/lib/components/OutcomesPerStudent/__tests__/index.test.js

@@ -16,6 +16,8 @@ var _index = _interopRequireDefault(require("../index.js"));
 
 var _checkA11y = _interopRequireDefault(require("../../../test/checkA11y.js"));
 
+var _constants = require("../../../constants.js");
+
 var styles = {
   componentId: 'eWGXc',
   template: function template(theme) {
@@ -87,7 +89,8 @@ describe('OutcomesPerStudent/index', function () {
       }, {
         uuid: 5,
         full_name: 'Sir Darryl Roundtree'
-      }]
+      }],
+      features: []
     }, props);
   }
 
@@ -145,6 +148,40 @@ describe('OutcomesPerStudent/index', function () {
     });
     (0, _chai.expect)(wrapper.find('Billboard').prop('heading')).to.equal('There is no report here to show');
   });
+  describe('ExportCSVButton', function () {
+    it('renders if the FF is enabled, the page is loaded, and there are users and outcomes', function () {
+      var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps({
+        features: [_constants.REPORT_DOWNLOAD_FF]
+      })), {
+        disableLifecycleMethods: true
+      });
+      (0, _chai.expect)(wrapper.find('ExportCSVButton')).to.have.length(1);
+    });
+    describe('does not render if', function () {
+      it('the FF is disabled', function () {
+        var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps({})), {
+          disableLifecycleMethods: true
+        });
+        (0, _chai.expect)(wrapper.find('ExportCSVButton')).to.have.length(0);
+      });
+      it('there are no students', function () {
+        var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps({
+          users: []
+        })), {
+          disableLifecycleMethods: true
+        });
+        (0, _chai.expect)(wrapper.find('ExportCSVButton')).to.have.length(0);
+      });
+      it('there are no outcomes', function () {
+        var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps({
+          hasAnyOutcomes: false
+        })), {
+          disableLifecycleMethods: true
+        });
+        (0, _chai.expect)(wrapper.find('ExportCSVButton')).to.have.length(0);
+      });
+    });
+  });
   it('meets a11y standards', function () {
     return (0, _checkA11y.default)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()));
   });

package/lib/components/OutcomesPerStudent/index.js

@@ -41,11 +41,15 @@ var _uiThemeable = require("@instructure/ui-themeable");
 
 var _lodash = _interopRequireDefault(require("lodash"));
 
-var _index = _interopRequireDefault(require("./Header/index.js"));
+var _index = _interopRequireDefault(require("./ExportCSVButton/index.js"));
 
-var _index2 = _interopRequireDefault(require("./HeaderDetails/index.js"));
+var _index2 = _interopRequireDefault(require("./Header/index.js"));
 
-var _index3 = _interopRequireDefault(require("./Score/index.js"));
+var _index3 = _interopRequireDefault(require("./HeaderDetails/index.js"));
+
+var _index4 = _interopRequireDefault(require("./Score/index.js"));
+
+var _constants = require("../../constants.js");
 
 var _theme = _interopRequireDefault(require("../theme.js"));
 
@@ -313,21 +317,55 @@ var OutcomesPerStudentReport = (_dec = (0, _uiThemeable.themeable)(_theme.defaul
   var _super = (0, _createSuper2.default)(OutcomesPerStudentReport);
 
   function OutcomesPerStudentReport() {
+    var _this;
+
     (0, _classCallCheck2.default)(this, OutcomesPerStudentReport);
-    return _super.apply(this, arguments);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
+    _this.renderExportButton = function (hasAnyStudents) {
+      var _this$props = _this.props,
+          hasAnyOutcomes = _this$props.hasAnyOutcomes,
+          loading = _this$props.loading,
+          loadUsersOverride = _this$props.loadUsersOverride,
+          loadRemainingPages = _this$props.loadRemainingPages,
+          csvFetchingStatus = _this$props.csvFetchingStatus,
+          formatCSVData = _this$props.formatCSVData,
+          artifactType = _this$props.artifactType,
+          artifactId = _this$props.artifactId,
+          features = _this$props.features;
+      var reportDownloadEnabled = features.includes(_constants.REPORT_DOWNLOAD_FF);
+
+      var fetchCSVData = function fetchCSVData() {
+        return loadRemainingPages(artifactType, artifactId, loadUsersOverride);
+      };
+
+      if (reportDownloadEnabled && !loading && hasAnyOutcomes && hasAnyStudents) {
+        return /*#__PURE__*/_react.default.createElement(_index.default, {
+          fetchCSVData: fetchCSVData,
+          formatCSVData: formatCSVData,
+          fetchingStatus: csvFetchingStatus,
+          artifactId: artifactId
+        });
+      }
+    };
+
+    return _this;
   }
 
   (0, _createClass2.default)(OutcomesPerStudentReport, [{
     key: "componentWillMount",
-    value: // eslint-disable-next-line no-undef
-    // eslint-disable-next-line no-undef
-    function componentWillMount() {
-      var _this$props = this.props,
-          artifactType = _this$props.artifactType,
-          artifactId = _this$props.artifactId,
-          loadPage = _this$props.loadPage,
-          setError = _this$props.setError,
-          loadUsersOverride = _this$props.loadUsersOverride;
+    value: function componentWillMount() {
+      var _this$props2 = this.props,
+          artifactType = _this$props2.artifactType,
+          artifactId = _this$props2.artifactId,
+          loadPage = _this$props2.loadPage,
+          setError = _this$props2.setError,
+          loadUsersOverride = _this$props2.loadUsersOverride;
       loadPage(artifactType, artifactId, 1, loadUsersOverride).catch(function (e) {
         return setError(e);
       });
@@ -336,16 +374,16 @@ var OutcomesPerStudentReport = (_dec = (0, _uiThemeable.themeable)(_theme.defaul
     key: "renderReportTable",
     value: function renderReportTable() {
       var headerIds = [];
-      var _this$props2 = this.props,
-          rollups = _this$props2.rollups,
-          getReportOutcome = _this$props2.getReportOutcome,
-          getScore = _this$props2.getScore,
-          _viewReportAlignment = _this$props2.viewReportAlignment,
-          isOpen = _this$props2.isOpen,
-          closeReportAlignment = _this$props2.closeReportAlignment,
-          users = _this$props2.users,
-          showRollups = _this$props2.showRollups,
-          scope = _this$props2.scope;
+      var _this$props3 = this.props,
+          rollups = _this$props3.rollups,
+          getReportOutcome = _this$props3.getReportOutcome,
+          getScore = _this$props3.getScore,
+          _viewReportAlignment = _this$props3.viewReportAlignment,
+          isOpen = _this$props3.isOpen,
+          closeReportAlignment = _this$props3.closeReportAlignment,
+          users = _this$props3.users,
+          showRollups = _this$props3.showRollups,
+          scope = _this$props3.scope;
       return /*#__PURE__*/_react.default.createElement("div", {
         className: styles.reportWrapper,
         "data-automation": "outcomesPerStudent__reportWrapper"
@@ -368,7 +406,7 @@ var OutcomesPerStudentReport = (_dec = (0, _uiThemeable.themeable)(_theme.defaul
             role: "columnheader",
             className: styles.headerCell,
             "data-automation": "outcomesPerStudent__headerCell"
-          }, /*#__PURE__*/_react.default.createElement(_index.default, {
+          }, /*#__PURE__*/_react.default.createElement(_index2.default, {
             outcomeResult: rollup,
             getReportOutcome: getReportOutcome,
             viewReportAlignment: function viewReportAlignment() {
@@ -391,7 +429,7 @@ var OutcomesPerStudentReport = (_dec = (0, _uiThemeable.themeable)(_theme.defaul
           _react.default.createElement("div", {
             key: headerIds[i],
             role: "gridcell"
-          }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, /*#__PURE__*/_react.default.createElement(_index2.default, {
+          }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, /*#__PURE__*/_react.default.createElement(_index3.default, {
             outcomeResult: rollup,
             showRollups: showRollups
           })))
@@ -411,7 +449,7 @@ var OutcomesPerStudentReport = (_dec = (0, _uiThemeable.themeable)(_theme.defaul
             className: styles.scoreCell,
             role: "gridcell",
             "data-automation": "outcomesPerStudent__scoreCell"
-          }, /*#__PURE__*/_react.default.createElement(_index3.default, {
+          }, /*#__PURE__*/_react.default.createElement(_index4.default, {
             score: getScore(rollup.outcomeId, student.uuid),
             outcome: getReportOutcome(rollup.outcomeId)
           }));
@@ -421,12 +459,12 @@ var OutcomesPerStudentReport = (_dec = (0, _uiThemeable.themeable)(_theme.defaul
   }, {
     key: "render",
     value: function render() {
-      var _this = this;
+      var _this2 = this;
 
-      var _this$props3 = this.props,
-          users = _this$props3.users,
-          hasAnyOutcomes = _this$props3.hasAnyOutcomes,
-          loading = _this$props3.loading;
+      var _this$props4 = this.props,
+          users = _this$props4.users,
+          hasAnyOutcomes = _this$props4.hasAnyOutcomes,
+          loading = _this$props4.loading;
       var hasAnyStudents = users && users.length > 0;
 
       var renderReportContent = function renderReportContent() {
@@ -437,13 +475,13 @@ var OutcomesPerStudentReport = (_dec = (0, _uiThemeable.themeable)(_theme.defaul
         } else if (!hasAnyStudents) {
           return renderBillboard(noStudents());
         } else {
-          return _this.renderReportTable();
+          return _this2.renderReportTable();
         }
       };
 
       return /*#__PURE__*/_react.default.createElement("div", {
         className: styles.background
-      }, renderReportContent());
+      }, this.renderExportButton(hasAnyStudents), renderReportContent());
     }
   }]);
   OutcomesPerStudentReport.displayName = "OutcomesPerStudentReport";
@@ -454,6 +492,9 @@ var OutcomesPerStudentReport = (_dec = (0, _uiThemeable.themeable)(_theme.defaul
   artifactId: _propTypes.default.string.isRequired,
   rollups: _propTypes.default.array.isRequired,
   loading: _propTypes.default.bool.isRequired,
+  loadRemainingPages: _propTypes.default.func.isRequired,
+  csvFetchingStatus: _propTypes.default.string.isRequired,
+  formatCSVData: _propTypes.default.func.isRequired,
   loadPage: _propTypes.default.func.isRequired,
   loadUsersOverride: _propTypes.default.func,
   setError: _propTypes.default.func.isRequired,
@@ -464,6 +505,7 @@ var OutcomesPerStudentReport = (_dec = (0, _uiThemeable.themeable)(_theme.defaul
   viewReportAlignment: _propTypes.default.func.isRequired,
   isOpen: _propTypes.default.func.isRequired,
   closeReportAlignment: _propTypes.default.func.isRequired,
+  features: _propTypes.default.array.isRequired,
   scope: _propTypes.default.string.isRequired
 }, _class2.defaultProps = {
   loadUsersOverride: void 0,

package/lib/components/Ratings/index.js

@@ -98,19 +98,13 @@ var Ratings = function Ratings(_ref) {
     theme: {
       padding: '0.5rem 0rem'
     }
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    "aria-hidden": "true",
-    className: "header"
-  }, (0, _formatMessage.default)('Proficiency Rating'))), !isTray && /*#__PURE__*/_react.default.createElement(_uiTable.Table.ColHeader, {
+  }, (0, _formatMessage.default)('Proficiency Rating')), !isTray && /*#__PURE__*/_react.default.createElement(_uiTable.Table.ColHeader, {
     id: "points",
     textAlign: "end",
     theme: {
       padding: '0.5rem 0rem'
     }
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    "aria-hidden": "true",
-    className: "header"
-  }, (0, _formatMessage.default)('Points'))))), ratings === null || ratings === void 0 ? void 0 : ratings.map(function (_ref2, index) {
+  }, (0, _formatMessage.default)('Points')))), ratings === null || ratings === void 0 ? void 0 : ratings.map(function (_ref2, index) {
     var description = _ref2.description,
         percent = _ref2.percent;
     return /*#__PURE__*/_react.default.createElement(_uiTable.Table.Body, {

package/lib/constants.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.CALCULATION_METHODS = exports.AVERAGE = exports.DECAYING_AVERAGE = exports.N_MASTERY = exports.LATEST = exports.HIGHEST = exports.getFeatureFlags = exports.SET_INDIVIDUAL_RESULTS_STATE = exports.SET_INDIVIDUAL_RESULTS = exports.SET_LIST_TOTAL = exports.SET_LIST_PAGE = exports.SET_OUTCOME_LIST = exports.SET_SEARCH_TOTAL = exports.SET_SEARCH_ENTRIES = exports.SET_SEARCH_LOADING = exports.SET_SEARCH_PAGE = exports.SET_SEARCH_TEXT = exports.CLOSE_REPORT_ALIGNMENT = exports.VIEW_REPORT_ALIGNMENT = exports.SET_REPORT_LOADING = exports.SET_REPORT_USERS = exports.SET_REPORT_RESULTS = exports.SET_REPORT_ROLLUPS = exports.SET_REPORT_OUTCOMES = exports.SET_REPORT_PAGE_DATA = exports.SET_REPORT_PAGE = exports.RESET_OUTCOME_PICKER = exports.SET_SCOPE = exports.TOGGLE_EXPANDED_IDS = exports.SET_ACTIVE_COLLECTION_ID = exports.SET_FOCUSED_OUTCOME = exports.UPDATE_ALIGNMENT = exports.CLOSE_ALIGNMENT = exports.VIEW_ALIGNMENT = exports.SET_ALIGNMENTS = exports.SET_CONTEXT = exports.SET_FEATURES = exports.SET_SCORING_METHOD = exports.UNSELECT_OUTCOME_IDS = exports.SET_SELECTED_OUTCOME_IDS = exports.SET_ROOT_OUTCOME_IDS = exports.SET_OUTCOME_PICKER_STATE = exports.SET_OUTCOMES = exports.SET_ERROR = exports.SELECT_OUTCOME_IDS = void 0;
+exports.CALCULATION_METHODS = exports.AVERAGE = exports.DECAYING_AVERAGE = exports.N_MASTERY = exports.LATEST = exports.HIGHEST = exports.getFeatureFlags = exports.REPORT_DOWNLOAD_FF = exports.SET_INDIVIDUAL_RESULTS_STATE = exports.SET_INDIVIDUAL_RESULTS = exports.SET_LIST_TOTAL = exports.SET_LIST_PAGE = exports.SET_OUTCOME_LIST = exports.SET_SEARCH_TOTAL = exports.SET_SEARCH_ENTRIES = exports.SET_SEARCH_LOADING = exports.SET_SEARCH_PAGE = exports.SET_SEARCH_TEXT = exports.LO_MASTERED = exports.LO_MASTERY_PERCENT = exports.LO_ID = exports.LO_NAME = exports.LOR_POINTS_POSSIBLE = exports.LOR_POINTS = exports.ALIGNED_QUESTIONS_COUNT = exports.ATTEMPT_COUNT = exports.STUDENT_UUID = exports.STUDENT_NAME = exports.COMPLETED = exports.ERROR = exports.IN_PROGRESS = exports.NOT_FETCHING = exports.ALL_USERS = exports.CLOSE_REPORT_ALIGNMENT = exports.VIEW_REPORT_ALIGNMENT = exports.SET_REMAINING_PAGES_LOADING = exports.SET_REPORT_LOADING = exports.SET_REPORT_USERS = exports.SET_REPORT_RESULTS = exports.SET_REPORT_ROLLUPS = exports.SET_REPORT_OUTCOMES = exports.SET_REPORT_PAGE_DATA = exports.SET_REPORT_PAGE = exports.RESET_OUTCOME_PICKER = exports.SET_SCOPE = exports.TOGGLE_EXPANDED_IDS = exports.SET_ACTIVE_COLLECTION_ID = exports.SET_FOCUSED_OUTCOME = exports.UPDATE_ALIGNMENT = exports.CLOSE_ALIGNMENT = exports.VIEW_ALIGNMENT = exports.SET_ALIGNMENTS = exports.SET_CONTEXT = exports.SET_FEATURES = exports.SET_SCORING_METHOD = exports.UNSELECT_OUTCOME_IDS = exports.SET_SELECTED_OUTCOME_IDS = exports.SET_ROOT_OUTCOME_IDS = exports.SET_OUTCOME_PICKER_STATE = exports.SET_OUTCOMES = exports.SET_ERROR = exports.SELECT_OUTCOME_IDS = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
@@ -78,14 +78,47 @@ var SET_REPORT_USERS = 'SET_REPORT_USERS';
 exports.SET_REPORT_USERS = SET_REPORT_USERS;
 var SET_REPORT_LOADING = 'SET_REPORT_LOADING';
 exports.SET_REPORT_LOADING = SET_REPORT_LOADING;
+var SET_REMAINING_PAGES_LOADING = 'SET_REMAINING_PAGES_LOADING';
+exports.SET_REMAINING_PAGES_LOADING = SET_REMAINING_PAGES_LOADING;
 var VIEW_REPORT_ALIGNMENT = 'VIEW_REPORT_ALIGNMENT';
 exports.VIEW_REPORT_ALIGNMENT = VIEW_REPORT_ALIGNMENT;
 var CLOSE_REPORT_ALIGNMENT = 'CLOSE_REPORT_ALIGNMENT';
+exports.CLOSE_REPORT_ALIGNMENT = CLOSE_REPORT_ALIGNMENT;
+var ALL_USERS = 'ALL_USERS';
+exports.ALL_USERS = ALL_USERS;
+var NOT_FETCHING = 'NOT_FETCHING';
+exports.NOT_FETCHING = NOT_FETCHING;
+var IN_PROGRESS = 'FETCHING_IN_PROGRESS';
+exports.IN_PROGRESS = IN_PROGRESS;
+var ERROR = 'FETCHING_ERROR';
+exports.ERROR = ERROR;
+var COMPLETED = 'FETCHING_COMPLETED'; // CSV Report Headers
+
+exports.COMPLETED = COMPLETED;
+var STUDENT_NAME = 'student_name';
+exports.STUDENT_NAME = STUDENT_NAME;
+var STUDENT_UUID = 'student_uuid';
+exports.STUDENT_UUID = STUDENT_UUID;
+var ATTEMPT_COUNT = 'attempt_count';
+exports.ATTEMPT_COUNT = ATTEMPT_COUNT;
+var ALIGNED_QUESTIONS_COUNT = 'aligned_questions_count';
+exports.ALIGNED_QUESTIONS_COUNT = ALIGNED_QUESTIONS_COUNT;
+var LOR_POINTS = 'lor_points';
+exports.LOR_POINTS = LOR_POINTS;
+var LOR_POINTS_POSSIBLE = 'lor_points_possible';
+exports.LOR_POINTS_POSSIBLE = LOR_POINTS_POSSIBLE;
+var LO_NAME = 'lo_name';
+exports.LO_NAME = LO_NAME;
+var LO_ID = 'lo_id';
+exports.LO_ID = LO_ID;
+var LO_MASTERY_PERCENT = 'lo_mastery_percent';
+exports.LO_MASTERY_PERCENT = LO_MASTERY_PERCENT;
+var LO_MASTERED = 'lo_mastered';
 /*
  * search
  */
 
-exports.CLOSE_REPORT_ALIGNMENT = CLOSE_REPORT_ALIGNMENT;
+exports.LO_MASTERED = LO_MASTERED;
 var SET_SEARCH_TEXT = 'SET_SEARCH_TEXT';
 exports.SET_SEARCH_TEXT = SET_SEARCH_TEXT;
 var SET_SEARCH_PAGE = 'SET_SEARCH_PAGE';
@@ -119,9 +152,11 @@ var SET_INDIVIDUAL_RESULTS_STATE = 'SET_INDIVIDUAL_RESULTS_STATE';
 */
 
 exports.SET_INDIVIDUAL_RESULTS_STATE = SET_INDIVIDUAL_RESULTS_STATE;
+var REPORT_DOWNLOAD_FF = 'report_download';
+exports.REPORT_DOWNLOAD_FF = REPORT_DOWNLOAD_FF;
 
 var getFeatureFlags = function getFeatureFlags() {
-  return [];
+  return [REPORT_DOWNLOAD_FF];
 };
 /*
  * calculation method

package/lib/containers/ConnectedAlignmentCount.js

@@ -27,6 +27,8 @@ function mapStateToProps(state, ownProps) {
     count: (0, _selectors.getAlignedOutcomeCount)(state, scope)
   };
 }
+/* eslint-disable react-redux/mapDispatchToProps-returns-object */
+
 
 function mapDispatchToProps(dispatch, ownProps) {
   var scope = ownProps.scope;
@@ -34,6 +36,8 @@ function mapDispatchToProps(dispatch, ownProps) {
     loadAlignments: _actions.loadAlignments
   }, dispatch, scope);
 }
+/* eslint-enable react-redux/mapDispatchToProps-returns-object */
+
 
 var ConnectedAlignmentCount = (0, _redux.compose)((0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps), _WithAlignmentSet.default)(_index.default);
 var _default = ConnectedAlignmentCount;

package/lib/containers/ConnectedOutcomesPerStudent.js

@@ -19,30 +19,40 @@ var _actions2 = require("../store/context/actions.js");
 
 var _selectors = require("../store/report/selectors.js");
 
+var _selectors2 = require("../store/features/selectors.js");
+
 function mapStateToProps(state, ownProps) {
   var scope = ownProps.scope;
   return {
     pageCount: (0, _selectors.getPageCount)(state, scope),
     currentPage: (0, _selectors.getPageNumber)(state, scope),
     rollups: (0, _selectors.getRollups)(state, scope),
-    users: (0, _selectors.getUsers)(state, scope),
+    users: (0, _selectors.getUsers)(state, scope, (0, _selectors.getPageNumber)(state, scope)),
     getReportOutcome: _selectors.getReportOutcome.bind(null, state, scope),
+    csvFetchingStatus: (0, _selectors.getLoadingRemainingPages)(state, scope),
+    formatCSVData: _selectors.formatCSVData.bind(null, state, scope),
     hasAnyOutcomes: (0, _selectors.hasAnyOutcomes)(state, scope),
     getScore: _selectors.getScore.bind(null, state, scope),
     isOpen: _selectors.isOpen.bind(null, state, scope),
-    loading: (0, _selectors.getLoading)(state, scope)
+    loading: (0, _selectors.getLoading)(state, scope),
+    features: (0, _selectors2.getFeatures)(state)
   };
 }
+/* eslint-disable react-redux/mapDispatchToProps-returns-object */
+
 
 function mapDispatchToProps(dispatch, ownProps) {
   var scope = ownProps.scope;
   return (0, _multireducer.bindActionCreators)({
     loadPage: _actions.loadPage,
+    loadRemainingPages: _actions.loadRemainingPages,
     viewReportAlignment: _actions.viewReportAlignment,
     closeReportAlignment: _actions.closeReportAlignment,
     setError: _actions2.setError
   }, dispatch, scope);
 }
+/* eslint-enable react-redux/mapDispatchToProps-returns-object */
+
 
 var ConnectedOutcomesPerStudent = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(_index.default);
 var _default = ConnectedOutcomesPerStudent;

package/lib/containers/__tests__/OutcomesPerStudentReport.test.js

@@ -46,7 +46,8 @@ describe('OutcomesPerStudentReport', function () {
       artifactType: '',
       artifactId: '',
       host: '',
-      jwt: ''
+      jwt: '',
+      showAlert: function showAlert() {}
     };
   }