fix(admin-ui): Allow new option groups to be deleted in variant editor

Relates to #1577

packages/admin-ui/src/lib/catalog/src/components/product-variants-editor/product-variants-editor.component.html

@@ -25,6 +25,11 @@
             [disabled]="group.name === ''"
         ></vdr-option-value-input>
     </div>
+    <div>
+        <button *ngIf="group.isNew" class="btn btn-icon btn-danger-outline mt5" (click)="removeOption(group)">
+            <clr-icon shape="trash"></clr-icon>
+        </button>
+    </div>
 </div>
 <button
     class="btn btn-primary-outline btn-sm"

packages/admin-ui/src/lib/catalog/src/components/product-variants-editor/product-variants-editor.component.ts

@@ -41,6 +41,17 @@ export class GeneratedVariant {
     }
 }
 
+interface OptionGroupUiModel {
+    id?: string;
+    isNew: boolean;
+    name: string;
+    values: Array<{
+        id?: string;
+        name: string;
+        locked: boolean;
+    }>;
+}
+
 @Component({
     selector: 'vdr-product-variants-editor',
     templateUrl: './product-variants-editor.component.html',
@@ -50,16 +61,7 @@ export class GeneratedVariant {
 export class ProductVariantsEditorComponent implements OnInit, DeactivateAware {
     formValueChanged = false;
     generatedVariants: GeneratedVariant[] = [];
-    optionGroups: Array<{
-        id?: string;
-        isNew: boolean;
-        name: string;
-        values: Array<{
-            id?: string;
-            name: string;
-            locked: boolean;
-        }>;
-    }>;
+    optionGroups: OptionGroupUiModel[];
     product: GetProductVariantOptions.Product;
     currencyCode: CurrencyCode;
     private languageCode: LanguageCode;
@@ -108,6 +110,11 @@ export class ProductVariantsEditorComponent implements OnInit, DeactivateAware {
         });
     }
 
+    removeOption(optionGroup: OptionGroupUiModel) {
+        this.optionGroups = this.optionGroups.filter(og => og !== optionGroup);
+        this.generateVariants();
+    }
+
     generateVariants() {
         const groups = this.optionGroups.map(g => g.values);
         const previousVariants = this.generatedVariants;

packages/admin-ui/src/lib/static/styles/global/_utilities.scss

@@ -7,6 +7,7 @@ $space-1: math.div($space-unit, 2);
 $space-2: $space-unit;
 $space-3: $space-unit * 2;
 $space-4: $space-unit * 3;
+$space-5: $space-unit * 4;
 
 /////////////// layout ///////////////
 .flex {
@@ -66,6 +67,14 @@ $space-4: $space-unit * 3;
 .mx4 { margin-left:   $space-4; margin-right:  $space-4 }
 .my4 { margin-top:    $space-4; margin-bottom: $space-4 }
 
+.m5  { margin:        $space-5 }
+.mt5 { margin-top:    $space-5 }
+.mr5 { margin-right:  $space-5 }
+.mb5 { margin-bottom: $space-5 }
+.ml5 { margin-left:   $space-5 }
+.mx5 { margin-left:   $space-5; margin-right:  $space-5 }
+.my5 { margin-top:    $space-5; margin-bottom: $space-5 }
+
 .mxn1 { margin-left: -$space-1; margin-right: -$space-1; }
 .mxn2 { margin-left: -$space-2; margin-right: -$space-2; }
 .mxn3 { margin-left: -$space-3; margin-right: -$space-3; }