Skip to content

Commit fad5a41

Browse files
daveyhollerdaveyholler
authored
[Code] Removing styled components & SCSS cleanup (#35107)
* Removing the sidebar class from the project container and replacing styled component eui buttons with a className. * Renaming scss includes. * Moving admin.scss content into _buttons.scss. * Refactor project_item removing styled components * Refactor admin.tsx to remove styled components * Refactor import_project.tsx to remove styled components * Refactor lang server tab to remove styled components * Refactor project settings modal removing styled components * Refactoring setup_guide to remove styled components * Cleanup sidebar.scss: follow convention for classes * Refactor codeblock css naming conventions * Resolving an issue with the monaco scss file name * Editor file cleanup. Renaming css classes * Cleaning up the file_tree component. * Hover widget cleanup. * Blame cleanup. * Breadcrumb cleanup. * Cleaning up clone status — removing ProgressContainer export. Didn't seem to be used anywhere. You can use the codeContainer__progress class to apply those styles now. * Cleaning up commit history styles * Putting the indentation back in the file tree. * Refactoring the main content window. * Cleaning up the directory component. * Reducing spacing between directory and file lists. * Removing styled components from the error panel. * Reducing the font size of buttons in the source view button groups. * Removing styled components from main.tsx * CSS naming & removing styled components from not_found.tsx * CSS naming & removing styled components from not_found.tsx * Removing styled components from search_bar and top_bar. * Removing styled components from query_bar components. * Removing styled components from search_page components. * removing styled components from code_symbol_tree * Fixing a few css issues. * Updating test snapshots. * Removing a stray '>' symbol from the search tabs. * Condensing the spacing of the EUI facets on the search page. * class name of the flyout container. * Revert "class name of the flyout container." This reverts commit 35e9d5c16fd20db5ef15a686eda79bb0fd3f40a6. * class name tweaks. * Fixing type errors. * Putting back an accidental deletion in file_tree.tsx. * Updating file_tree snapshot. * Implementing changes from 604e4d1 to address failing tests. * Adding in additional classes deleted during merge * Updating test snapshots.
1 parent 3551d39 commit fad5a41

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

53 files changed

+768
-765
lines changed

‎x-pack/plugins/code/public/components/admin_page/admin.tsx‎

Lines changed: 5 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -8,29 +8,14 @@ import { parse as parseQuery } from 'querystring';
88
import React from 'react';
99
import { connect } from 'react-redux';
1010
import { RouteComponentProps, withRouter } from 'react-router-dom';
11-
import styled from 'styled-components';
1211
import url from 'url';
13-
14-
import { EuiTab, EuiTabs } from '@elastic/eui';
15-
import theme from '@elastic/eui/dist/eui_theme_light.json';
16-
12+
import { EuiFlexGroup, EuiFlexItem, EuiTab, EuiTabs } from '@elastic/eui';
1713
import { Repository } from '../../../model';
1814
import { RootState } from '../../reducers';
1915
import { EmptyProject } from './empty_project';
2016
import { LanguageSeverTab } from './language_server_tab';
2117
import { ProjectTab } from './project_tab';
2218

23-
const Container = styled.div`
24-
margin: 0 ${theme.euiSizeXL};
25-
flex-grow: 1;
26-
`;
27-
28-
const Root = styled.div`
29-
display: flex;
30-
flex-direction: row;
31-
flex-grow: 1;
32-
`;
33-
3419
enum AdminTabs {
3520
projects = 'Projects',
3621
roles = 'Roles',
@@ -129,12 +114,12 @@ class AdminPage extends React.PureComponent<Props, State> {
129114

130115
public render() {
131116
return (
132-
<Root>
133-
<Container>
117+
<EuiFlexGroup direction="row">
118+
<EuiFlexItem className="codeContainer__adminWrapper">
134119
{this.renderTabs()}
135120
{this.renderTabContent()}
136-
</Container>
137-
</Root>
121+
</EuiFlexItem>
122+
</EuiFlexGroup>
138123
);
139124
}
140125
}

‎x-pack/plugins/code/public/components/admin_page/empty_project.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,9 @@ import { ImportProject } from './import_project';
1515
export const EmptyProject = () => {
1616
const isAdmin = uiCapabilities.code.admin as boolean;
1717
return (
18-
<div className="code-projects-tab">
18+
<div className="codeTab__projects">
1919
<EuiSpacer size="xl" />
20-
<div className="code-projects-tab__empty_header">
20+
<div className="codeTab__projects--emptyHeader">
2121
<EuiText>
2222
<h1>You don't have any projects yet</h1>
2323
</EuiText>

‎x-pack/plugins/code/public/components/admin_page/import_project.tsx‎

Lines changed: 6 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -15,21 +15,11 @@ import {
1515
} from '@elastic/eui';
1616
import React, { ChangeEvent } from 'react';
1717
import { connect } from 'react-redux';
18-
import styled from 'styled-components';
1918
import { closeToast, importRepo } from '../../actions';
2019
import { RootState } from '../../reducers';
2120
import { ToastType } from '../../reducers/repository';
2221
import { isImportRepositoryURLInvalid } from '../../utils/url';
2322

24-
const ImportButton = styled(EuiButton)`
25-
margin-top: 1.5rem;
26-
`;
27-
28-
const ImportWrapper = styled.div`
29-
max-width: 800px;
30-
margin: auto;
31-
`;
32-
3323
class CodeImportProject extends React.PureComponent<
3424
{
3525
importRepo: (p: string) => void;
@@ -69,7 +59,7 @@ class CodeImportProject extends React.PureComponent<
6959
const { importLoading, toastMessage, showToast, toastType } = this.props;
7060

7161
return (
72-
<ImportWrapper>
62+
<div className="codeContainer__import">
7363
{showToast && (
7464
<EuiGlobalToastList
7565
toasts={[{ title: '', color: toastType, text: toastMessage, id: toastMessage || '' }]}
@@ -101,16 +91,17 @@ class CodeImportProject extends React.PureComponent<
10191
</EuiFlexItem>
10292
<EuiFlexItem grow={false}>
10393
{/*
104-
// @ts-ignore */}
105-
<ImportButton
94+
// @ts-ignore */}
95+
<EuiButton
96+
className="codeButton__projectImport"
10697
onClick={this.submitImportProject}
10798
data-test-subj="importRepositoryButton"
10899
>
109100
Import
110-
</ImportButton>
101+
</EuiButton>
111102
</EuiFlexItem>
112103
</EuiFlexGroup>
113-
</ImportWrapper>
104+
</div>
114105
);
115106
}
116107
}

‎x-pack/plugins/code/public/components/admin_page/language_server_tab.tsx‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -19,21 +19,15 @@ import {
1919
EuiSpacer,
2020
EuiTabbedContent,
2121
EuiText,
22-
EuiTextColor,
2322
} from '@elastic/eui';
2423
import React from 'react';
2524
import { connect } from 'react-redux';
26-
import styled from 'styled-components';
2725
import { InstallationType } from '../../../common/installation';
2826
import { LanguageServer, LanguageServerStatus } from '../../../common/language_server';
2927
import { requestInstallLanguageServer } from '../../actions/language_server';
3028
import { RootState } from '../../reducers';
3129
import { JavaIcon, TypeScriptIcon, GoIcon } from '../shared/icons';
3230

33-
const LanguageServerState = styled(EuiTextColor)`
34-
color: ${props => props.color};
35-
`;
36-
3731
const LanguageServerLi = (props: {
3832
languageServer: LanguageServer;
3933
requestInstallLanguageServer: (l: string) => void;
@@ -55,11 +49,19 @@ const LanguageServerLi = (props: {
5549
let button = null;
5650
let state = null;
5751
if (status === LanguageServerStatus.RUNNING) {
58-
state = <LanguageServerState>Running ...</LanguageServerState>;
52+
state = <EuiText size="xs">Running ...</EuiText>;
5953
} else if (status === LanguageServerStatus.NOT_INSTALLED) {
60-
state = <LanguageServerState color={'subdued'}>Not Installed</LanguageServerState>;
54+
state = (
55+
<EuiText size="xs" color={'subdued'}>
56+
Not Installed
57+
</EuiText>
58+
);
6159
} else if (status === LanguageServerStatus.READY) {
62-
state = <LanguageServerState color={'subdued'}>Installed</LanguageServerState>;
60+
state = (
61+
<EuiText size="xs" color={'subdued'}>
62+
Installed
63+
</EuiText>
64+
);
6365
}
6466
if (props.languageServer.installationType === InstallationType.Plugin) {
6567
button = (

‎x-pack/plugins/code/public/components/admin_page/project_item.tsx‎

Lines changed: 22 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -18,25 +18,10 @@ import moment from 'moment';
1818
import React from 'react';
1919
import { connect } from 'react-redux';
2020
import { Link } from 'react-router-dom';
21-
import styled from 'styled-components';
2221
import { Repository, WorkerReservedProgress } from '../../../model';
2322
import { deleteRepo, indexRepo, initRepoCommand } from '../../actions';
2423
import { RepoState, RepoStatus } from '../../reducers/status';
2524

26-
const errorColor = `#BD271E`;
27-
const Footer = styled.div``;
28-
const ErrorFooter = styled(Footer)`
29-
color: ${errorColor};
30-
`;
31-
32-
const ProjectItemPanel = styled(EuiPanel)`
33-
position: relative;
34-
margin-bottom: 8px;
35-
`;
36-
const ErrorProjectItemPanel = styled(ProjectItemPanel)`
37-
border: 2px solid ${errorColor};
38-
`;
39-
4025
const stateColor = {
4126
[RepoState.CLONING]: 'secondary',
4227
[RepoState.DELETING]: 'accent',
@@ -63,33 +48,37 @@ class CodeProjectItem extends React.PureComponent<{
6348
let disableRepoLink = false;
6449
let hasError = false;
6550
if (!status) {
66-
footer = <Footer>INIT...</Footer>;
51+
footer = <div className="codeFooter">INIT...</div>;
6752
} else if (status.state === RepoState.READY) {
6853
footer = (
69-
<Footer data-test-subj="repositoryIndexDone">
54+
<div className="codeFooter" data-test-subj="repositoryIndexDone">
7055
LAST UPDATED: {moment(status.timestamp).fromNow()}
71-
</Footer>
56+
</div>
7257
);
7358
} else if (status.state === RepoState.DELETING) {
74-
footer = <Footer>DELETING...</Footer>;
59+
footer = <div className="codeFooter">DELETING...</div>;
7560
} else if (status.state === RepoState.INDEXING) {
76-
footer = <Footer data-test-subj="repositoryIndexOngoing">INDEXING...</Footer>;
61+
footer = (
62+
<div className="codeFooter" data-test-subj="repositoryIndexOngoing">
63+
INDEXING...
64+
</div>
65+
);
7766
} else if (status.state === RepoState.CLONING) {
78-
footer = <Footer>CLONING...</Footer>;
67+
footer = <div className="codeFooter">CLONING...</div>;
7968
} else if (status.state === RepoState.DELETE_ERROR) {
80-
footer = <ErrorFooter>ERROR DELETE REPO</ErrorFooter>;
69+
footer = <div className="codeFooter codeFooter--error">ERROR DELETE REPO</div>;
8170
hasError = true;
8271
} else if (status.state === RepoState.INDEX_ERROR) {
83-
footer = <ErrorFooter>ERROR INDEX REPO</ErrorFooter>;
72+
footer = <div className="codeFooter codeFooter--error">ERROR INDEX REPO</div>;
8473
hasError = true;
8574
} else if (status.state === RepoState.CLONE_ERROR) {
8675
footer = (
87-
<ErrorFooter>
88-
ERROR CLONE REPO&nbsp;
76+
<div className="codeFooter codeFooter--error">
77+
ERROR CLONING REPO&nbsp;
8978
<EuiToolTip position="top" content={status.errorMessage}>
9079
<EuiIcon type="iInCircle" />
9180
</EuiToolTip>
92-
</ErrorFooter>
81+
</div>
9382
);
9483
// Disable repo link is clone failed.
9584
disableRepoLink = true;
@@ -102,8 +91,6 @@ class CodeProjectItem extends React.PureComponent<{
10291
</EuiText>
10392
);
10493

105-
const Panel = hasError ? ErrorProjectItemPanel : ProjectItemPanel;
106-
10794
const settingsShow =
10895
status && status.state !== RepoState.CLONING && status.state !== RepoState.DELETING;
10996
const settingsVisibility = settingsShow ? 'visible' : 'hidden';
@@ -124,7 +111,7 @@ class CodeProjectItem extends React.PureComponent<{
124111
<EuiFlexGroup gutterSize="none">
125112
<EuiFlexItem grow={false} style={{ display: 'none' }}>
126113
<div
127-
className="code-project-button"
114+
className="codeButton__project"
128115
data-test-subj="settingsRepositoryButton"
129116
tabIndex={0}
130117
onKeyDown={onClickSettings}
@@ -140,7 +127,7 @@ class CodeProjectItem extends React.PureComponent<{
140127
</EuiFlexItem>
141128
<EuiFlexItem grow={false}>
142129
<div
143-
className="code-project-button"
130+
className="codeButton__project"
144131
data-test-subj="indexRepositoryButton"
145132
tabIndex={0}
146133
onKeyDown={onClickIndex}
@@ -156,7 +143,7 @@ class CodeProjectItem extends React.PureComponent<{
156143
</EuiFlexItem>
157144
<EuiFlexItem grow={false}>
158145
<div
159-
className="code-project-button"
146+
className="codeButton__project"
160147
data-test-subj="deleteRepositoryButton"
161148
tabIndex={0}
162149
onKeyDown={onClickDelete}
@@ -183,7 +170,9 @@ class CodeProjectItem extends React.PureComponent<{
183170
);
184171

185172
return (
186-
<Panel>
173+
<EuiPanel
174+
className={hasError ? 'codePanel__project codePanel__project--error' : 'codePanel__project'}
175+
>
187176
{this.renderProgress()}
188177
<EuiFlexGroup alignItems="center" justifyContent="flexStart">
189178
<EuiFlexItem grow={3}>
@@ -205,7 +194,7 @@ class CodeProjectItem extends React.PureComponent<{
205194
</EuiFlexItem>
206195
{enableManagement && projectManagement}
207196
</EuiFlexGroup>
208-
</Panel>
197+
</EuiPanel>
209198
);
210199
}
211200

‎x-pack/plugins/code/public/components/admin_page/project_settings.tsx‎

Lines changed: 4 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -17,24 +17,16 @@ import {
1717
EuiText,
1818
EuiTitle,
1919
} from '@elastic/eui';
20-
import theme from '@elastic/eui/dist/eui_theme_light.json';
2120
import React, { ChangeEvent } from 'react';
2221
import { connect } from 'react-redux';
2322
import { Link } from 'react-router-dom';
24-
import styled from 'styled-components';
2523
import { LanguageServer } from '../../../common/language_server';
2624
import { RepositoryUtils } from '../../../common/repository_utils';
2725
import { RepositoryConfig } from '../../../model';
2826
import { RepoConfigPayload, switchLanguageServer } from '../../actions';
2927
import { RootState } from '../../reducers';
3028
import { JavaIcon, TypeScriptIcon } from '../shared/icons';
3129

32-
const IconContainer = styled.div`
33-
display: inline-block;
34-
position: relative;
35-
top: ${theme.euiSizeS};
36-
`;
37-
3830
const defaultConfig = {
3931
disableGo: true,
4032
disableJava: true,
@@ -96,13 +88,13 @@ class ProjectSettingsModal extends React.PureComponent<
9688
label={
9789
<span>
9890
{ls.name === 'Java' ? (
99-
<IconContainer>
91+
<div className="codeSettingsPanel__icon">
10092
<JavaIcon />
101-
</IconContainer>
93+
</div>
10294
) : (
103-
<IconContainer>
95+
<div className="codeSettingsPanel__icon">
10496
<TypeScriptIcon />
105-
</IconContainer>
97+
</div>
10698
)}
10799
{ls.name}
108100
</span>

‎x-pack/plugins/code/public/components/admin_page/project_tab.tsx‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -28,9 +28,7 @@ import {
2828
import moment from 'moment';
2929
import React, { ChangeEvent } from 'react';
3030
import { connect } from 'react-redux';
31-
import styled from 'styled-components';
3231
import { uiCapabilities } from 'ui/capabilities';
33-
3432
import { Repository } from '../../../model';
3533
import { closeToast, importRepo } from '../../actions';
3634
import { RepoStatus, RootState } from '../../reducers';
@@ -39,10 +37,6 @@ import { isImportRepositoryURLInvalid } from '../../utils/url';
3937
import { ProjectItem } from './project_item';
4038
import { ProjectSettings } from './project_settings';
4139

42-
const NewProjectButton = styled(EuiButton)`
43-
margin-top: 1.5rem;
44-
`;
45-
4640
enum SortOptionsValue {
4741
AlphabeticalAsc = 'alphabetical_asc',
4842
AlphabeticalDesc = 'alphabetical_desc',
@@ -246,9 +240,13 @@ class CodeProjectTab extends React.PureComponent<Props, State> {
246240
<EuiFlexItem>
247241
{(uiCapabilities.code.admin as boolean) && (
248242
// @ts-ignore
249-
<NewProjectButton onClick={this.openModal} data-test-subj="newProjectButton">
243+
<EuiButton
244+
className="codeButton__projectImport"
245+
onClick={this.openModal}
246+
data-test-subj="newProjectButton"
247+
>
250248
Add New Project
251-
</NewProjectButton>
249+
</EuiButton>
252250
)}
253251
</EuiFlexItem>
254252
</EuiFlexGroup>

0 commit comments

Comments
 (0)