Repository: h2oai/wave
File: ui/src/file_upload.tsx (TypeScript)

Code before:
          </>
        )
        else if (successMsg) return (
          <>
            <Fluent.Text variant='xLarge'>Upload successful</Fluent.Text>
            <Fluent.MessageBar
              className={css.uploadMessageBar}
              messageBarType={Fluent.MessageBarType.success}
              isMultiline
              onDismiss={onDismissSuccess}>
              {successMsg}
            </Fluent.MessageBar>
          </>
        )
        else if (isDragging) return (
          <Fluent.Text styles={{ root: { pointerEvents: 'none' } }}>Drop files anywhere within the box.</Fluent.Text>
        )
        else if (percentComplete) return (
          <>
            <Fluent.ProgressIndicator
              styles={{ root: { width: '80%' } }}
              data-test='progress' // TODO: Does not work.
              description={`Uploading: ${(percentComplete * 100).toFixed(2)}%`}
              percentComplete={percentComplete}
            />
            <Fluent.DefaultButton styles={{ root: { marginTop: 12 } }} text={'Cancel'} onClick={() => onUploadCancel()} />
          </>
        )
        else if (files.length) return (
          <>
            <Fluent.Text variant='xLarge'>{multiple ? 'Chosen Files' : 'Chosen File'}</Fluent.Text>
            <Fluent.Stack
              horizontal
              verticalAlign='center'
              styles={{ root: { maxWidth: '100%', overflowX: 'auto', padding: '30px 0' } }}
              tokens={{ childrenGap: 15 }}>
              {
                files.map(({ name }, i) => (
                  <Fluent.StackItem key={xid()} styles={{ root: { textAlign: 'center', position: 'relative' } }}>
                    <Fluent.Icon className={css.uploadRemove} iconName='RemoveFilter' onClick={removeFile(i)} />
                    <Fluent.Icon iconName='OpenFile' styles={{ root: { fontSize: 35 } }} />
                    <br />
                    <Fluent.Text nowrap styles={{ root: { display: 'block', margin: '15px 0' } }}>{name}</Fluent.Text>
                  </Fluent.StackItem>
                ))
              }
            </Fluent.Stack>
          </>
        )
        else return (
          <>

Review comment (suggestion):
```suggestion
            <Fluent.DefaultButton styles={{ root: { marginTop: 12 } }} text='Cancel' onClick={onUploadCancel} />
```

Code after:
              className={css.uploadMessageBar}
              messageBarType={Fluent.MessageBarType.success}
              isMultiline
              onDismiss={onDismissSuccess}>
              {successMsg}
            </Fluent.MessageBar>
          </>
        )
        else if (isDragging) return (
          <Fluent.Text styles={{ root: { pointerEvents: 'none' } }}>Drop files anywhere within the box.</Fluent.Text>
        )
        else if (percentComplete) return (
          <>
            <Fluent.ProgressIndicator
              styles={{ root: { width: '80%' } }}
              data-test='progress' // TODO: Does not work.
              description={`Uploading: ${(percentComplete * 100).toFixed(2)}%`}
              percentComplete={percentComplete}
            />
            <Fluent.DefaultButton styles={{ root: { marginTop: 12 } }} text='Cancel' onClick={rejectXhr.current} />
          </>
        )
        else if (files.length) return (
          <>
            <Fluent.Text variant='xLarge'>{multiple ? 'Chosen Files' : 'Chosen File'}</Fluent.Text>
            <Fluent.Stack
              horizontal
              verticalAlign='center'
              styles={{ root: { maxWidth: '100%', overflowX: 'auto', padding: '30px 0' } }}
              tokens={{ childrenGap: 15 }}>
              {
                files.map(({ name }, i) => (
                  <Fluent.StackItem key={xid()} styles={{ root: { textAlign: 'center', position: 'relative' } }}>
                    <Fluent.Icon className={css.uploadRemove} iconName='RemoveFilter' onClick={removeFile(i)} />
                    <Fluent.Icon iconName='OpenFile' styles={{ root: { fontSize: 35 } }} />
                    <br />
                    <Fluent.Text nowrap styles={{ root: { display: 'block', margin: '15px 0' } }}>{name}</Fluent.Text>
                  </Fluent.StackItem>
                ))
              }
            </Fluent.Stack>
          </>
        )
        else return (
          <>
            <Fluent.Icon iconName='Upload' styles={{ root: { fontSize: 50 } }} />
            <input
              id={name}
              data-test={name}
              className={css.uploadInput}
              onChange={onChange}