Restore table component and website settings page

components/common/Table.js

@@ -1,4 +1,3 @@
-import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -14,9 +13,6 @@ function Table({
   rowKey,
   showHeader = true,
   children,
-  isDraggable = false,
-  dragId,
-  onDragEnd,
 }) {
   if (empty && rows.length === 0) {
     return empty;
@@ -40,37 +36,10 @@ function Table({
       <div className={classNames(styles.body, bodyClassName)}>
         {rows.length === 0 && <NoData />}
         {!children &&
-          (isDraggable ? (
-            <DragDropContext onDragEnd={onDragEnd}>
-              <Droppable droppableId={dragId}>
-                {provided => (
-                  <div {...provided.droppableProps} ref={provided.innerRef}>
-                    {rows.map((row, index) => {
-                      const id = rowKey ? rowKey(row) : index;
-                      return (
-                        <Draggable key={id} draggableId={`${dragId}-${id}`} index={index}>
-                          {provided => (
-                            <div
-                              ref={provided.innerRef}
-                              {...provided.draggableProps}
-                              {...provided.dragHandleProps}
-                            >
-                              <TableRow columns={columns} row={row} />
-                            </div>
-                          )}
-                        </Draggable>
-                      );
-                    })}
-                  </div>
-                )}
-              </Droppable>
-            </DragDropContext>
-          ) : (
-            rows.map((row, index) => {
-              const id = rowKey ? rowKey(row) : index;
-              return <TableRow key={id} columns={columns} row={row} />;
-            })
-          ))}
+          rows.map((row, index) => {
+            const id = rowKey ? rowKey(row) : index;
+            return <TableRow key={id} columns={columns} row={row} />;
+          })}
         {children}
       </div>
     </div>

components/settings/WebsiteSettings.js

@@ -25,7 +25,7 @@ import LinkIcon from 'assets/link.svg';
 import useFetch from 'hooks/useFetch';
 import useUser from 'hooks/useUser';
 import { orderByWebsiteMap } from 'lib/format';
-import useStore, { setDashboard } from 'store/app';
+import useStore from 'store/app';
 import styles from './WebsiteSettings.module.css';
 
 const selector = state => state.dashboard;
@@ -167,28 +167,6 @@ export default function WebsiteSettings() {
     setShowUrl(null);
   }
 
-  function handleWebsiteDrag({ destination, source }) {
-    if (!destination || destination.index === source.index) return;
-
-    const orderedWebsites = [...ordered];
-    const [removed] = orderedWebsites.splice(source.index, 1);
-    orderedWebsites.splice(destination.index, 0, removed);
-
-    setDashboard({
-      ...store,
-      websiteOrdering: orderedWebsites
-        .map((i, k) => ({ [i.website_uuid]: k }))
-        .reduce((a, b) => ({ ...a, ...b })),
-    });
-  }
-
-  function resetWebsiteOrder() {
-    setDashboard({
-      ...store,
-      websiteOrdering: {},
-    });
-  }
-
   if (!data) {
     return null;
   }
@@ -214,23 +192,11 @@ export default function WebsiteSettings() {
         <div>
           <FormattedMessage id="label.websites" defaultMessage="Websites" />
         </div>
-        <div className={styles.headerButtons}>
-          <Button size="small" onClick={() => resetWebsiteOrder()}>
-            <FormattedMessage id="label.reset-order" defaultMessage="Reset order" />
-          </Button>
-          <Button icon={<Plus />} size="small" onClick={() => setAddWebsite(true)}>
-            <FormattedMessage id="label.add-website" defaultMessage="Add website" />
-          </Button>
-        </div>
+        <Button icon={<Plus />} size="small" onClick={() => setAddWebsite(true)}>
+          <FormattedMessage id="label.add-website" defaultMessage="Add website" />
+        </Button>
       </PageHeader>
-      <Table
-        columns={user.is_admin ? adminColumns : columns}
-        rows={ordered}
-        empty={empty}
-        isDraggable
-        onDragEnd={handleWebsiteDrag}
-        dragId={'website-settings-list'}
-      />
+      <Table columns={user.is_admin ? adminColumns : columns} rows={ordered} empty={empty} />
       {editWebsite && (
         <Modal title={<FormattedMessage id="label.edit-website" defaultMessage="Edit website" />}>
           <WebsiteEditForm values={editWebsite} onSave={handleSave} onClose={handleClose} />

components/settings/WebsiteSettings.module.css

@@ -11,9 +11,3 @@
 .detailLink {
   width: 100%;
 }
-
-.headerButtons {
-  display: flex;
-  justify-content: flex-end;
-  gap: 10px;
-}