@strapi/admin 4.11.0-exp.9xg4-3qfm-9w8f.1 → 4.11.0

package/admin/src/components/Providers/index.js

@@ -48,29 +48,29 @@ const Providers = ({
   themes,
 }) => {
   return (
-    <ThemeToggleProvider themes={themes}>
-      <Theme>
-        <QueryClientProvider client={queryClient}>
-          <Provider store={store}>
-            <AdminContext.Provider value={{ getAdminInjectedComponents }}>
-              <ConfigurationsProvider
-                authLogo={authLogo}
-                menuLogo={menuLogo}
-                showReleaseNotification={showReleaseNotification}
-                showTutorials={showTutorials}
-              >
-                <StrapiAppProvider
-                  getPlugin={getPlugin}
-                  menu={menu}
-                  plugins={plugins}
-                  runHookParallel={runHookParallel}
-                  runHookWaterfall={runHookWaterfall}
-                  runHookSeries={runHookSeries}
-                  settings={settings}
+    <LanguageProvider messages={messages} localeNames={localeNames}>
+      <ThemeToggleProvider themes={themes}>
+        <Theme>
+          <QueryClientProvider client={queryClient}>
+            <Provider store={store}>
+              <AdminContext.Provider value={{ getAdminInjectedComponents }}>
+                <ConfigurationsProvider
+                  authLogo={authLogo}
+                  menuLogo={menuLogo}
+                  showReleaseNotification={showReleaseNotification}
+                  showTutorials={showTutorials}
                 >
-                  <LibraryProvider components={components} fields={fields}>
-                    <CustomFieldsProvider customFields={customFields}>
-                      <LanguageProvider messages={messages} localeNames={localeNames}>
+                  <StrapiAppProvider
+                    getPlugin={getPlugin}
+                    menu={menu}
+                    plugins={plugins}
+                    runHookParallel={runHookParallel}
+                    runHookWaterfall={runHookWaterfall}
+                    runHookSeries={runHookSeries}
+                    settings={settings}
+                  >
+                    <LibraryProvider components={components} fields={fields}>
+                      <CustomFieldsProvider customFields={customFields}>
                         <AutoReloadOverlayBlockerProvider>
                           <OverlayBlockerProvider>
                             <GuidedTour>
@@ -78,16 +78,16 @@ const Providers = ({
                             </GuidedTour>
                           </OverlayBlockerProvider>
                         </AutoReloadOverlayBlockerProvider>
-                      </LanguageProvider>
-                    </CustomFieldsProvider>
-                  </LibraryProvider>
-                </StrapiAppProvider>
-              </ConfigurationsProvider>
-            </AdminContext.Provider>
-          </Provider>
-        </QueryClientProvider>
-      </Theme>
-    </ThemeToggleProvider>
+                      </CustomFieldsProvider>
+                    </LibraryProvider>
+                  </StrapiAppProvider>
+                </ConfigurationsProvider>
+              </AdminContext.Provider>
+            </Provider>
+          </QueryClientProvider>
+        </Theme>
+      </ThemeToggleProvider>
+    </LanguageProvider>
   );
 };
 

package/admin/src/components/Theme/index.js

@@ -1,17 +1,19 @@
 import React from 'react';
-import { ThemeProvider } from '@strapi/design-system';
+import { DesignSystemProvider } from '@strapi/design-system';
 import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
 import { useThemeToggle } from '../../hooks';
 import GlobalStyle from '../GlobalStyle';
 
 const Theme = ({ children }) => {
   const { currentTheme, themes } = useThemeToggle();
+  const { locale } = useIntl();
 
   return (
-    <ThemeProvider theme={themes[currentTheme] || themes.light}>
+    <DesignSystemProvider locale={locale} theme={themes[currentTheme] || themes.light}>
       {children}
       <GlobalStyle />
-    </ThemeProvider>
+    </DesignSystemProvider>
   );
 };
 

package/admin/src/content-manager/components/ComponentIcon/ComponentIcon.js

@@ -1,49 +1,39 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import styled from 'styled-components';
 
-import { Flex } from '@strapi/design-system';
+import { Flex, Icon } from '@strapi/design-system';
+import { COMPONENT_ICONS } from './constants';
 
-const WIDTH_S = 5;
-const WIDTH_M = 8;
-
-const Wrapper = styled(Flex)`
-  border-radius: ${({ showBackground }) => (showBackground ? `50%` : 0)};
-  color: ${({ theme }) => theme.colors.neutral600};
-  height: ${({ theme, size }) => theme.spaces[size === 'S' ? WIDTH_S : WIDTH_M]};
-  width: ${({ theme, size }) => theme.spaces[size === 'S' ? WIDTH_S : WIDTH_M]};
-
-  svg {
-    height: ${({ theme, size }) => theme.spaces[size === 'S' ? WIDTH_S - 2 : WIDTH_M - 3]};
-    width: ${({ theme, size }) => theme.spaces[size === 'S' ? WIDTH_S - 2 : WIDTH_M - 3]};
-  }
-`;
-
-export function ComponentIcon({ showBackground = true, size = 'M' }) {
+export function ComponentIcon({ showBackground = true, size = 'M', icon }) {
   return (
-    <Wrapper
+    <Flex
       alignItems="center"
       background={showBackground ? 'neutral200' : null}
       justifyContent="center"
       size={size}
       showBackground={showBackground}
+      height={size === 'S' ? 5 : 8}
+      width={size === 'S' ? 5 : 8}
+      color="neutral600"
+      borderRadius={showBackground ? '50%' : 0}
     >
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
-        <path
-          d="M216.3 2c4.8-2.6 10.5-2.6 15.3 0L422.3 106c5.1 2.8 8.3 8.2 8.3 14s-3.2 11.2-8.3 14L231.7 238c-4.8 2.6-10.5 2.6-15.3 0L25.7 134c-5.1-2.8-8.3-8.2-8.3-14s3.2-11.2 8.3-14L216.3 2zM23.7 170l176 96c5.1 2.8 8.3 8.2 8.3 14V496c0 5.6-3 10.9-7.8 13.8s-10.9 3-15.8 .3L8.3 414C3.2 411.2 0 405.9 0 400V184c0-5.6 3-10.9 7.8-13.8s10.9-3 15.8-.3zm400.7 0c5-2.7 11-2.6 15.8 .3s7.8 8.1 7.8 13.8V400c0 5.9-3.2 11.2-8.3 14l-176 96c-5 2.7-11 2.6-15.8-.3s-7.8-8.1-7.8-13.8V280c0-5.9 3.2-11.2 8.3-14l176-96z"
-          fill="currentColor"
-        />
-      </svg>
-    </Wrapper>
+      <Icon
+        as={COMPONENT_ICONS[icon] || COMPONENT_ICONS.cube}
+        height={size === 'S' ? 3 : 5}
+        width={size === 'S' ? 3 : 5}
+      />
+    </Flex>
   );
 }
 
 ComponentIcon.defaultProps = {
   showBackground: true,
   size: 'M',
+  icon: 'Cube',
 };
 
 ComponentIcon.propTypes = {
   showBackground: PropTypes.bool,
   size: PropTypes.string,
+  icon: PropTypes.string,
 };

package/admin/src/content-manager/components/ComponentIcon/constants.js

@@ -0,0 +1,133 @@
+import * as Icons from '@strapi/icons';
+
+const COMPONENT_ICONS = {
+  alien: Icons.Alien,
+  apps: Icons.Apps,
+  archive: Icons.Archive,
+  arrowDown: Icons.ArrowDown,
+  arrowLeft: Icons.ArrowLeft,
+  arrowRight: Icons.ArrowRight,
+  arrowUp: Icons.ArrowUp,
+  attachment: Icons.Attachment,
+  bell: Icons.Bell,
+  bold: Icons.Bold,
+  book: Icons.Book,
+  briefcase: Icons.Briefcase,
+  brush: Icons.Brush,
+  bulletList: Icons.BulletList,
+  calendar: Icons.Calendar,
+  car: Icons.Car,
+  cast: Icons.Cast,
+  chartBubble: Icons.ChartBubble,
+  chartCircle: Icons.ChartCircle,
+  chartPie: Icons.ChartPie,
+  check: Icons.Check,
+  clock: Icons.Clock,
+  cloud: Icons.Cloud,
+  code: Icons.Code,
+  cog: Icons.Cog,
+  collapse: Icons.Collapse,
+  command: Icons.Command,
+  connector: Icons.Connector,
+  crop: Icons.Crop,
+  crown: Icons.Crown,
+  cube: Icons.Cube,
+  cup: Icons.Cup,
+  cursor: Icons.Cursor,
+  dashboard: Icons.Dashboard,
+  database: Icons.Database,
+  discuss: Icons.Discuss,
+  doctor: Icons.Doctor,
+  earth: Icons.Earth,
+  emotionHappy: Icons.EmotionHappy,
+  emotionUnhappy: Icons.EmotionUnhappy,
+  envelop: Icons.Envelop,
+  exit: Icons.Exit,
+  expand: Icons.Expand,
+  eye: Icons.Eye,
+  feather: Icons.Feather,
+  file: Icons.File,
+  fileError: Icons.FileError,
+  filePdf: Icons.FilePdf,
+  filter: Icons.Filter,
+  folder: Icons.Folder,
+  gate: Icons.Gate,
+  gift: Icons.Gift,
+  globe: Icons.Globe,
+  grid: Icons.Grid,
+  handHeart: Icons.HandHeart,
+  hashtag: Icons.Hashtag,
+  headphone: Icons.Headphone,
+  heart: Icons.Heart,
+  house: Icons.House,
+  information: Icons.Information,
+  italic: Icons.Italic,
+  key: Icons.Key,
+  landscape: Icons.Landscape,
+  layer: Icons.Layer,
+  layout: Icons.Layout,
+  lightbulb: Icons.Lightbulb,
+  link: Icons.Link,
+  lock: Icons.Lock,
+  magic: Icons.Magic,
+  manyToMany: Icons.ManyToMany,
+  manyToOne: Icons.ManyToOne,
+  manyWays: Icons.ManyWays,
+  medium: Icons.Medium,
+  message: Icons.Message,
+  microphone: Icons.Microphone,
+  monitor: Icons.Monitor,
+  moon: Icons.Moon,
+  music: Icons.Music,
+  oneToMany: Icons.OneToMany,
+  oneToOne: Icons.OneToOne,
+  oneWay: Icons.OneWay,
+  paint: Icons.Paint,
+  paintBrush: Icons.PaintBrush,
+  paperPlane: Icons.PaperPlane,
+  pencil: Icons.Pencil,
+  phone: Icons.Phone,
+  picture: Icons.Picture,
+  pin: Icons.Pin,
+  pinMap: Icons.PinMap,
+  plane: Icons.Plane,
+  play: Icons.Play,
+  plus: Icons.Plus,
+  priceTag: Icons.PriceTag,
+  puzzle: Icons.Puzzle,
+  question: Icons.Question,
+  quote: Icons.Quote,
+  refresh: Icons.Refresh,
+  repeat: Icons.Repeat,
+  restaurant: Icons.Restaurant,
+  rocket: Icons.Rocket,
+  rotate: Icons.Rotate,
+  scissors: Icons.Scissors,
+  search: Icons.Search,
+  seed: Icons.Seed,
+  server: Icons.Server,
+  shield: Icons.Shield,
+  shirt: Icons.Shirt,
+  shoppingCart: Icons.ShoppingCart,
+  slideshow: Icons.Slideshow,
+  stack: Icons.Stack,
+  star: Icons.Star,
+  store: Icons.Store,
+  strikeThrough: Icons.StrikeThrough,
+  sun: Icons.Sun,
+  television: Icons.Television,
+  thumbDown: Icons.ThumbDown,
+  thumbUp: Icons.ThumbUp,
+  train: Icons.Train,
+  twitter: Icons.Twitter,
+  typhoon: Icons.Typhoon,
+  underline: Icons.Underline,
+  user: Icons.User,
+  volumeMute: Icons.VolumeMute,
+  volumeUp: Icons.VolumeUp,
+  walk: Icons.Walk,
+  wheelchair: Icons.Wheelchair,
+  write: Icons.Write,
+};
+
+export { COMPONENT_ICONS };

package/admin/src/content-manager/components/DynamicTable/BulkActionsBar/index.js

@@ -0,0 +1,307 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Button, Dialog, DialogBody, DialogFooter, Flex, Typography } from '@strapi/design-system';
+import { Check, ExclamationMarkCircle, Trash } from '@strapi/icons';
+import { useIntl } from 'react-intl';
+import { useSelector } from 'react-redux';
+import { useTracking } from '@strapi/helper-plugin';
+import { getTrad } from '../../../utils';
+import InjectionZoneList from '../../InjectionZoneList';
+import { listViewDomain } from '../../../pages/ListView/selectors';
+
+const ConfirmBulkActionDialog = ({ onToggleDialog, isOpen, dialogBody, endAction }) => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <Dialog
+      onClose={onToggleDialog}
+      title={formatMessage({
+        id: 'app.components.ConfirmDialog.title',
+        defaultMessage: 'Confirmation',
+      })}
+      labelledBy="confirmation"
+      describedBy="confirm-description"
+      isOpen={isOpen}
+    >
+      <DialogBody icon={<ExclamationMarkCircle />}>
+        <Flex direction="column" alignItems="stretch" gap={2}>
+          {dialogBody}
+        </Flex>
+      </DialogBody>
+      <DialogFooter
+        startAction={
+          <Button onClick={onToggleDialog} variant="tertiary">
+            {formatMessage({
+              id: 'app.components.Button.cancel',
+              defaultMessage: 'Cancel',
+            })}
+          </Button>
+        }
+        endAction={endAction}
+      />
+    </Dialog>
+  );
+};
+
+ConfirmBulkActionDialog.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  onToggleDialog: PropTypes.func.isRequired,
+  dialogBody: PropTypes.node.isRequired,
+  endAction: PropTypes.node.isRequired,
+};
+
+const confirmDialogsPropTypes = {
+  isConfirmButtonLoading: PropTypes.bool.isRequired,
+  isOpen: PropTypes.bool.isRequired,
+  onConfirm: PropTypes.func.isRequired,
+  onToggleDialog: PropTypes.func.isRequired,
+};
+
+const ConfirmDialogPublishAll = ({ isOpen, onToggleDialog, isConfirmButtonLoading, onConfirm }) => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <ConfirmBulkActionDialog
+      isOpen={isOpen}
+      onToggleDialog={onToggleDialog}
+      dialogBody={
+        <>
+          <Typography id="confirm-description" textAlign="center">
+            {formatMessage({
+              id: getTrad('popUpWarning.bodyMessage.contentType.publish.all'),
+              defaultMessage: 'Are you sure you want to publish these entries?',
+            })}
+          </Typography>
+          <InjectionZoneList area="contentManager.listView.publishModalAdditionalInfos" />
+        </>
+      }
+      endAction={
+        <Button
+          onClick={onConfirm}
+          variant="secondary"
+          startIcon={<Check />}
+          loading={isConfirmButtonLoading}
+        >
+          {formatMessage({
+            id: 'app.utils.publish',
+            defaultMessage: 'Publish',
+          })}
+        </Button>
+      }
+    />
+  );
+};
+
+ConfirmDialogPublishAll.propTypes = confirmDialogsPropTypes;
+
+const ConfirmDialogUnpublishAll = ({
+  isOpen,
+  onToggleDialog,
+  isConfirmButtonLoading,
+  onConfirm,
+}) => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <ConfirmBulkActionDialog
+      isOpen={isOpen}
+      onToggleDialog={onToggleDialog}
+      dialogBody={
+        <>
+          <Typography id="confirm-description" textAlign="center">
+            {formatMessage({
+              id: getTrad('popUpWarning.bodyMessage.contentType.unpublish.all'),
+              defaultMessage: 'Are you sure you want to unpublish these entries?',
+            })}
+          </Typography>
+          <InjectionZoneList area="contentManager.listView.unpublishModalAdditionalInfos" />
+        </>
+      }
+      endAction={
+        <Button
+          onClick={onConfirm}
+          variant="secondary"
+          startIcon={<Check />}
+          loading={isConfirmButtonLoading}
+        >
+          {formatMessage({
+            id: 'app.utils.unpublish',
+            defaultMessage: 'Unpublish',
+          })}
+        </Button>
+      }
+    />
+  );
+};
+
+ConfirmDialogUnpublishAll.propTypes = confirmDialogsPropTypes;
+
+const ConfirmDialogDeleteAll = ({ isOpen, onToggleDialog, isConfirmButtonLoading, onConfirm }) => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <ConfirmBulkActionDialog
+      isOpen={isOpen}
+      onToggleDialog={onToggleDialog}
+      dialogBody={
+        <>
+          <Typography id="confirm-description" textAlign="center">
+            {formatMessage({
+              id: getTrad('popUpWarning.bodyMessage.contentType.delete.all'),
+              defaultMessage: 'Are you sure you want to delete these entries?',
+            })}
+          </Typography>
+          <InjectionZoneList area="contentManager.listView.deleteModalAdditionalInfos" />
+        </>
+      }
+      endAction={
+        <Button
+          onClick={onConfirm}
+          variant="danger-light"
+          startIcon={<Trash />}
+          id="confirm-delete"
+          loading={isConfirmButtonLoading}
+        >
+          {formatMessage({
+            id: 'app.components.Button.confirm',
+            defaultMessage: 'Confirm',
+          })}
+        </Button>
+      }
+    />
+  );
+};
+
+ConfirmDialogDeleteAll.propTypes = confirmDialogsPropTypes;
+
+const BulkActionsBar = ({
+  showPublish,
+  showDelete,
+  onConfirmDeleteAll,
+  onConfirmPublishAll,
+  onConfirmUnpublishAll,
+  selectedEntries,
+  clearSelectedEntries,
+}) => {
+  const { formatMessage } = useIntl();
+  const { trackUsage } = useTracking();
+  const { data } = useSelector(listViewDomain());
+
+  const [isConfirmButtonLoading, setIsConfirmButtonLoading] = useState(false);
+  const [dialogToOpen, setDialogToOpen] = useState(null);
+
+  // Filters for Bulk actions
+  const selectedEntriesObjects = data.filter((entry) => selectedEntries.includes(entry.id));
+  const publishButtonIsShown =
+    showPublish && selectedEntriesObjects.some((entry) => !entry.publishedAt);
+  const unpublishButtonIsShown =
+    showPublish && selectedEntriesObjects.some((entry) => entry.publishedAt);
+
+  const toggleDeleteModal = () => {
+    if (dialogToOpen === 'delete') {
+      setDialogToOpen(null);
+    } else {
+      setDialogToOpen('delete');
+      trackUsage('willBulkDeleteEntries');
+    }
+  };
+
+  const togglePublishModal = () => {
+    if (dialogToOpen === 'publish') {
+      setDialogToOpen(null);
+    } else {
+      setDialogToOpen('publish');
+      trackUsage('willBulkPublishEntries');
+    }
+  };
+
+  const toggleUnpublishModal = () => {
+    if (dialogToOpen === 'unpublish') {
+      setDialogToOpen(null);
+    } else {
+      setDialogToOpen('unpublish');
+      trackUsage('willBulkUnpublishEntries');
+    }
+  };
+
+  const handleBulkAction = async (confirmAction, toggleModal) => {
+    try {
+      setIsConfirmButtonLoading(true);
+      await confirmAction(selectedEntries);
+      setIsConfirmButtonLoading(false);
+      toggleModal();
+      clearSelectedEntries();
+    } catch (error) {
+      setIsConfirmButtonLoading(false);
+      toggleModal();
+    }
+  };
+
+  const handleBulkDelete = () => handleBulkAction(onConfirmDeleteAll, toggleDeleteModal);
+  const handleBulkPublish = () => handleBulkAction(onConfirmPublishAll, togglePublishModal);
+  const handleBulkUnpublish = () => handleBulkAction(onConfirmUnpublishAll, toggleUnpublishModal);
+
+  return (
+    <>
+      {publishButtonIsShown && (
+        <>
+          <Button variant="tertiary" onClick={togglePublishModal}>
+            {formatMessage({ id: 'app.utils.publish', defaultMessage: 'Publish' })}
+          </Button>
+          <ConfirmDialogPublishAll
+            isOpen={dialogToOpen === 'publish'}
+            onToggleDialog={togglePublishModal}
+            isConfirmButtonLoading={isConfirmButtonLoading}
+            onConfirm={handleBulkPublish}
+          />
+        </>
+      )}
+      {unpublishButtonIsShown && (
+        <>
+          <Button variant="tertiary" onClick={toggleUnpublishModal}>
+            {formatMessage({ id: 'app.utils.unpublish', defaultMessage: 'Unpublish' })}
+          </Button>
+          <ConfirmDialogUnpublishAll
+            isOpen={dialogToOpen === 'unpublish'}
+            onToggleDialog={toggleUnpublishModal}
+            isConfirmButtonLoading={isConfirmButtonLoading}
+            onConfirm={handleBulkUnpublish}
+          />
+        </>
+      )}
+      {showDelete && (
+        <>
+          <Button variant="danger-light" onClick={toggleDeleteModal}>
+            {formatMessage({ id: 'global.delete', defaultMessage: 'Delete' })}
+          </Button>
+          <ConfirmDialogDeleteAll
+            isOpen={dialogToOpen === 'delete'}
+            onToggleDialog={toggleDeleteModal}
+            isConfirmButtonLoading={isConfirmButtonLoading}
+            onConfirm={handleBulkDelete}
+          />
+        </>
+      )}
+    </>
+  );
+};
+
+BulkActionsBar.defaultProps = {
+  showPublish: false,
+  showDelete: false,
+  onConfirmDeleteAll() {},
+  onConfirmPublishAll() {},
+  onConfirmUnpublishAll() {},
+};
+
+BulkActionsBar.propTypes = {
+  showPublish: PropTypes.bool,
+  showDelete: PropTypes.bool,
+  onConfirmDeleteAll: PropTypes.func,
+  onConfirmPublishAll: PropTypes.func,
+  onConfirmUnpublishAll: PropTypes.func,
+  selectedEntries: PropTypes.array.isRequired,
+  clearSelectedEntries: PropTypes.func.isRequired,
+};
+
+export default BulkActionsBar;

