starter-kit/src/app.jsx
Martin Pitt 080b20af94
Ensure application CSS has priority over library CSS
Import our application CSS as the very last thing, so that it can
properly override  PatternFly variables. Before, our application CSS
could land in the first third of dist/index.css *before* PatternFly's
definitions, so that the latter overrode the former [1].

This is a long-standing bug in mini-css-extract-plugin ([2] and
countless things that point to it) with `NODE_ENV=production` builds.

As a workaround, make sure that app.scss is the absolutely last imported
CSS, instead of "almost last". It is still conceptually correct for the
application CSS to be able to override patternfly-4-overrides.scss.

Closes #362
[1] https://github.com/martinpitt/performance-graphs/issues/10
[2] https://github.com/webpack-contrib/mini-css-extract-plugin/issues/188
2020-09-08 18:53:12 +02:00

49 lines
1.5 KiB
JavaScript

/*
* This file is part of Cockpit.
*
* Copyright (C) 2017 Red Hat, Inc.
*
* Cockpit is free software; you can redistribute it and/or modify it
* under the terms of the GNU Lesser General Public License as published by
* the Free Software Foundation; either version 2.1 of the License, or
* (at your option) any later version.
*
* Cockpit is distributed in the hope that it will be useful, but
* WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
* Lesser General Public License for more details.
*
* You should have received a copy of the GNU Lesser General Public License
* along with Cockpit; If not, see <http://www.gnu.org/licenses/>.
*/
import cockpit from 'cockpit';
import React from 'react';
import { Alert, Card, CardTitle, CardBody } from '@patternfly/react-core';
const _ = cockpit.gettext;
export class Application extends React.Component {
constructor() {
super();
this.state = { hostname: _("Unknown") };
cockpit.file('/etc/hostname').watch(content => {
this.setState({ hostname: content.trim() });
});
}
render() {
return (
<Card>
<CardTitle>Starter Kit</CardTitle>
<CardBody>
<Alert
variant="info"
title={ cockpit.format(_("Running on $0"), this.state.hostname) }
/>
</CardBody>
</Card>
);
}
}