From 93fa75df2ef8605257b5efb27d3ff0bfc93dda17 Mon Sep 17 00:00:00 2001
From: gingervitis <omqmail@gmail.com>
Date: Sun, 17 Jan 2021 01:41:00 -0800
Subject: [PATCH] add delete variant button

---
 .../config/video-variants-table.tsx           | 48 ++++++++++++++-----
 web/styles/config.scss                        | 13 ++++-
 2 files changed, 47 insertions(+), 14 deletions(-)

diff --git a/web/pages/components/config/video-variants-table.tsx b/web/pages/components/config/video-variants-table.tsx
index 22b9fd3f2..a368368d2 100644
--- a/web/pages/components/config/video-variants-table.tsx
+++ b/web/pages/components/config/video-variants-table.tsx
@@ -4,6 +4,7 @@
 import React, { useContext, useState } from 'react';
 import { Typography, Table, Modal, Button } from 'antd';
 import { ColumnsType } from 'antd/lib/table';
+import { DeleteOutlined } from '@ant-design/icons';
 import { ServerStatusContext } from '../../../utils/server-status-context';
 import { UpdateArgs, VideoVariant } from '../../../types/config-section';
 import VideoVariantForm from './video-variant-form';
@@ -85,7 +86,15 @@ export default function CurrentVariantsTable() {
       postData.splice(editId, 1, modalDataState);
     }
     postUpdateToAPI(postData);
-  }
+  };
+
+  const handleDeleteVariant = index => {
+    const postData = [
+      ...videoQualityVariants,
+    ];
+    postData.splice(index, 1);
+    postUpdateToAPI(postData)
+  };
 
   const handleUpdateField = ({ fieldName, value }: UpdateArgs) => {
     setModalDataState({
@@ -124,18 +133,30 @@ export default function CurrentVariantsTable() {
       title: '',
       dataIndex: '',
       key: 'edit',
-      render: (data: VideoVariant) => (
-        <Button type="primary" size="small" onClick={() => {
-          const index = data.key - 1;
-          setEditId(index);
-          setModalDataState(videoQualityVariants[index]);
-          setDisplayModal(true);
-        }}>
-          Edit
-        </Button>
-      ),
-    },
-  ];
+      render: (data: VideoVariant) => {
+        const index = data.key - 1;
+        return (
+          <span className="actions">
+            <Button type="primary" size="small" onClick={() => {
+              setEditId(index);
+              setModalDataState(videoQualityVariants[index]);
+              setDisplayModal(true);
+            }}>
+              Edit
+            </Button>
+            <Button
+              className="delete-button"
+              icon={<DeleteOutlined />}
+              size="small"
+              disabled={index === 0}
+              onClick={() => {
+                handleDeleteVariant(index);
+              }}
+            />              
+          </span>
+        )},
+      },
+    ];
 
   const statusMessage = (
     <div className={`status-message ${submitStatus || ''}`}>
@@ -152,6 +173,7 @@ export default function CurrentVariantsTable() {
       {statusMessage}
 
       <Table
+        className="variants-table"
         pagination={false}
         size="small"
         columns={videoQualityColumns}
diff --git a/web/styles/config.scss b/web/styles/config.scss
index 6565b8641..4ef93576a 100644
--- a/web/styles/config.scss
+++ b/web/styles/config.scss
@@ -272,9 +272,20 @@
     text-align: center;
   }
 }
+.variants-table {
+  .actions {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .delete-button {
+    margin-left: .5em;
+    opacity: .8;
+  }
+}
 .segment-tip {
   width: 10em;
   text-align: center;
   margin: auto;
   display: inline-block;
-}
\ No newline at end of file
+}