refactor collapse usage (appium#2128)

Author: wilhus

app/common/renderer/components/Inspector/Commands.jsx

@@ -142,9 +142,11 @@ const Commands = (props) => {
             </Col>
           ))}
         </Row>
-        <Collapse>
-          {_.toPairs(COMMAND_DEFINITIONS).map(([commandGroup, commands]) => (
-            <Collapse.Panel header={t(commandGroup)} key={commandGroup}>
+        <Collapse
+          items={_.toPairs(COMMAND_DEFINITIONS).map(([commandGroup, commands]) => ({
+            key: commandGroup,
+            label: t(commandGroup),
+            children: (
               <Row>
                 {_.toPairs(commands).map(
                   ([commandName, command], index) =>
@@ -167,9 +169,9 @@ const Commands = (props) => {
                     ),
                 )}
               </Row>
-            </Collapse.Panel>
-          ))}
-        </Collapse>
+            ),
+          }))}
+        />
       </Space>
       {!!pendingCommand && (
         <Modal

app/common/renderer/components/Inspector/SavedGestures.jsx

@@ -175,17 +175,21 @@ const SavedGestures = (props) => {
       <p>
         <i>{t('unableToUploadGestureFiles')}</i>
       </p>
-      <Collapse ghost defaultActiveKey={Object.keys(gestureUploadErrors)}>
-        {Object.keys(gestureUploadErrors).map((errorFile) => (
-          <Collapse.Panel header={<b>{errorFile}</b>} key={errorFile}>
+      <Collapse
+        ghost
+        defaultActiveKey={Object.keys(gestureUploadErrors)}
+        items={Object.keys(gestureUploadErrors).map((errorFile) => ({
+          key: errorFile,
+          label: <b>{errorFile}</b>,
+          children: (
             <ol>
               {gestureUploadErrors[errorFile].map((error, index) => (
                 <li key={errorFile + index.toString()}>{error}</li>
               ))}
             </ol>
-          </Collapse.Panel>
-        ))}
-      </Collapse>
+          ),
+        }))}
+      />
     </Modal>
   );
 

app/common/renderer/components/Session/AdvancedServerParams.jsx

@@ -7,48 +7,59 @@ const AdvancedServerParams = ({server, setServerParam, serverType, t}) => (
   <Row gutter={8}>
     <Col className={styles.advancedSettingsContainerCol}>
       <div className={styles.advancedSettingsContainer}>
-        <Collapse bordered={true}>
-          <Collapse.Panel header={t('Advanced Settings')}>
-            <Row>
-              {serverType !== 'lambdatest' && (
-                <Col span={7}>
-                  <Form.Item>
-                    <Checkbox
-                      checked={!!server.advanced.allowUnauthorized}
-                      onChange={(e) =>
-                        setServerParam('allowUnauthorized', e.target.checked, SERVER_TYPES.ADVANCED)
-                      }
-                    >
-                      {t('allowUnauthorizedCerts')}
-                    </Checkbox>
-                  </Form.Item>
-                </Col>
-              )}
-              <Col span={5} align="right">
-                <Form.Item>
-                  <Checkbox
-                    checked={!!server.advanced.useProxy}
-                    onChange={(e) =>
-                      setServerParam('useProxy', e.target.checked, SERVER_TYPES.ADVANCED)
-                    }
-                  >
-                    {t('Use Proxy')}
-                  </Checkbox>
-                </Form.Item>
-              </Col>
-              <Col span={8}>
-                <Form.Item>
-                  <Input
-                    disabled={!server.advanced.useProxy}
-                    onChange={(e) => setServerParam('proxy', e.target.value, SERVER_TYPES.ADVANCED)}
-                    placeholder={t('Proxy URL')}
-                    value={server.advanced.proxy}
-                  />
-                </Form.Item>
-              </Col>
-            </Row>
-          </Collapse.Panel>
-        </Collapse>
+        <Collapse
+          items={[
+            {
+              label: t('Advanced Settings'),
+              children: (
+                <Row>
+                  {serverType !== 'lambdatest' && (
+                    <Col span={7}>
+                      <Form.Item>
+                        <Checkbox
+                          checked={!!server.advanced.allowUnauthorized}
+                          onChange={(e) =>
+                            setServerParam(
+                              'allowUnauthorized',
+                              e.target.checked,
+                              SERVER_TYPES.ADVANCED,
+                            )
+                          }
+                        >
+                          {t('allowUnauthorizedCerts')}
+                        </Checkbox>
+                      </Form.Item>
+                    </Col>
+                  )}
+                  <Col span={5} align="right">
+                    <Form.Item>
+                      <Checkbox
+                        checked={!!server.advanced.useProxy}
+                        onChange={(e) =>
+                          setServerParam('useProxy', e.target.checked, SERVER_TYPES.ADVANCED)
+                        }
+                      >
+                        {t('Use Proxy')}
+                      </Checkbox>
+                    </Form.Item>
+                  </Col>
+                  <Col span={8}>
+                    <Form.Item>
+                      <Input
+                        disabled={!server.advanced.useProxy}
+                        onChange={(e) =>
+                          setServerParam('proxy', e.target.value, SERVER_TYPES.ADVANCED)
+                        }
+                        placeholder={t('Proxy URL')}
+                        value={server.advanced.proxy}
+                      />
+                    </Form.Item>
+                  </Col>
+                </Row>
+              ),
+            },
+          ]}
+        />
       </div>
     </Col>
   </Row>