Skip to content

ISSUE-648: Change status classes to functional components #722

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ada333 wants to merge 2 commits into
base: main
Choose a base branch
from
Open

ISSUE-648: Change status classes to functional components #722

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
055f7f1
Refactor cell-metadata and status icons into functional components
ada333 Apr 2, 2026
3420a3a
Delete commented out imports
ada333 Apr 2, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 23 additions & 24 deletions labextension/src/icons/statusRunning.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,36 +13,35 @@
// limitations under the License.

import * as React from 'react';
// import { CSSProperties } from 'jss/css';

export default class StatusRunning extends React.Component<{ style: any }> {
public render(): JSX.Element {
const { style } = this.props;
return (
<svg
width={style.width as string}
height={style.height as string}
viewBox="0 0 18 18"
export default function StatusRunning({
style,
}: {
style: React.CSSProperties;
}): React.ReactNode {
return (
<svg
width={style.width as string}
height={style.height as string}
viewBox="0 0 18 18"
>
<g
transform="translate(-450, -307)"
fill={style.color as string}
fillRule="nonzero"
>
<g
transform="translate(-450, -307)"
fill={style.color as string}
fillRule="nonzero"
>
<g transform="translate(450, 266)">
<g transform="translate(0, 41)">
<path
d="M9,4 C6.23857143,4 4,6.23857143 4,9 C4,11.7614286 6.23857143,14 9,14
<g transform="translate(450, 266)">
<g transform="translate(0, 41)">
<path
d="M9,4 C6.23857143,4 4,6.23857143 4,9 C4,11.7614286 6.23857143,14 9,14
C11.7614286,14 14,11.7614286 14,9 C14,8.40214643 13.8950716,7.8288007
13.702626,7.29737398 L15.2180703,5.78192967 C15.7177126,6.74539838
16,7.83973264 16,9 C16,12.866 12.866,16 9,16 C5.134,16 2,12.866 2,9 C2,5.134
5.134,2 9,2 C10.933,2 12.683,2.7835 13.94975,4.05025 L12.7677679,5.23223214
L9,9 L9,4 Z"
/>
</g>
/>
</g>
</g>
</svg>
);
}
</g>
</svg>
);
}
54 changes: 27 additions & 27 deletions labextension/src/icons/statusTerminated.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,34 +13,34 @@
// limitations under the License.

import * as React from 'react';
// import { CSSProperties } from 'jss/css';
export default class StatusTerminated extends React.Component<{ style: any }> {
public render(): JSX.Element {
const { style } = this.props;
return (
<svg
width={style.width as string}
height={style.height as string}
viewBox="0 0 18 18"
>
<g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
<g>
<polygon points="0 0 18 0 18 18 0 18" />
<path
d="M8.9925,1.5 C4.8525,1.5 1.5,4.86 1.5,9 C1.5,13.14 4.8525,16.5 8.9925,16.5
export default function StatusTerminated({
style,
}: {
style: React.CSSProperties;
}): React.ReactNode {
return (
<svg
width={style.width as string}
height={style.height as string}
viewBox="0 0 18 18"
>
<g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
<g>
<polygon points="0 0 18 0 18 18 0 18" />
<path
d="M8.9925,1.5 C4.8525,1.5 1.5,4.86 1.5,9 C1.5,13.14 4.8525,16.5 8.9925,16.5
C13.14,16.5 16.5,13.14 16.5,9 C16.5,4.86 13.14,1.5 8.9925,1.5 Z M9,15 C5.685,15
3,12.315 3,9 C3,5.685 5.685,3 9,3 C12.315,3 15,5.685 15,9 C15,12.315 12.315,15 9,15 Z"
fill={style.color as string}
fillRule="nonzero"
/>
<polygon
fill={style.color as string}
fillRule="nonzero"
points="6 6 12 6 12 12 6 12"
/>
</g>
fill={style.color as string}
fillRule="nonzero"
/>
<polygon
fill={style.color as string}
fillRule="nonzero"
points="6 6 12 6 12 12 6 12"
/>
</g>
</svg>
);
}
</g>
</svg>
);
}
2 changes: 1 addition & 1 deletion labextension/src/widgets/LeftPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
import * as React from 'react';
import { INotebookTracker, NotebookPanel } from '@jupyterlab/notebook';
import NotebookUtils from '../lib/NotebookUtils';
import { InlineCellsMetadata } from './cell-metadata/InlineCellMetadata';
import { InlineCellsMetadata } from './cell-metadata/InlineCellsMetadata';
import { SplitDeployButton } from '../components/DeployButton';
import { Kernel } from '@jupyterlab/services';
import { ExperimentInput } from '../components/ExperimentInput';
Expand Down
Loading
Loading