Refactor dialogs, make it simple to add a new dialog to all views

ui/src/album/AlbumList.js

@@ -24,11 +24,9 @@ import {
 import AlbumListActions from './AlbumListActions'
 import AlbumTableView from './AlbumTableView'
 import AlbumGridView from './AlbumGridView'
-import { AddToPlaylistDialog } from '../dialogs'
 import albumLists, { defaultAlbumList } from './albumLists'
 import config from '../config'
 import AlbumInfo from './AlbumInfo'
-import DownloadMenuDialog from '../dialogs/DownloadMenuDialog'
 import ExpandInfoDialog from '../dialogs/ExpandInfoDialog'
 
 const AlbumFilter = (props) => {
@@ -138,8 +136,6 @@ const AlbumList = (props) => {
           <AlbumTableView {...props} />
         )}
       </List>
-      <AddToPlaylistDialog />
-      <DownloadMenuDialog />
       <ExpandInfoDialog content={<AlbumInfo />} />
     </>
   )

ui/src/album/AlbumSongs.js

@@ -28,9 +28,7 @@ import {
   DateField,
   SizeField,
 } from '../common'
-import { AddToPlaylistDialog } from '../dialogs'
 import config from '../config'
-import DownloadMenuDialog from '../dialogs/DownloadMenuDialog'
 import ExpandInfoDialog from '../dialogs/ExpandInfoDialog'
 
 const useStyles = makeStyles(
@@ -189,8 +187,6 @@ const AlbumSongs = (props) => {
           </SongDatagrid>
         </Card>
       </div>
-      <AddToPlaylistDialog />
-      <DownloadMenuDialog />
       <ExpandInfoDialog content={<SongInfo />} />
     </>
   )

ui/src/artist/ArtistList.js

@@ -17,7 +17,6 @@ import FavoriteIcon from '@material-ui/icons/Favorite'
 import FavoriteBorderIcon from '@material-ui/icons/FavoriteBorder'
 import { makeStyles } from '@material-ui/core/styles'
 import { useDrag } from 'react-dnd'
-import { AddToPlaylistDialog } from '../dialogs'
 import {
   ArtistContextMenu,
   List,
@@ -32,7 +31,6 @@ import {
 import config from '../config'
 import ArtistListActions from './ArtistListActions'
 import { DraggableTypes } from '../consts'
-import DownloadMenuDialog from '../dialogs/DownloadMenuDialog'
 
 const useStyles = makeStyles({
   contextHeader: {
@@ -178,8 +176,6 @@ const ArtistList = (props) => {
       >
         <ArtistListView {...props} />
       </List>
-      <AddToPlaylistDialog />
-      <DownloadMenuDialog />
     </>
   )
 }

ui/src/artist/DesktopArtistDetails.js

@@ -8,10 +8,8 @@ import ArtistExternalLinks from './ArtistExternalLink'
 import config from '../config'
 import { ArtistContextMenu, RatingField } from '../common'
 import Lightbox from 'react-image-lightbox'
-import { AddToPlaylistDialog } from '../dialogs'
 import ExpandInfoDialog from '../dialogs/ExpandInfoDialog'
 import AlbumInfo from '../album/AlbumInfo'
-import DownloadMenuDialog from '../dialogs/DownloadMenuDialog'
 import subsonic from '../subsonic'
 
 const useStyles = makeStyles(
@@ -152,8 +150,6 @@ const DesktopArtistDetails = ({ artistInfo, record, biography }) => {
           />
         )}
       </Card>
-      <AddToPlaylistDialog />
-      <DownloadMenuDialog />
       <ExpandInfoDialog content={<AlbumInfo />} />
     </div>
   )

ui/src/dialogs/Dialogs.js

@@ -0,0 +1,11 @@
+import { AddToPlaylistDialog } from './AddToPlaylistDialog'
+import DownloadMenuDialog from './DownloadMenuDialog'
+import { HelpDialog } from './HelpDialog'
+
+export const Dialogs = (props) => (
+  <>
+    <AddToPlaylistDialog />
+    <DownloadMenuDialog />
+    <HelpDialog />
+  </>
+)

ui/src/dialogs/index.js

@@ -1,5 +1,4 @@
 export * from './AboutDialog'
-export * from './AddToPlaylistDialog'
 export * from './SelectPlaylistInput'
-export * from './HelpDialog'
 export * from './ListenBrainzTokenDialog'
+export * from './Dialogs'

ui/src/layout/AppBar.js

@@ -12,6 +12,7 @@ import ViewListIcon from '@material-ui/icons/ViewList'
 import InfoIcon from '@material-ui/icons/Info'
 import PersonIcon from '@material-ui/icons/Person'
 import SupervisorAccountIcon from '@material-ui/icons/SupervisorAccount'
+import { Dialogs } from '../dialogs/Dialogs'
 import { AboutDialog } from '../dialogs'
 import PersonalMenu from './PersonalMenu'
 import ActivityPanel from './ActivityPanel'
@@ -127,6 +128,7 @@ const CustomUserMenu = ({ onClick, ...rest }) => {
         <Divider />
         <AboutMenuItem />
       </UserMenu>
+      <Dialogs />
     </>
   )
 }

ui/src/layout/Menu.js

@@ -9,7 +9,6 @@ import AlbumIcon from '@material-ui/icons/Album'
 import SubMenu from './SubMenu'
 import inflection from 'inflection'
 import albumLists from '../album/albumLists'
-import { HelpDialog } from '../dialogs'
 import PlaylistsSubMenu from './PlaylistsSubMenu'
 import config from '../config'
 
@@ -139,7 +138,6 @@ const Menu = ({ dense = false }) => {
       ) : (
         resources.filter(subItems('playlist')).map(renderResourceMenuItemLink)
       )}
-      <HelpDialog />
     </div>
   )
 }

