Add Copy List button on Collection page

ui/component/collectionActions/view.jsx

@@ -15,7 +15,7 @@ import { ENABLE_FILE_REACTIONS } from 'config';
 type Props = {
   uri: string,
   claim: StreamClaim,
-  openModal: (id: string, { uri: string, claimIsMine?: boolean, isSupport?: boolean }) => void,
+  openModal: (id: string, {}) => void,
   myChannels: ?Array<ChannelClaim>,
   doToast: ({ message: string }) => void,
   claimIsPending: boolean,
@@ -24,6 +24,7 @@ type Props = {
   showInfo: boolean,
   setShowInfo: (boolean) => void,
   collectionHasEdits: boolean,
+  isBuiltin: boolean,
 };
 
 function CollectionActions(props: Props) {
@@ -37,12 +38,15 @@ function CollectionActions(props: Props) {
     showInfo,
     setShowInfo,
     collectionHasEdits,
+    isBuiltin,
   } = props;
   const { push } = useHistory();
   const isMobile = useIsMobile();
   const claimId = claim && claim.claim_id;
   const webShareable = true; // collections have cost?
   const lhsSection = (
+    <>
+      {!isBuiltin && (
         <>
           {ENABLE_FILE_REACTIONS && uri && <FileReactions uri={uri} />}
           {uri && <ClaimSupportButton uri={uri} fileAction />}
@@ -57,11 +61,15 @@ function CollectionActions(props: Props) {
             />
           )}
         </>
+      )}
+    </>
   );
 
   const rhsSection = (
     <>
-      {isMyCollection && (
+      {!isBuiltin &&
+        (isMyCollection ? (
+          <>
             <Button
               title={uri ? __('Update') : __('Publish')}
               label={uri ? __('Update') : __('Publish')}
@@ -72,8 +80,6 @@ function CollectionActions(props: Props) {
               iconSize={18}
               disabled={claimIsPending}
             />
-      )}
-      {isMyCollection && (
             <Button
               className={classnames('button--file-action')}
               title={__('Delete List')}
@@ -83,15 +89,23 @@ function CollectionActions(props: Props) {
               description={__('Delete List')}
               disabled={claimIsPending}
             />
-      )}
-      {!isMyCollection && (
+          </>
+        ) : (
           <Button
             title={__('Report content')}
             className="button--file-action"
             icon={ICONS.REPORT}
             navigate={`/$/${PAGES.REPORT_CONTENT}?claimId=${claimId}`}
           />
-      )}
+        ))}
+      <Button
+        className={classnames('button--file-action')}
+        label={__('Copy List')}
+        title={__('Copy List')}
+        onClick={() => openModal(MODALS.COLLECTION_ADD, { collectionId })}
+        icon={ICONS.COPY}
+        iconSize={18}
+      />
     </>
   );
 

ui/page/collection/view.jsx

@@ -112,18 +112,26 @@ export default function CollectionPage(props: Props) {
       title={
         <span>
           <Icon
-            icon={(collectionId === COLLECTIONS_CONSTS.WATCH_LATER_ID && ICONS.TIME) ||
-              (collectionId === COLLECTIONS_CONSTS.FAVORITES_ID && ICONS.STAR) || ICONS.STACK}
-            className="icon--margin-right" />
+            icon={
+              (collectionId === COLLECTIONS_CONSTS.WATCH_LATER_ID && ICONS.TIME) ||
+              (collectionId === COLLECTIONS_CONSTS.FAVORITES_ID && ICONS.STAR) ||
+              ICONS.STACK
+            }
+            className="icon--margin-right"
+          />
           {claim ? claim.value.title || claim.name : collection && collection.name}
         </span>
       }
       titleActions={titleActions}
       subtitle={subTitle}
       body={
-        !isBuiltin && (
-          <CollectionActions uri={uri} collectionId={collectionId} setShowInfo={setShowInfo} showInfo={showInfo} />
-        )
+        <CollectionActions
+          uri={uri}
+          collectionId={collectionId}
+          setShowInfo={setShowInfo}
+          showInfo={showInfo}
+          isBuiltin={isBuiltin}
+        />
       }
       actions={
         showInfo &&

ui/scss/component/_button.scss

@@ -240,6 +240,11 @@
   }
 }
 
+.button--file-action--right {
+  @extend .button--file-action;
+  float: right;
+}
+
 .button--fire {
   color: var(--color-fire);
   position: relative;