@instructure/quiz-core 22.17.0 → 22.18.0

package/src/reporting/components/resources/NewQuizAndItemAnalysis/charts/ScoreDistribution/presenter.js

@@ -0,0 +1,78 @@
+/** @jsx jsx */
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
+import QuintileDistribution from '../../../../charts/QuintileDistribution'
+import {jsx} from '@instructure/emotion'
+import generateComponentTheme from './theme'
+import generateStyle from './styles'
+import t from '@instructure/quiz-i18n/format-message'
+import {Text} from '@instructure/ui-text'
+import {Heading} from '@instructure/ui-heading'
+import Legend from '../../../../charts/Legend'
+import {withStyleOverrides} from '@instructure/quiz-common/util/withStyleOverrides'
+
+@withStyleOverrides(generateStyle, generateComponentTheme)
+export class ScoreDistribution extends Component {
+  static displayName = 'ScoreDistribution'
+  static componentId = `Quizzes${this.displayName}`
+
+  static propTypes = {
+    decileDistribution: PropTypes.arrayOf(PropTypes.number),
+    styles: PropTypes.object,
+  }
+
+  static defaultProps = {
+    decileDistribution: [],
+  }
+
+  calculateLabelForColumnsWithExtremeValues = (index, length) => {
+    if (index === 0) {
+      return t('< 0%')
+    }
+    if (index === length - 1) {
+      return t('> 100%')
+    }
+    return this.calculateLabelForColumns(index - 1, length - 2)
+  }
+
+  calculateLabelForColumns = (index, length) => {
+    const label = Math.floor((index * 100) / length)
+    return t('{label, number}%', {label})
+  }
+
+  render() {
+    const {decileDistribution} = this.props
+    return (
+      <>
+        <div css={this.props.styles.headingContainer}>
+          <Heading
+            level="h3"
+            themeOverride={{
+              h3FontWeight: 700,
+            }}
+          >
+            {t('Score Distribution')}
+          </Heading>
+        </div>
+        <QuintileDistribution
+          animateDelay={1000}
+          animateDuration={1000}
+          visualDistribution={decileDistribution || []}
+          calculateLabelForColumn={
+            decileDistribution.length > 10
+              ? this.calculateLabelForColumnsWithExtremeValues
+              : this.calculateLabelForColumns
+          }
+        />
+        <div aria-hidden="true" css={this.props.styles.chartLabel}>
+          <Text size="small">{t('Score')}</Text>
+        </div>
+        <div css={this.props.styles.legendContainer}>
+          <Legend
+            series={[{customStyles: this.props.styles.legendRect, label: t('Number of Students')}]}
+          />
+        </div>
+      </>
+    )
+  }
+}

package/src/reporting/components/resources/NewQuizAndItemAnalysis/charts/ScoreDistribution/styles.js

@@ -0,0 +1,20 @@
+const generateStyle = componentTheme => {
+  return {
+    legendRect: {
+      backgroundColor: componentTheme.legendRectFillColor,
+    },
+    legendContainer: {
+      display: 'inline-flex',
+      columnGap: '10px',
+      padding: `${componentTheme.legendPadding} 0`,
+    },
+    headingContainer: {
+      margin: `${componentTheme.legendMargin} 0`,
+    },
+    chartLabel: {
+      textAlign: 'center',
+    },
+  }
+}
+
+export default generateStyle

package/src/reporting/components/resources/NewQuizAndItemAnalysis/charts/ScoreDistribution/theme.js

@@ -0,0 +1,11 @@
+const generateComponentTheme = ({colors, spacing, typography}) => {
+  return {
+    legendRectFillColor: colors.contrasts.blue4570,
+    legendPadding: spacing.small,
+    legendBorderColor: colors.contrasts.grey4570,
+    legendFontSize: typography.fontSizeXSmall,
+    legendMargin: spacing.medium,
+  }
+}
+
+export default generateComponentTheme

package/src/reporting/components/resources/NewQuizAndItemAnalysis/downForRepair.svg