ui/src/playlist/PlaylistSongs.js

@@ -27,11 +27,9 @@ import {
   DateField,
   ArtistLinkField,
 } from '../common'
-import { AddToPlaylistDialog } from '../dialogs'
 import { AlbumLinkField } from '../song/AlbumLinkField'
 import { playTracks } from '../actions'
 import PlaylistSongBulkActions from './PlaylistSongBulkActions'
-import DownloadMenuDialog from '../dialogs/DownloadMenuDialog'
 import ExpandInfoDialog from '../dialogs/ExpandInfoDialog'
 
 const useStyles = makeStyles(
@@ -214,8 +212,6 @@ const PlaylistSongs = ({ playlistId, readOnly, actions, ...props }) => {
           </ReorderableList>
         </Card>
       </div>
-      <AddToPlaylistDialog />
-      <DownloadMenuDialog />
       <ExpandInfoDialog content={<SongInfo />} />
       {React.cloneElement(props.pagination, listContext)}
     </>

ui/src/song/SongList.js

@@ -31,10 +31,8 @@ import FavoriteBorderIcon from '@material-ui/icons/FavoriteBorder'
 import { setTrack } from '../actions'
 import { SongListActions } from './SongListActions'
 import { AlbumLinkField } from './AlbumLinkField'
-import { AddToPlaylistDialog } from '../dialogs'
 import { SongBulkActions, QualityInfo, useSelectedFields } from '../common'
 import config from '../config'
-import DownloadMenuDialog from '../dialogs/DownloadMenuDialog'
 import ExpandInfoDialog from '../dialogs/ExpandInfoDialog'
 
 const useStyles = makeStyles({
@@ -196,8 +194,6 @@ const SongList = (props) => {
           </SongDatagrid>
         )}
       </List>
-      <AddToPlaylistDialog />
-      <DownloadMenuDialog />
       <ExpandInfoDialog content={<SongInfo />} />
     </>
   )