New: Make Release Group Outline Not Show as Required

frontend/src/InteractiveImport/Interactive/InteractiveImportRow.js

@@ -319,7 +319,9 @@ class InteractiveImportRow extends Component {
         >
           {
             showReleaseGroupPlaceholder ?
-              <InteractiveImportRowCellPlaceholder /> :
+              <InteractiveImportRowCellPlaceholder
+                isOptional={true}
+              /> :
               releaseGroup
           }
         </TableRowCellButton>

frontend/src/InteractiveImport/Interactive/InteractiveImportRowCellPlaceholder.css

@@ -5,3 +5,7 @@
   height: 25px;
   border: 2px dashed var(--dangerColor);
 }
+
+.optional {
+  border: 2px dashed var(--gray);
+}

frontend/src/InteractiveImport/Interactive/InteractiveImportRowCellPlaceholder.css.d.ts

@@ -1,6 +1,7 @@
 // This file is automatically generated.
 // Please do not change this file!
 interface CssExports {
+  'optional': string;
   'placeholder': string;
 }
 export const cssExports: CssExports;

frontend/src/InteractiveImport/Interactive/InteractiveImportRowCellPlaceholder.js

@@ -1,10 +0,0 @@
-import React from 'react';
-import styles from './InteractiveImportRowCellPlaceholder.css';
-
-function InteractiveImportRowCellPlaceholder() {
-  return (
-    <span className={styles.placeholder} />
-  );
-}
-
-export default InteractiveImportRowCellPlaceholder;

frontend/src/InteractiveImport/Interactive/InteractiveImportRowCellPlaceholder.tsx

@@ -0,0 +1,22 @@
+import classNames from 'classnames';
+import React from 'react';
+import styles from './InteractiveImportRowCellPlaceholder.css';
+
+interface InteractiveImportRowCellPlaceholderProps {
+  isOptional?: boolean;
+}
+
+function InteractiveImportRowCellPlaceholder(
+  props: InteractiveImportRowCellPlaceholderProps
+) {
+  return (
+    <span
+      className={classNames(
+        styles.placeholder,
+        props.isOptional && styles.optional
+      )}
+    />
+  );
+}
+
+export default InteractiveImportRowCellPlaceholder;