@@ -0,0 +1,58 @@
+<svg width="404" height="302" viewBox="0 0 404 302" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M331.359 265.234C330.986 264.344 330.63 263.438 330.287 262.519L332.973 261.52C333.301 262.404 333.645 263.275 334.003 264.13L331.359 265.234ZM335.19 273.1C334.718 272.26 334.257 271.404 333.809 270.53L336.36 269.226C336.79 270.066 337.234 270.89 337.688 271.698L335.19 273.1ZM339.975 280.447C339.397 279.673 338.83 278.881 338.275 278.067L340.642 276.455C341.175 277.234 341.717 277.995 342.271 278.735L339.975 280.447ZM402.351 283.006L399.683 281.958C399.953 281.277 400.206 280.576 400.444 279.852L403.166 280.743C402.911 281.52 402.639 282.275 402.351 283.006ZM345.715 287.1C345.033 286.414 344.358 285.704 343.696 284.971L345.824 283.053C346.454 283.752 347.095 284.426 347.747 285.08L345.715 287.1ZM398.017 290.835L395.732 289.111C396.269 288.399 396.784 287.643 397.261 286.861L399.706 288.351C399.181 289.214 398.612 290.049 398.017 290.835ZM352.39 292.843C351.606 292.271 350.831 291.671 350.063 291.044L351.878 288.829C352.605 289.423 353.341 289.991 354.082 290.533L352.39 292.843ZM391.467 297.048L389.881 294.664C390.619 294.174 391.344 293.629 392.033 293.045L393.887 295.226C393.112 295.883 392.298 296.496 391.467 297.048ZM359.955 297.412C359.08 296.987 358.206 296.529 357.339 296.039L358.749 293.548C359.563 294.008 360.384 294.438 361.206 294.836L359.955 297.412ZM368.309 300.441C367.358 300.21 366.394 299.938 365.447 299.63L366.33 296.907C367.21 297.193 368.101 297.445 368.981 297.657L368.309 300.441ZM383.17 300.648L382.498 297.866C383.374 297.654 384.245 297.392 385.086 297.087L386.066 299.776C385.124 300.12 384.151 300.412 383.17 300.648ZM376.382 301.434C375.657 301.434 374.931 301.408 374.2 301.359L374.396 298.504C375.312 298.566 376.223 298.586 377.121 298.563L377.2 301.424C376.928 301.431 376.654 301.434 376.382 301.434Z" fill="#7F8C97"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M104.494 145.596C99.4287 136.615 92.1338 129.679 83.6957 125.085C81.4894 127.16 79.3419 128.81 77.7316 129.25C72.4796 130.681 66.7491 125.911 61.4957 124.956C56.2423 124.001 53.377 129.25 48.125 127.342C45.426 126.36 44.873 123.611 44.7756 120.33C44.3028 120.455 43.83 120.575 43.3587 120.712C37.293 122.488 34.4693 129.469 37.5723 134.971L78.9207 208.288C82.0238 213.791 89.4634 214.995 94.1266 210.731C111.933 194.45 116.852 167.508 104.494 145.596Z" fill="#C0C6CB"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M43.4584 122.182C41.1376 122.957 39.2895 124.686 38.3597 126.969C37.387 129.362 37.5546 132.022 38.821 134.269L80.1694 207.586C81.4373 209.832 83.6278 211.353 86.1793 211.761C88.7251 212.163 91.2651 211.405 93.159 209.674C110.964 193.396 115.111 167.336 103.246 146.299C98.6546 138.158 91.9814 131.449 83.9043 126.84C81.5347 128.973 79.6336 130.215 78.1093 130.63C74.3444 131.66 70.6067 130.015 66.9922 128.426C64.9636 127.535 63.0482 126.692 61.2402 126.364C59.2302 125.999 57.6371 126.75 55.7962 127.623C53.5398 128.691 50.984 129.902 47.636 128.687C44.6719 127.609 43.7478 124.964 43.4584 122.182ZM87.5288 214.731C86.9314 214.731 86.3297 214.684 85.7295 214.588C82.3069 214.043 79.3715 212.002 77.6738 208.99L36.3254 135.673C34.6263 132.663 34.4014 129.098 35.7065 125.892C37.0073 122.695 39.6505 120.307 42.9556 119.339C43.3539 119.223 43.7521 119.117 44.1518 119.014L46.1561 118.486L46.2091 120.288C46.3122 123.803 46.987 125.405 48.6159 125.996C50.8379 126.803 52.4854 126.025 54.5684 125.037C56.567 124.091 58.8291 123.018 61.7531 123.547C63.8934 123.936 66.0538 124.887 68.1454 125.806C71.4476 127.258 74.5679 128.63 77.3558 127.868C78.1838 127.642 79.7869 126.796 82.7138 124.044L83.4702 123.332L84.3814 123.829C93.3324 128.703 100.719 135.986 105.743 144.895C118.266 167.097 113.886 194.604 95.0931 211.787C93 213.701 90.3153 214.731 87.5288 214.731Z" fill="#243038"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M136.343 202.068C123.986 180.157 98.3709 170.401 75.2068 177.184C69.1411 178.96 66.3174 185.939 69.4205 191.443L110.769 264.76C113.872 270.263 121.312 271.467 125.975 267.203C143.781 250.922 148.7 223.98 136.343 202.068Z" fill="#C0C6CB"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M90.2455 176.447C85.3932 176.447 80.4764 177.133 75.6098 178.557C73.1457 179.278 71.1773 181.059 70.2088 183.442C69.2346 185.833 69.4023 188.494 70.6687 190.74L112.017 264.057C113.285 266.303 115.475 267.826 118.028 268.232C120.573 268.636 123.113 267.877 125.008 266.147C142.811 249.869 146.959 223.808 135.095 202.771C125.723 186.153 108.487 176.447 90.2455 176.447ZM119.376 271.202C118.779 271.202 118.177 271.155 117.576 271.06C114.155 270.514 111.221 268.474 109.521 265.461L68.1731 192.145C66.474 189.134 66.2491 185.569 67.5542 182.363C68.855 179.167 71.4982 176.778 74.8047 175.81C99.2524 168.654 125.071 179.161 137.591 201.366C150.113 223.569 145.734 251.077 126.941 268.258C124.848 270.172 122.163 271.202 119.376 271.202Z" fill="#243038"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M95.8949 238.385C119.936 232.342 147.545 221.234 175.38 205.564C244.841 166.465 289.355 113.858 274.808 88.0634C260.26 62.2675 192.159 73.0536 122.699 112.153C94.8634 127.823 71.0489 145.66 53.4219 163.073L95.8949 238.385Z" fill="#E5E7E9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M55.2078 163.325L96.6049 236.728C121.232 230.416 148.201 219.222 174.677 204.318C208.126 185.488 236.83 162.967 255.503 140.901C273.868 119.197 280.279 100.682 273.56 88.7651C266.839 76.8497 247.669 72.7362 219.571 77.186C191.005 81.7103 156.851 94.5718 123.404 113.4C96.9258 128.306 73.3706 145.553 55.2078 163.325ZM95.1837 240.04L51.6362 162.824L52.4141 162.055C70.8592 143.835 94.9201 126.149 121.995 110.907C155.735 91.9139 190.228 78.935 219.121 74.3592C248.485 69.7076 268.705 74.3249 276.055 87.361C283.406 100.394 276.885 120.066 257.691 142.749C238.804 165.068 209.822 187.82 176.084 206.811C149.009 222.053 121.401 233.45 96.2453 239.774L95.1837 240.04Z" fill="#243038"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M277.353 197.375C261.951 188.859 243.027 188.458 227.174 196.701C221.565 199.616 220.147 207.009 224.257 211.808L245.25 236.316C253.81 223.715 264.642 210.505 277.353 197.375Z" fill="#C0C6CB"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M251.618 192.145C243.464 192.145 235.309 194.083 227.834 197.97C225.557 199.154 223.97 201.281 223.479 203.806C222.987 206.341 223.668 208.918 225.345 210.876L245.124 233.966C253.4 221.99 263.44 209.821 275.003 197.75C267.642 194.017 259.63 192.145 251.618 192.145ZM245.381 238.67L223.169 212.738C220.919 210.112 220.007 206.658 220.668 203.26C221.324 199.874 223.454 197.02 226.512 195.43C242.739 186.994 262.003 187.253 278.046 196.123L279.682 197.027L278.383 198.37C265.874 211.291 255.125 224.329 246.435 237.119L245.381 238.67Z" fill="#243038"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M65.6835 235.1L40.5825 190.59L58.2468 171.629L91.0696 229.829L65.6835 235.1Z" fill="#D0D4D8"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M42.345 190.8L66.4188 233.486L88.8595 228.826L57.9592 174.038L42.345 190.8ZM64.949 236.715L38.8193 190.382L58.5337 169.22L93.2805 230.831L64.949 236.715Z" fill="#243038"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M167.666 183.883C152.767 192.269 133.883 187.002 125.488 172.117C117.093 157.231 122.366 138.366 137.266 129.978C152.165 121.591 171.048 126.86 179.444 141.745C187.839 156.629 182.565 175.496 167.666 183.883Z" fill="#C0C6CB"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M152.42 127.412C147.409 127.412 142.455 128.699 137.969 131.225C123.782 139.211 118.742 157.239 126.735 171.414C134.729 185.588 152.781 190.622 166.961 182.636C173.835 178.767 178.788 172.456 180.911 164.865C183.031 157.275 182.067 149.312 178.195 142.447C174.322 135.581 168.006 130.633 160.407 128.513C157.77 127.776 155.086 127.412 152.42 127.412ZM152.521 189.291C141.194 189.291 130.185 183.36 124.239 172.818C115.47 157.269 120.999 137.492 136.563 128.731C144.101 124.487 152.843 123.429 161.178 125.755C169.514 128.081 176.444 133.51 180.69 141.041C184.939 148.574 185.997 157.308 183.669 165.636C181.342 173.962 175.91 180.887 168.37 185.13C163.357 187.951 157.902 189.291 152.521 189.291Z" fill="#243038"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M163.082 175.754C152.676 181.611 139.487 177.933 133.625 167.536C127.761 157.141 131.443 143.964 141.85 138.106C152.255 132.249 165.443 135.928 171.307 146.324C177.171 156.72 173.488 169.896 163.082 175.754Z" fill="#9AD6F5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M152.432 136.759C149.076 136.759 145.678 137.594 142.552 139.353C137.853 141.999 134.467 146.314 133.015 151.504C131.565 156.694 132.225 162.139 134.872 166.835C140.337 176.526 152.682 179.97 162.378 174.508C172.08 169.046 175.526 156.718 170.06 147.026C166.355 140.458 159.49 136.759 152.432 136.759ZM152.506 179.964C144.445 179.964 136.607 175.742 132.376 168.239C129.354 162.879 128.599 156.661 130.256 150.734C131.912 144.807 135.78 139.881 141.145 136.859C152.221 130.623 166.314 134.552 172.556 145.622C178.796 156.688 174.862 170.765 163.787 177.001C160.218 179.011 156.336 179.964 152.506 179.964Z" fill="#243038"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M241.985 156.756L198.992 80.5222L201.487 79.1182L244.48 155.352L241.985 156.756Z" fill="#243038"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M26.249 94.3401L23.6302 93.1779C13.5073 88.6822 8.9501 76.8398 13.4485 66.7278L32.0712 24.8758C32.7145 23.4302 34.4078 22.7804 35.8534 23.4216L69.8911 38.5388C71.3366 39.18 71.9884 40.8718 71.3452 42.3159L52.7225 84.1694C48.2241 94.2814 36.3705 98.8357 26.249 94.3401Z" fill="#E5E7E9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M34.6908 24.6058C34.5174 24.6058 34.3427 24.6373 34.1765 24.7017C33.8183 24.8391 33.5361 25.1067 33.3814 25.456L14.7587 67.308C12.7373 71.8494 12.6083 76.9062 14.3934 81.5449C16.1784 86.1837 19.6669 89.8506 24.2126 91.8702L26.8314 93.0324C36.2122 97.1974 47.242 92.9622 51.4138 83.5874L70.0351 41.7353C70.1912 41.3861 70.2012 40.9968 70.0637 40.6404C69.9262 40.284 69.6583 40.002 69.3087 39.846L35.271 24.7289C35.0848 24.6473 34.8885 24.6058 34.6908 24.6058ZM34.3885 97.5109C31.4215 97.5109 28.4589 96.8883 25.6667 95.6473L23.0479 94.4851C17.803 92.155 13.7788 87.9256 11.7201 82.5726C9.65855 77.2196 9.80898 71.3857 12.1399 66.1458L30.7625 24.2938C31.2281 23.2461 32.0748 22.4417 33.1479 22.0309C34.218 21.6173 35.3842 21.6487 36.4357 22.1139L70.4734 37.2311C71.5221 37.6963 72.3273 38.5421 72.7384 39.6127C73.151 40.6833 73.1195 41.8498 72.6539 42.899L54.0326 84.7496C51.7003 89.9909 47.4669 94.0099 42.1089 96.0681C39.6047 97.0314 36.993 97.5109 34.3885 97.5109Z" fill="#243038"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M58.9795 52.4884L32.7983 40.8607L36.8713 31.7048L63.0539 43.334L58.9795 52.4884Z" fill="#F99C9F"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M34.6893 40.1345L58.2517 50.6L61.1628 44.0591L37.599 33.595L34.6893 40.1345ZM59.7072 54.3772L30.9058 41.5872L36.1449 29.8164L64.9449 42.6078L59.7072 54.3772Z" fill="#243038"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M61.8575 63.6388L22.5835 46.1972L23.7468 43.5823L63.0207 61.0238L61.8575 63.6388Z" fill="#243038"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M64.3768 18.8605C63.0917 21.7502 59.705 23.0513 56.8126 21.766C53.9201 20.4821 52.6178 17.0986 53.9029 14.2088C55.1894 11.3191 58.5761 10.0195 61.4686 11.3033C64.3596 12.5872 65.6619 15.9707 64.3768 18.8605Z" fill="#E5E7E9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M59.1475 12.2406C57.5 12.2406 55.9241 13.1924 55.2135 14.7912C54.7465 15.8389 54.7164 17.0054 55.129 18.076C55.5402 19.1466 56.3453 19.9924 57.394 20.459C59.5587 21.418 62.1044 20.4404 63.0672 18.2792C63.5356 17.2315 63.5643 16.0636 63.1517 14.993C62.7405 13.9224 61.9354 13.0765 60.8867 12.6099C60.3208 12.3594 59.7291 12.2406 59.1475 12.2406ZM59.1289 23.6909C58.159 23.6909 57.1733 23.4919 56.2307 23.074C54.4814 22.2968 53.1419 20.887 52.4543 19.1036C51.768 17.3188 51.8182 15.3737 52.5947 13.6275C54.1992 10.0221 58.4426 8.39478 62.05 9.99496C65.6602 11.598 67.292 15.836 65.686 19.4414C64.4998 22.1064 61.8752 23.6909 59.1289 23.6909Z" fill="#243038"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M54.049 31.5029L51.4302 30.3407L55.5031 21.1848L58.122 22.3484L54.049 31.5029Z" fill="#243038"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.2688 53.6485C2.09167 46.0197 -2.64172 34.1831 4.79646 17.4614L12.653 20.9495C7.13737 33.3443 9.87655 40.0799 22.7616 45.8008L19.2688 53.6485Z" fill="#E5E7E9"/>
+<mask id="mask0_2387_81103" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="15" width="25" height="41">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 15.573H24.6527V55.5372H0V15.573Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_2387_81103)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.54154 19.3587C-0.61588 34.2813 3.54016 44.6222 18.5483 51.7429L20.8778 46.5115C14.7189 43.5831 11.0815 40.3542 9.47982 36.4167C7.87528 32.4707 8.28501 27.7632 10.7806 21.6846L5.54154 19.3587ZM19.9967 55.5372L18.6873 54.9561C0.879779 47.0483 -4.23326 34.2383 3.48715 16.8812L4.07023 15.573L14.5441 20.2232L13.9625 21.5314C11.3078 27.4941 10.7276 31.8824 12.1359 35.339C13.5499 38.817 17.11 41.7253 23.3433 44.4934L24.6527 45.0745L19.9967 55.5372Z" fill="#243038"/>
+</g>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.4919 21.4391C11.035 21.4391 9.55792 21.1414 8.14392 20.5145C2.73003 18.1086 0.283107 11.7522 2.68848 6.34486C4.29302 2.7409 7.73705 0.309156 11.6768 0L11.9003 2.85397C9.00922 3.08011 6.48494 4.86349 5.30732 7.50706C3.54233 11.4731 5.33741 16.1348 9.30721 17.8982C13.277 19.6601 17.9431 17.8681 19.7066 13.902C20.9974 11.0051 20.4287 7.63588 18.2582 5.32007L20.3513 3.36494C23.3082 6.52234 24.0833 11.1153 22.3255 15.0656C20.5476 19.0604 16.6107 21.4391 12.4919 21.4391Z" fill="#243038"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.405 24.0837L3.28774 21.2555C3.62154 20.2994 4.00405 19.3133 4.42381 18.3257L12.3362 21.6763C11.9881 22.5007 11.6772 23.3022 11.405 24.0837ZM10.001 31.127L1.40527 30.9954C1.42103 29.8904 1.51845 28.7411 1.68893 27.5832L10.1916 28.837C10.0755 29.6256 10.011 30.3957 10.001 31.127ZM3.98686 41.4137C3.38373 40.3531 2.87944 39.2324 2.48547 38.0831L10.617 35.3007C10.8391 35.9476 11.1242 36.5788 11.4637 37.1785L3.98686 41.4137ZM11.0024 48.9994C10.0741 48.3239 9.20305 47.6125 8.4108 46.8883L14.2201 40.5592C14.7774 41.0687 15.3977 41.574 16.0667 42.062L11.0024 48.9994ZM19.2715 53.6497C18.2988 53.2174 17.3618 52.7737 16.4665 52.3157L20.389 44.6741C21.1454 45.0606 21.9362 45.4356 22.7585 45.8005L19.2715 53.6497Z" fill="#243038"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M62.3189 62.6033C79.4946 70.232 84.2295 82.0687 76.7898 98.7903L68.9348 95.3023C74.4489 82.9074 71.7098 76.1718 58.8262 70.4495L62.3189 62.6033Z" fill="#E5E7E9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M70.8072 94.5672L76.0448 96.8931C82.2022 81.972 78.0491 71.6295 63.0395 64.5089L60.71 69.7402C72.8186 75.4954 75.7182 82.6175 70.8072 94.5672ZM77.5176 100.679L67.0437 96.0286L67.6253 94.7204C72.8458 82.9853 70.4791 77.1915 58.2445 71.7569L56.9351 71.1758L61.5911 60.7146L62.9005 61.2957C80.708 69.2035 85.8211 82.0135 78.0992 99.3706L77.5176 100.679Z" fill="#243038"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M69.91 116.251L69.6865 113.397C72.5776 113.171 75.1033 111.389 76.278 108.745C77.1347 106.823 77.1892 104.683 76.4342 102.721C75.6778 100.759 74.2036 99.2072 72.2796 98.3527L73.4443 95.7378C76.0674 96.9029 78.0774 99.0183 79.1089 101.695C80.1389 104.371 80.063 107.287 78.8969 109.907C77.2938 113.511 73.8512 115.943 69.91 116.251Z" fill="#243038"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M61.1982 71.5781C60.4432 71.1902 59.6524 70.8167 58.8301 70.4517L62.3157 62.6025C63.2898 63.0334 64.2253 63.4785 65.1207 63.9365L61.1982 71.5781ZM67.3699 75.693C66.8127 75.1835 66.1909 74.6782 65.5233 74.1902L70.5876 67.2528C71.5145 67.9283 72.387 68.6382 73.1778 69.3639L67.3699 75.693ZM70.9701 80.953C70.7481 80.3075 70.463 79.6748 70.122 79.0737L77.6018 74.8414C78.2035 75.902 78.7092 77.0227 79.1017 78.1706L70.9701 80.953ZM79.8983 88.669L71.3942 87.4152C71.5102 86.6266 71.5747 85.8565 71.5862 85.1252L80.1819 85.2568C80.1647 86.3632 80.0687 87.5111 79.8983 88.669ZM77.1648 97.928L69.251 94.5759C69.5991 93.7529 69.91 92.95 70.1822 92.1685L78.3009 94.9967C77.9656 95.9528 77.5846 96.9389 77.1648 97.928Z" fill="#243038"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M81.6509 111.331C82.8743 115.009 86.2768 117.723 90.3813 117.862C94.4857 118.002 98.0644 115.528 99.5343 111.939L91.5059 111.666C90.6449 111.637 89.9715 110.916 90.0002 110.057L90.1191 106.555C90.1492 105.695 90.8712 105.021 91.7308 105.051L99.7607 105.324C98.5372 101.644 95.1361 98.9319 91.0317 98.793C86.9272 98.6528 83.3485 101.129 81.8772 104.714L57.8936 101.175C56.0527 100.903 54.3851 102.293 54.3221 104.15L54.1215 110.021C54.0571 111.881 55.6272 113.381 57.4825 113.235L81.6509 111.331Z" fill="#E5E7E9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M82.6569 109.816L83.0107 110.879C84.0766 114.085 87.0593 116.317 90.4303 116.433C93.0448 116.521 95.5405 115.311 97.1135 113.29L91.4575 113.096C89.8071 113.041 88.512 111.655 88.5693 110.008L88.6882 106.505C88.7154 105.708 89.0521 104.968 89.6352 104.423C90.2211 103.877 90.9933 103.59 91.7798 103.62L97.4344 103.813C96.0046 101.689 93.6121 100.312 90.9833 100.223C87.6238 100.095 84.4849 102.131 83.2041 105.257L82.7786 106.295L57.6834 102.591C57.2063 102.516 56.7321 102.651 56.3596 102.963C55.9857 103.273 55.7694 103.713 55.7536 104.198L55.553 110.071C55.5359 110.557 55.7207 111.01 56.0717 111.344C56.4241 111.682 56.8811 111.85 57.371 111.807L82.6569 109.816ZM90.701 119.3C90.5778 119.3 90.4561 119.298 90.3314 119.294C86.1496 119.151 82.4119 116.604 80.7071 112.842L57.5945 114.661C56.298 114.765 55.0258 114.307 54.0918 113.414C53.1563 112.52 52.6463 111.266 52.6907 109.972L52.8912 104.101C52.9342 102.808 53.5287 101.592 54.523 100.764C55.5187 99.9357 56.8267 99.5679 58.1031 99.7583L81.038 103.143C82.9935 99.5064 86.8559 97.2163 91.0807 97.3623C95.6422 97.5169 99.6779 100.535 101.121 104.872L101.768 106.824L91.6824 106.481C91.6136 106.485 91.5535 106.534 91.5506 106.603L91.4317 110.105C91.4303 110.165 91.4947 110.234 91.5549 110.235L101.641 110.579L100.861 112.482C99.1736 116.597 95.1221 119.298 90.701 119.3Z" fill="#243038"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M331.423 260.952L328.765 262.02C318.486 266.145 306.806 261.165 302.677 250.897L285.584 208.398C284.994 206.931 285.706 205.264 287.175 204.674L321.737 190.801C323.207 190.211 324.874 190.922 325.464 192.389L342.556 234.888C346.686 245.156 341.702 256.826 331.423 260.952Z" fill="#E5E7E9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M322.803 192.026C322.626 192.026 322.447 192.059 322.272 192.129L287.71 206.002C287.355 206.145 287.077 206.417 286.925 206.769C286.776 207.12 286.771 207.509 286.913 207.864L304.006 250.363C307.834 259.883 318.706 264.517 328.23 260.691L330.889 259.624C335.505 257.771 339.124 254.233 341.075 249.662C343.028 245.09 343.082 240.034 341.227 235.422L324.136 192.923C323.909 192.365 323.371 192.026 322.803 192.026ZM321.313 264.896C312.794 264.896 304.714 259.801 301.347 251.431L284.256 208.932C283.827 207.867 283.84 206.701 284.29 205.646C284.741 204.589 285.577 203.774 286.642 203.346L321.203 189.472C323.398 188.591 325.909 189.658 326.793 191.855L343.886 234.354C346.026 239.676 345.963 245.511 343.711 250.785C341.458 256.06 337.283 260.142 331.958 262.28L329.299 263.348C326.681 264.398 323.975 264.896 321.313 264.896Z" fill="#243038"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M324.159 208.338L297.572 219.011L293.833 209.713L320.421 199.042L324.159 208.338Z" fill="#99E1A2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M295.697 210.509L298.367 217.148L322.295 207.543L319.626 200.903L295.697 210.509ZM296.779 220.872L291.969 208.92L321.215 197.179L326.023 209.133L296.779 220.872Z" fill="#243038"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M294.292 230.05L293.224 227.395L333.104 211.386L334.172 214.041L294.292 230.05Z" fill="#243038"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M303.764 181.048C304.943 183.982 303.52 187.315 300.582 188.495C297.645 189.674 294.308 188.251 293.129 185.317C291.949 182.383 293.373 179.05 296.31 177.87C299.247 176.691 302.585 178.114 303.764 181.048Z" fill="#E5E7E9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M298.447 178.886C297.904 178.886 297.362 178.991 296.844 179.198C295.778 179.626 294.945 180.442 294.493 181.497C294.044 182.552 294.031 183.718 294.459 184.783C294.887 185.848 295.704 186.682 296.758 187.132C297.819 187.583 298.986 187.593 300.048 187.168C302.247 186.285 303.317 183.778 302.434 181.581C302.006 180.518 301.189 179.683 300.134 179.233C299.592 179.002 299.019 178.886 298.447 178.886ZM298.445 190.342C297.49 190.342 296.538 190.15 295.635 189.765C293.876 189.014 292.512 187.624 291.8 185.851C291.087 184.077 291.107 182.132 291.857 180.373C292.61 178.616 294.001 177.255 295.776 176.542C297.552 175.828 299.498 175.849 301.258 176.6C303.018 177.35 304.381 178.74 305.093 180.515C306.565 184.176 304.781 188.353 301.116 189.823C300.253 190.17 299.349 190.342 298.445 190.342Z" fill="#243038"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M302.993 198.325L299.254 189.029L301.911 187.961L305.651 197.258L302.993 198.325Z" fill="#243038"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M297.335 237.616C279.893 244.617 268.094 239.767 261.265 222.787L269.242 219.586C274.303 232.171 281.049 234.899 294.13 229.648L297.335 237.616Z" fill="#E5E7E9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M263.147 223.575C266.369 230.999 270.539 235.681 275.866 237.871C281.215 240.069 287.637 239.723 295.465 236.805L293.328 231.492C280.764 236.165 273.626 233.284 268.465 221.44L263.147 223.575ZM283.358 242.128C280.251 242.128 277.386 241.591 274.775 240.519C268.476 237.93 263.483 232.143 259.936 223.322L259.402 221.994L270.036 217.724L270.571 219.052C275.363 230.969 281.175 233.307 293.596 228.319L294.925 227.785L299.199 238.411L297.869 238.943C292.584 241.066 287.733 242.128 283.358 242.128Z" fill="#243038"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M261.78 223.294C260.349 223.294 258.92 223.005 257.565 222.427C254.925 221.302 252.88 219.217 251.812 216.556C250.34 212.895 250.992 208.734 253.514 205.695L255.72 207.522C253.87 209.752 253.392 212.805 254.469 215.49C255.254 217.44 256.753 218.969 258.688 219.795C260.625 220.619 262.767 220.641 264.72 219.859C266.672 219.075 268.202 217.578 269.029 215.644C269.856 213.711 269.877 211.571 269.092 209.62C268.768 208.811 268.318 208.073 267.758 207.42L269.929 205.554C270.697 206.444 271.308 207.453 271.751 208.552C272.821 211.213 272.791 214.13 271.664 216.768C270.538 219.404 268.45 221.445 265.788 222.514C264.493 223.034 263.135 223.294 261.78 223.294Z" fill="#243038"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M262.943 226.517C262.491 225.62 262.047 224.658 261.625 223.656L269.543 220.317C269.892 221.143 270.255 221.929 270.62 222.656L262.943 226.517ZM268.621 234.64C267.842 233.861 267.084 232.994 266.371 232.062L273.192 226.839C273.679 227.474 274.187 228.056 274.702 228.571L268.621 234.64ZM294.43 238.695L291.664 230.564C292.47 230.29 293.294 229.983 294.132 229.648L297.336 237.616C296.348 238.012 295.381 238.371 294.43 238.695ZM277.898 240.049C276.716 239.74 275.56 239.32 274.459 238.802L278.134 231.037C278.75 231.328 279.402 231.564 280.07 231.739L277.898 240.049ZM284.916 240.693L284.415 232.119C285.173 232.075 285.968 231.982 286.781 231.842L288.238 240.305C287.108 240.5 285.991 240.63 284.916 240.693Z" fill="#243038"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M333.75 212.989C351.192 205.987 362.991 210.838 369.82 227.817L361.843 231.019C356.782 218.433 350.036 215.705 336.953 220.957L333.75 212.989Z" fill="#E5E7E9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M347.716 216.985C354.437 216.985 359.011 220.884 362.62 229.165L367.938 227.03C361.511 212.22 351.183 208.001 335.621 213.799L337.755 219.112C341.536 217.706 344.824 216.985 347.716 216.985ZM361.05 232.881L360.515 231.553C355.722 219.636 349.912 217.3 337.487 222.285L336.159 222.819L331.886 212.195L333.215 211.661C351.302 204.401 364.06 209.66 371.148 227.283L371.684 228.611L361.05 232.881Z" fill="#243038"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M369.112 248.786C364.786 248.707 360.948 246.065 359.334 242.052C358.264 239.393 358.294 236.474 359.42 233.836C360.546 231.2 362.635 229.159 365.297 228.09C370.801 225.881 377.065 228.556 379.274 234.048C380.745 237.71 380.093 241.872 377.57 244.91L375.365 243.083C377.215 240.854 377.693 237.801 376.615 235.115C374.994 231.09 370.403 229.13 366.366 230.746C364.413 231.529 362.882 233.026 362.056 234.96C361.23 236.894 361.207 239.033 361.992 240.984C363.175 243.927 365.99 245.866 369.165 245.924L369.112 248.786Z" fill="#243038"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M344.304 218.762L342.845 210.299C343.978 210.104 345.097 209.974 346.172 209.913L346.666 218.486C345.912 218.529 345.117 218.622 344.304 218.762ZM352.952 219.568C352.335 219.276 351.683 219.04 351.017 218.867L353.187 210.557C354.369 210.864 355.527 211.284 356.627 211.803L352.952 219.568ZM336.953 220.958L333.75 212.988C334.734 212.593 335.702 212.234 336.651 211.911L339.424 220.04C338.615 220.314 337.792 220.62 336.953 220.958ZM357.892 223.766C357.406 223.13 356.898 222.548 356.384 222.033L362.464 215.964C363.243 216.743 364.001 217.61 364.714 218.542L357.892 223.766ZM361.541 230.287C361.193 229.462 360.83 228.675 360.464 227.95L368.143 224.088C368.594 224.985 369.038 225.947 369.461 226.948L361.541 230.287Z" fill="#243038"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M61.2376 112.887C58.2793 109.73 57.5042 105.137 59.2606 101.186C60.4268 98.5658 62.5442 96.5563 65.2232 95.5272C67.9036 94.4981 70.8233 94.574 73.445 95.7376L72.2803 98.3526C68.3134 96.5935 63.6459 98.3826 61.8794 102.349C60.5901 105.247 61.1588 108.616 63.3278 110.931L61.2376 112.887Z" fill="#243038"/>
+</svg>

