Const DashboardMigrationCardContent
DashboardMigrationCardContent: FC = observer(() => {const [busy, setBusy] = useState(false);const {optionStore: {dashboardMigration: { id: migrationId, description, actions },others: { isPro }}} = useStores();const proModalMobileExperience = useProModalMobileExperience();const proModalVisualContentBlocker = useProModalVisualContentBlocker();// We do not have this currently in a store / model as it should be only made through this dashboard tileconst handleClick = useCallback(async ({ id, callback }: typeof actions[0]) => {if (typeof callback === "string" && isUrl(callback)) {// Directly redirect to this page as there is no server callbackwindow.location.href = callback;} else {setBusy(true);try {const { success, redirect } = await request<RequestRouteMigrationPost,ParamsRouteMigrationPost,ResponseRouteMigrationPost>({location: locationRestMigrationPost,params: {migration: migrationId,action: id}});if (success) {if (redirect) {window.location.href = redirect;} else {message.success(__("Successfully saved changes!"));}}} catch (e) {// Silence is golden. Currently - we do ignore errors} finally {setBusy(false);}}}, []);return (<Spin spinning={busy}><p className="description" dangerouslySetInnerHTML={{ __html: description }} /><ListitemLayout="vertical"size="small"dataSource={Object.values(actions)}renderItem={(action) => {const {id,title,description,linkText,linkClasses,linkDisabled,confirmText,previewImage,performed,forceShowPerformedLabel,needsPro,info} = action;const btn = (<buttonkey="apply-link"className={linkClasses}onClick={() => !confirmText && handleClick(action)}disabled={linkDisabled}>{linkText}</button>);return (<List.Itemstyle={{ paddingLeft: 0, paddingRight: 0 }}key={id}actions={[linkText &&(confirmText ? (<Popconfirmtitle={confirmText}placement="bottomLeft"onConfirm={() => handleClick(action)}cancelText={__("Cancel")}okText={linkText}overlayStyle={{ maxWidth: 450 }}// zoom-in effect does not work correctly within a Card componenttransitionName={null}>{btn}</Popconfirm>) : (btn)),(performed || forceShowPerformedLabel) && (needsPro ? isPro : true) && (<span style={{ verticalAlign: "middle" }}>{<CheckOutlined />} {__("Already applied")}</span>),needsPro &&!isPro &&(() => {// TODO: could this be done more generic? currently it's totally ok for this amount of caseslet modal: JSX.Element;let tag: JSX.Element;switch (id) {case "visual-content-blocker":modal = proModalVisualContentBlocker.modal;tag = proModalVisualContentBlocker.tag;break;case "mobile-experience":modal = proModalMobileExperience.modal;tag = proModalMobileExperience.tag;break;default:return null;}return (<>{modal} <span style={{ position: "absolute", top: 3 }}>{tag}</span></>);})()].filter(Boolean)}extra={previewImage && <Image width={272} src={previewImage} />}><List.Item.Metatitle={title}description={<><p className="description" dangerouslySetInnerHTML={{ __html: description }} />{!!info && (<divclassName="notice notice-info below-h2 notice-alt"style={{ marginTop: 10 }}><p className="description" dangerouslySetInnerHTML={{ __html: info }} /></div>)}</>}/></List.Item>);}}/></Spin>);})