Skip to content

web: codemod `<Element className="btn" />`occurrences

Administrator requested to merge vb/button-migration into main

Created by: valerybugakov

Context

Semi-automated migration of the elements using className="btn" to the <Button /> Wildcard component powered by the buttonElementToComponent codemod.

Notes

Outstanding work

SearchOnboardingTour:

https://github.com/sourcegraph/sourcegraph/blob/e1369056695f5cf064e9f089b9505e0e043b64bb/client/web/src/search/input/SearchOnboardingTour.ts#L75-L79

@novoselrok, I didn't look into this one closely yet, but right away curious why raw DOM manipulations are used here instead of regular React components? What are there potential blockers for the migration to React components?

Generated by the codemod:

./client/web/src/components/shared.tsx:11:110 - warning: Class 'btn btn-link' is used on the 'CommandListPopoverButton' element. Please update it manually.
>>>    
    <CommandListPopoverButton
        {...props}
        buttonClassName="btn btn-link"
        popoverClassName="popover  border-0"
        popoverInnerClassName="rounded overflow-hidden"
        formClassName="form p-2 bg-1 border-bottom"
        inputClassName="form-control px-2 py-1"
        listClassName="list-group list-group-flush list-unstyled pt-1"
        actionItemClassName="list-group-item list-group-item-action p-2 border-0"
        selectedActionItemClassName="active border-primary"
        noResultsClassName="list-group-item text-muted"
    />

./client/web/src/nav/GlobalNavbar.tsx:276:29 - warning: Class 'btn btn-link p-0 m-0' is used on the 'WebCommandListPopoverButton' element. Please update it manually.
>>>    <WebCommandListPopoverButton
                                {...props}
                                location={location}
                                buttonClassName="btn btn-link p-0 m-0"
                                menu={ContributableMenu.CommandPalette}
                                keyboardShortcutForShow={KEYBOARD_SHORTCUT_SHOW_COMMAND_PALETTE}
                            />

./client/web/src/components/WebHoverOverlay/WebHoverOverlay.tsx:103:13 - warning: Class 'btn btn-sm btn-secondary border-0' is used on the 'HoverOverlay' element. Please update it manually.
>>>    
        <HoverOverlay
            {...propsToUse}
            className={classNames('card', styles.webHoverOverlay)}
            actionItemClassName="btn btn-sm btn-secondary border-0"
            onAlertDismissed={onAlertDismissed}
            getAlertClassName={getAlertClassName}
        />

./client/web/src/repo/docs/RepositoryDocumentationPage.tsx:197:29 - warning: Class 'mr-1 text-decoration-none btn-link' is used on the 'Button' element. Please update it manually.
>>>    <Button
                                target="_blank"
                                rel="noopener"
                                href="https://docs.sourcegraph.com/code_intelligence/apidocs"
                                className="mr-1 text-decoration-none btn-link"
                                variant="secondary"
                                outline={true}
                                size="sm"
                                as="a"
                            >

./client/web/src/search/notebook/SearchNotebookPageHeaderActions.tsx:91:21 - warning: Class 'btn-danger' is used on the 'DropdownItem' element. Please update it manually.
>>>    <DropdownItem className="btn-danger" onClick={() => setShowDeleteModal(true)}>

Part of https://github.com/sourcegraph/sourcegraph/issues/29318. Related to https://github.com/sourcegraph/codemod/issues/31.

Merge request reports