package/src/reporting/components/resources/NewQuizAndItemAnalysis/exportFormats.js

@@ -0,0 +1 @@
+export const csvFormat = 'csv'

package/src/reporting/components/resources/NewQuizAndItemAnalysis/fetchReports.js

@@ -0,0 +1,50 @@
+import {getFailedToFetchReports, getLastReportGenerationFailed} from '../common/errorMessages'
+
+export const fetchReports = async ({
+  activeQuizId,
+  setFetchInProgress,
+  setQuizAnalysis,
+  setItemAnalyses,
+  setStatusPollingInProgress,
+  setAnalysisError,
+  setGenerationInProgress,
+  addError,
+  fetchQuizAnalysis,
+  fetchItemAnalyses,
+  setAnalysisFetchError,
+  getErrorMessageForCode,
+}) => {
+  try {
+    setAnalysisFetchError(false)
+    setFetchInProgress(true)
+    const [quizAnalysis, itemAnalyses] = await Promise.all([
+      fetchQuizAnalysis(activeQuizId),
+      fetchItemAnalyses(activeQuizId),
+    ])
+
+    const areAnalysesInProgress =
+      quizAnalysis.new_analysis_in_progress || itemAnalyses.new_analysis_in_progress
+    const areAnalysesFailed = quizAnalysis.last_analysis_failed || itemAnalyses.last_analysis_failed
+    const analysisErrorCode =
+      quizAnalysis.last_analysis_failed_error_code ||
+      itemAnalyses.last_analysis_failed_error_code ||
+      null // The failure codes should be the same for both quiz and item analyses
+
+    setGenerationInProgress(areAnalysesInProgress)
+    setStatusPollingInProgress(areAnalysesInProgress)
+    setQuizAnalysis(quizAnalysis.last_successful_analysis)
+    setItemAnalyses(itemAnalyses.last_successful_analysis)
+    setAnalysisError(
+      areAnalysesFailed
+        ? getErrorMessageForCode(analysisErrorCode, getLastReportGenerationFailed())
+        : null,
+    )
+  } catch {
+    setQuizAnalysis(null)
+    setItemAnalyses(null)
+    setAnalysisFetchError(true)
+    addError(getFailedToFetchReports())
+  } finally {
+    setFetchInProgress(false)
+  }
+}

