|
|
@@ -103,6 +103,16 @@ const SlackIntegration = (props) => {
|
|
|
break;
|
|
|
}
|
|
|
|
|
|
+ const showBotTypeLevel = (level) => {
|
|
|
+ return <span>{t(`admin:slack_integration.selecting_bot_types.${level}`)}</span>;
|
|
|
+ };
|
|
|
+ const showBotTypeLabel = (label) => {
|
|
|
+ return <span>{t(`admin:slack_integration.selecting_bot_types.${label}`)}</span>;
|
|
|
+ };
|
|
|
+ const showBotTypeDiscription = (desc) => {
|
|
|
+ return <span className={`bot-type-disc-${desc}`}>{t(`admin:slack_integration.selecting_bot_types.${desc}`)}</span>;
|
|
|
+ };
|
|
|
+
|
|
|
return (
|
|
|
<>
|
|
|
<ConfirmBotChangeModal
|
|
|
@@ -117,42 +127,147 @@ const SlackIntegration = (props) => {
|
|
|
onClickGenerateToken={generateTokenHandler}
|
|
|
/>
|
|
|
|
|
|
- <div className="row my-5">
|
|
|
- <div className="card-deck mx-auto">
|
|
|
-
|
|
|
- <div
|
|
|
- className={`card mx-3 py-5 rounded ${currentBotType === 'official-bot' ? 'border-info' : ''}`}
|
|
|
- role="button"
|
|
|
- onClick={() => handleBotTypeSelect('official-bot')}
|
|
|
- >
|
|
|
- <div className="card-body">
|
|
|
- <h5 className="card-title">Official Bot</h5>
|
|
|
- <p className="card-text">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
|
|
|
+ <div className="selecting-bot-type my-5">
|
|
|
+ <h2 className="admin-setting-header mb-4">
|
|
|
+ {t('admin:slack_integration.selecting_bot_types.slack_bot')}
|
|
|
+ <span className="ml-2 btn-link">
|
|
|
+ <span className="mr-1">{t('admin:slack_integration.selecting_bot_types.detailed_explanation')}</span>
|
|
|
+ {/* TODO: add an appropriate link by GW-5614 */}
|
|
|
+ <i className="fa fa-external-link" aria-hidden="true"></i>
|
|
|
+ </span>
|
|
|
+
|
|
|
+ </h2>
|
|
|
+
|
|
|
+ {t('admin:slack_integration.selecting_bot_types.selecting_bot_type')}
|
|
|
+
|
|
|
+ <div className="row my-4">
|
|
|
+ <div className="card-deck mx-auto">
|
|
|
+
|
|
|
+ <div
|
|
|
+ className={`card admin-bot-card mx-3 rounded border-radius-sm shadow ${currentBotType === 'official-bot' ? 'border-primary' : ''}`}
|
|
|
+ onClick={() => handleBotTypeSelect('official-bot')}
|
|
|
+ role="button"
|
|
|
+ >
|
|
|
+ <div>
|
|
|
+ <h3 className={`card-header mb-0 py-3 text-center ${currentBotType === 'official-bot' ? 'bg-primary text-light' : ''}`}>
|
|
|
+ <span className="mr-2">
|
|
|
+ {t('admin:slack_integration.selecting_bot_types.official_bot')}
|
|
|
+ </span>
|
|
|
+ <span className="badge badge-info mr-2">
|
|
|
+ {t('admin:slack_integration.selecting_bot_types.recommended')}
|
|
|
+ </span>
|
|
|
+ {/* TODO: add an appropriate link by GW-5614 */}
|
|
|
+ <i className={`fa fa-external-link btn-link ${currentBotType === 'official-bot' ? 'bg-primary text-light' : ''}`} aria-hidden="true"></i>
|
|
|
+ </h3>
|
|
|
+ </div>
|
|
|
+ <div className="card-body p-4">
|
|
|
+ <p className="card-text">
|
|
|
+ <div className="text-center">
|
|
|
+ {showBotTypeLevel('for_beginners')}
|
|
|
+ </div>
|
|
|
+ <div className="my-4">
|
|
|
+ <div className="d-flex justify-content-between mb-2">
|
|
|
+ {showBotTypeLabel('set_up')}
|
|
|
+ {showBotTypeDiscription('easy')}
|
|
|
+ </div>
|
|
|
+ <div className="d-flex justify-content-between mb-2">
|
|
|
+ {showBotTypeLabel('multiple_workspaces_integration')}
|
|
|
+ {showBotTypeDiscription('possible')}
|
|
|
+ </div>
|
|
|
+ <div className="d-flex justify-content-between">
|
|
|
+ {showBotTypeLabel('security_control')}
|
|
|
+ {showBotTypeDiscription('impossible')}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
|
- <div
|
|
|
- className={`card mx-3 py-5 rounded ${currentBotType === 'custom-bot-without-proxy' ? 'border-info' : ''}`}
|
|
|
- role="button"
|
|
|
- onClick={() => handleBotTypeSelect('custom-bot-without-proxy')}
|
|
|
- >
|
|
|
- <div className="card-body">
|
|
|
- <h5 className="card-title">Custom Bot (Without Proxy)</h5>
|
|
|
- <p className="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. </p>
|
|
|
+ <div
|
|
|
+ className={`card admin-bot-card mx-3 rounded shadow ${currentBotType === 'custom-bot-without-proxy' ? 'border-primary' : ''}`}
|
|
|
+ onClick={() => handleBotTypeSelect('custom-bot-without-proxy')}
|
|
|
+ role="button"
|
|
|
+ >
|
|
|
+ <h3 className={`card-header mb-0 py-3 text-center text-nowrap ${currentBotType === 'custom-bot-without-proxy' ? 'bg-primary text-light' : ''}`}>
|
|
|
+ <span className="mr-2">
|
|
|
+ {t('admin:slack_integration.selecting_bot_types.custom_bot')}
|
|
|
+ </span>
|
|
|
+ <span className="supplementary-desc mr-2">
|
|
|
+ {t('admin:slack_integration.selecting_bot_types.without_proxy')}
|
|
|
+ </span>
|
|
|
+ {/* TODO: add an appropriate link by GW-5614 */}
|
|
|
+ <i
|
|
|
+ className={`fa fa-external-link btn-link ${currentBotType === 'custom-bot-without-proxy' ? 'bg-primary text-light' : ''}`}
|
|
|
+ aria-hidden="true"
|
|
|
+ >
|
|
|
+ </i>
|
|
|
+ </h3>
|
|
|
+ <div className="card-body p-4">
|
|
|
+ <p className="card-text">
|
|
|
+ <div className="text-center">
|
|
|
+ {showBotTypeLevel('for_intermediate')}
|
|
|
+ </div>
|
|
|
+ <div className="my-4">
|
|
|
+ <div className="d-flex justify-content-between mb-2">
|
|
|
+ {showBotTypeLabel('set_up')}
|
|
|
+ {showBotTypeDiscription('normal')}
|
|
|
+ </div>
|
|
|
+ <div className="d-flex justify-content-between mb-2">
|
|
|
+ {showBotTypeLabel('multiple_workspaces_integration')}
|
|
|
+ {showBotTypeDiscription('impossible')}
|
|
|
+ </div>
|
|
|
+ <div className="d-flex justify-content-between">
|
|
|
+ {showBotTypeLabel('security_control')}
|
|
|
+ {showBotTypeDiscription('possible')}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
|
- <div
|
|
|
- className={`card mx-3 py-5 rounded ${currentBotType === 'custom-bot-with-proxy' ? 'border-info' : ''}`}
|
|
|
- role="button"
|
|
|
- onClick={() => handleBotTypeSelect('custom-bot-with-proxy')}
|
|
|
- >
|
|
|
- <div className="card-body">
|
|
|
- <h5 className="card-title">Custom Bot (With Proxy)</h5>
|
|
|
- <p className="card-text">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
|
|
|
+ <div
|
|
|
+ className={`card admin-bot-card mx-3 rounded shadow ${currentBotType === 'custom-bot-with-proxy' ? 'border-primary' : ''}`}
|
|
|
+ onClick={() => handleBotTypeSelect('custom-bot-with-proxy')}
|
|
|
+ role="button"
|
|
|
+ >
|
|
|
+ <h3 className={`card-header mb-0 py-3 text-center text-nowrap ${currentBotType === 'custom-bot-with-proxy' ? 'bg-primary text-light' : ''}`}>
|
|
|
+ <span className="mr-2">
|
|
|
+ {t('admin:slack_integration.selecting_bot_types.custom_bot')}
|
|
|
+ </span>
|
|
|
+ <span className="supplementary-desc mr-2">
|
|
|
+ {t('admin:slack_integration.selecting_bot_types.with_proxy')}
|
|
|
+ </span>
|
|
|
+ {/* TODO: add an appropriate link by GW-5614 */}
|
|
|
+ <i
|
|
|
+ className={`fa fa-external-link btn-link ${currentBotType === 'custom-bot-with-proxy' ? 'bg-primary text-light' : ''}`}
|
|
|
+ aria-hidden="true"
|
|
|
+ >
|
|
|
+ </i>
|
|
|
+ </h3>
|
|
|
+ <div className="card-body p-4">
|
|
|
+ <p className="card-text">
|
|
|
+ <div className="text-center">
|
|
|
+ {showBotTypeLevel('for_advanced')}
|
|
|
+ </div>
|
|
|
+ <div className="my-4">
|
|
|
+ <div className="d-flex justify-content-between mb-2">
|
|
|
+ {showBotTypeLabel('set_up')}
|
|
|
+ {showBotTypeDiscription('hard')}
|
|
|
+ </div>
|
|
|
+ <div className="d-flex justify-content-between mb-2">
|
|
|
+ {showBotTypeLabel('multiple_workspaces_integration')}
|
|
|
+ {showBotTypeDiscription('possible')}
|
|
|
+ </div>
|
|
|
+ <div className="d-flex justify-content-between">
|
|
|
+ {showBotTypeLabel('security_control')}
|
|
|
+ {showBotTypeDiscription('impossible')}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|