package/admin/src/content-manager/components/DynamicTable/index.js

@@ -9,19 +9,22 @@ import { INJECT_COLUMN_IN_TABLE } from '../../../exposedHooks';
 import { selectDisplayedHeaders } from '../../pages/ListView/selectors';
 import { getTrad } from '../../utils';
 import TableRows from './TableRows';
-import ConfirmDialogDeleteAll from './ConfirmDialogDeleteAll';
 import ConfirmDialogDelete from './ConfirmDialogDelete';
 import { PublicationState } from './CellContent/PublicationState/PublicationState';
+import BulkActionsBar from './BulkActionsBar';
 
 const DynamicTable = ({
   canCreate,
   canDelete,
+  canPublish,
   contentTypeName,
   action,
   isBulkable,
   isLoading,
   onConfirmDelete,
   onConfirmDeleteAll,
+  onConfirmPublishAll,
+  onConfirmUnpublishAll,
   layout,
   rows,
 }) => {
@@ -89,17 +92,27 @@ const DynamicTable = ({
 
   return (
     <Table
-      components={{ ConfirmDialogDelete, ConfirmDialogDeleteAll }}
+      components={{ ConfirmDialogDelete }}
       contentType={contentTypeName}
       action={action}
       isLoading={isLoading}
       headers={tableHeaders}
       onConfirmDelete={onConfirmDelete}
-      onConfirmDeleteAll={onConfirmDeleteAll}
       onOpenDeleteAllModalTrackedEvent="willBulkDeleteEntries"
       rows={rows}
       withBulkActions
-      withMainAction={canDelete && isBulkable}
+      withMainAction={(canDelete || canPublish) && isBulkable}
+      renderBulkActionsBar={({ selectedEntries, clearSelectedEntries }) => (
+        <BulkActionsBar
+          showPublish={canPublish && hasDraftAndPublish}
+          showDelete={canDelete}
+          onConfirmDeleteAll={onConfirmDeleteAll}
+          onConfirmPublishAll={onConfirmPublishAll}
+          onConfirmUnpublishAll={onConfirmUnpublishAll}
+          selectedEntries={selectedEntries}
+          clearSelectedEntries={clearSelectedEntries}
+        />
+      )}
     >
       <TableRows
         canCreate={canCreate}
@@ -121,6 +134,7 @@ DynamicTable.defaultProps = {
 DynamicTable.propTypes = {
   canCreate: PropTypes.bool.isRequired,
   canDelete: PropTypes.bool.isRequired,
+  canPublish: PropTypes.bool.isRequired,
   contentTypeName: PropTypes.string.isRequired,
   action: PropTypes.node,
   isBulkable: PropTypes.bool.isRequired,
@@ -139,6 +153,8 @@ DynamicTable.propTypes = {
   }).isRequired,
   onConfirmDelete: PropTypes.func.isRequired,
   onConfirmDeleteAll: PropTypes.func.isRequired,
+  onConfirmPublishAll: PropTypes.func.isRequired,
+  onConfirmUnpublishAll: PropTypes.func.isRequired,
   rows: PropTypes.array.isRequired,
 };