package/src/reporting/components/resources/NewQuizAndItemAnalysis/fetchReportsStatus.js

@@ -0,0 +1,29 @@
+import {getFailedToFetchReports} from '../common/errorMessages'
+
+export const fetchReportsStatus = async ({
+  activeQuizId,
+  addError,
+  fetchAnalysesStatus,
+  instrumentedFetchReports,
+  setStatusPollingInProgress,
+  setGenerationInProgress,
+}) => {
+  try {
+    const status = await fetchAnalysesStatus(activeQuizId)
+    const isReportGenerationReady =
+      !status.quiz_analysis_in_progress && !status.item_analyses_in_progress
+    if (isReportGenerationReady) {
+      instrumentedFetchReports()
+      setStatusPollingInProgress(false)
+      setGenerationInProgress(false)
+    }
+
+    return isReportGenerationReady
+  } catch {
+    addError(getFailedToFetchReports())
+    setStatusPollingInProgress(false)
+    setGenerationInProgress(false)
+
+    return true
+  }
+}

package/src/reporting/components/resources/NewQuizAndItemAnalysis/index.js

@@ -0,0 +1,5 @@
+import {NewQuizAndItemAnalysisPresenter} from './presenter'
+import withAnalysisState from './withAnalysisState'
+
+export const NewQuizAndItemAnalysis = withAnalysisState(NewQuizAndItemAnalysisPresenter)
+export default NewQuizAndItemAnalysis

package/src/reporting/components/resources/NewQuizAndItemAnalysis/presenter.js

@@ -0,0 +1,273 @@
+/** @jsx jsx */
+import React, {Component} from 'react'
+import {Heading} from '@instructure/ui-heading'
+import NewItemAnalysis from './NewItemAnalysis'
+import NewQuizAnalysis from './NewQuizAnalysis'
+import t from '@instructure/quiz-i18n/format-message'
+import {AnalysisUpdateDate} from '../common/AnalysisUpdateDate'
+import {itemAnalysisPropType, quizAnalysisPropType} from '../common/propTypes'
+import PropTypes from 'prop-types'
+import {Spinner} from '../../../../common/components/shared/spinner/Spinner'
+import {Spinner as InstUISpinner} from '@instructure/ui-spinner'
+import {Button} from '@instructure/ui-buttons'
+import {Text} from '@instructure/ui-text'
+import {getFailedToFetchReports} from '../common/errorMessages'
+import {Img} from '@instructure/ui-img'
+import errorImage from './downForRepair.svg'
+import {PresentationContent, ScreenReaderContent} from '@instructure/ui-a11y-content'
+import {csvFormat} from './exportFormats'
+import {ExportButton} from './ExportButton'
+import {jsx} from '@instructure/emotion'
+import generateStyle from './styles'
+import generateComponentTheme from './theme'
+import {Flex} from '@instructure/quiz-common/components/Flex/index'
+import {withStyleOverrides} from '@instructure/quiz-common/util/withStyleOverrides'
+
+@withStyleOverrides(generateStyle, generateComponentTheme)
+export class NewQuizAndItemAnalysisPresenter extends Component {
+  static displayName = 'NewQuizAndItemAnalysisPresenter'
+  static componentId = `Quizzes${this.displayName}`
+
+  static propTypes = {
+    quizAnalysis: quizAnalysisPropType,
+    itemAnalyses: PropTypes.arrayOf(itemAnalysisPropType),
+    fetchInProgress: PropTypes.bool.isRequired,
+    generationInProgress: PropTypes.bool.isRequired,
+    analysisFetchError: PropTypes.bool.isRequired,
+    analysisError: PropTypes.string,
+    generateReports: PropTypes.func.isRequired,
+    exportReports: PropTypes.func.isRequired,
+    exportEnabled: PropTypes.bool.isRequired,
+    styles: PropTypes.object,
+  }
+
+  static defaultProps = {
+    analysisError: void 0,
+    quizAnalysis: void 0,
+    itemAnalyses: void 0,
+  }
+
+  renderItemAnalyses = () => {
+    const itemAnalyses = this.props.itemAnalyses || []
+
+    return (
+      <>
+        <Heading level="h2" themeOverride={{h2FontWeight: 700}} color="primary">
+          {t('Item Analysis')}
+        </Heading>
+        <div>
+          {itemAnalyses.map(itemAnalysis => (
+            <NewItemAnalysis key={itemAnalysis.metadata.item_id} itemAnalysis={itemAnalysis} />
+          ))}
+        </div>
+      </>
+    )
+  }
+
+  renderSpinner = () => {
+    return (
+      <Flex padding="medium" justifyItems="center" alignItems="center">
+        <InstUISpinner renderTitle={t('Loading item analyses data')} />
+      </Flex>
+    )
+  }
+
+  renderBodyOnFailedFetch = () => {
+    return (
+      <Flex alignItems="end" width="82.5rem" margin="auto" direction="column">
+        <Flex.Item align="center">
+          <PresentationContent>
+            <Img src={errorImage} alt="" />
+          </PresentationContent>
+        </Flex.Item>
+        <Flex.Item align="center">
+          <Text size="x-large" color="primary">
+            {t('Error')}
+          </Text>
+        </Flex.Item>
+        <Flex.Item align="center">
+          <ScreenReaderContent>{getFailedToFetchReports()}</ScreenReaderContent>
+          <Text size="x-small" color="primary">
+            {getFailedToFetchReports()}
+          </Text>
+        </Flex.Item>
+      </Flex>
+    )
+  }
+
+  renderHeader = () => {
+    const {quizAnalysis} = this.props
+
+    return (
+      <Flex alignItems="center" width="auto" margin="small auto" direction="column">
+        <Flex.Item overflowY="hidden">
+          <Heading
+            level="h2"
+            themeOverride={{h2FontWeight: 700}}
+            margin="0 x-large 0 0"
+            color="primary"
+          >
+            {quizAnalysis?.metadata?.quiz_title}
+          </Heading>
+        </Flex.Item>
+      </Flex>
+    )
+  }
+
+  renderUpdateDateWithError = () => {
+    const {analysisError, generationInProgress, quizAnalysis} = this.props
+    const shouldShowError = analysisError && !generationInProgress
+    const timeStamp = quizAnalysis?.created_timestamp
+
+    return (
+      <Flex alignItems="end" width="auto" margin="small auto" direction="column">
+        <Flex.Item>{timeStamp && <AnalysisUpdateDate date={timeStamp} />}</Flex.Item>
+        <Flex.Item>
+          {shouldShowError && (
+            <Text size="x-small" weight="medium" color="danger">
+              {analysisError}
+            </Text>
+          )}
+        </Flex.Item>
+      </Flex>
+    )
+  }
+
+  renderRightSide = () => {
+    const {exportEnabled} = this.props
+
+    return (
+      <Flex alignItems="center" justifyItems="end" width="auto" direction="row" wrap="wrap-reverse">
+        <Flex.Item padding="0 small 0 0" margin="0 0 0 auto">
+          {this.renderUpdateDateWithError()}
+        </Flex.Item>
+        <Flex.Item>
+          <div css={this.props.styles.headerButtonsContainer}>
+            {exportEnabled && <Flex.Item margin="0 0 0 auto">{this.renderExport()}</Flex.Item>}
+            <Flex.Item margin="0 0 0 auto">{this.renderGenerationButton()}</Flex.Item>
+          </div>
+        </Flex.Item>
+      </Flex>
+    )
+  }
+
+  renderExport = () => {
+    const {quizAnalysis, generationInProgress} = this.props
+
+    return (
+      <ExportButton
+        quizAnalysis={quizAnalysis}
+        generationInProgress={generationInProgress}
+        handleExport={this.handleExport}
+      />
+    )
+  }
+
+  isEmptyReport = () => {
+    const {fetchInProgress, quizAnalysis, itemAnalyses, analysisError} = this.props
+
+    return !fetchInProgress && !quizAnalysis && !itemAnalyses && !analysisError
+  }
+
+  renderTop = () => (
+    <Flex
+      justifyItems="space-between"
+      alignItems="center"
+      wrap="wrap"
+      width="auto"
+      margin="0 auto small 0"
+      direction="row"
+    >
+      <Flex.Item>{this.renderHeader()}</Flex.Item>
+      <Flex.Item margin="0 0 0 auto">{this.renderRightSide()}</Flex.Item>
+    </Flex>
+  )
+
+  renderTopOnSuccessfulFetch = () =>
+    this.isEmptyReport() ? this.renderGenerationButton() : this.renderTop()
+
+  renderTopOnFailedFetch = () => {
+    const {exportEnabled} = this.props
+
+    return (
+      <Flex direction="row" justifyItems="end" wrap="wrap" width="auto" margin="auto">
+        {exportEnabled && <Flex.Item overflowY="visible">{this.renderExport()}</Flex.Item>}
+        <Flex.Item overflowY="visible">{this.renderGenerationButton()}</Flex.Item>
+      </Flex>
+    )
+  }
+
+  renderOngoingGenerationButton = () => {
+    return (
+      <Button color="primary-inverse" interaction="disabled" margin="auto">
+        <Spinner
+          size="x-small"
+          color="brand"
+          minHeight="0"
+          mainText={t('Generation In Progress')}
+          fontSize="medium"
+        />
+      </Button>
+    )
+  }
+
+  renderStartGenerationButton = () => {
+    return (
+      <Button
+        color="secondary"
+        margin="auto"
+        onClick={this.handleGeneration}
+        themeOverride={{lineHeight: '24px'}}
+      >
+        <Text size="medium">{t('Generate Report')}</Text>
+      </Button>
+    )
+  }
+
+  renderGenerationButton = () => {
+    const {generationInProgress} = this.props
+
+    const buttonVariant = generationInProgress
+      ? this.renderOngoingGenerationButton()
+      : this.renderStartGenerationButton()
+
+    return <>{buttonVariant}</>
+  }
+
+  renderBody = () => {
+    const {fetchInProgress, quizAnalysis} = this.props
+    // TODO need to refactor the NewQuizAnalysis to move out spinner logic
+    return (
+      <>
+        {(fetchInProgress || quizAnalysis) && (
+          <NewQuizAnalysis quizAnalysis={quizAnalysis} fetchInProgress={fetchInProgress} />
+        )}
+        {fetchInProgress ? this.renderSpinner() : this.renderItemAnalyses()}
+      </>
+    )
+  }
+
+  renderBodyOnSuccessfulFetch = () => !this.isEmptyReport() && this.renderBody()
+
+  handleGeneration = (_event, filter = 'last_attempt') => {
+    this.props.generateReports(filter)
+  }
+
+  handleExport = (_event, format = csvFormat, filter = 'last_attempt') => {
+    this.props.exportReports(format, filter)
+  }
+
+  render() {
+    const {analysisFetchError, fetchInProgress} = this.props
+
+    return (
+      <div className="fs-mask">
+        {!fetchInProgress &&
+          (analysisFetchError ? this.renderTopOnFailedFetch() : this.renderTopOnSuccessfulFetch())}
+        {analysisFetchError ? this.renderBodyOnFailedFetch() : this.renderBodyOnSuccessfulFetch()}
+      </div>
+    )
+  }
+}
+
+export default NewQuizAndItemAnalysisPresenter

package/src/reporting/components/resources/NewQuizAndItemAnalysis/styles.js

@@ -0,0 +1,14 @@
+const generateStyle = componentTheme => {
+  return {
+    headerButtonsContainer: {
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'flex-end',
+      justifyContent: 'flex-end',
+      flexWrap: 'wrap',
+      gap: componentTheme.headerButtonsGap,
+    },
+  }
+}
+
+export default generateStyle

package/src/reporting/components/resources/NewQuizAndItemAnalysis/theme.js

@@ -0,0 +1,6 @@
+const generateComponentTheme = ({spacing}) => {
+  return {
+    headerButtonsGap: spacing.small,
+  }
+}
+export default generateComponentTheme