(OUI Next Theme) Log in about security-dashboards-plugin HOT 16 OPEN

For reference, the discussion above that I posed about defaults in 2.10 is irrelevant of the choices we make around defaults at time shipping - because once an admin changes their own defaults to v7 dark or next dark , these issues will still be present.

from security-dashboards-plugin.

To Kroosh's point, theme:version and theme:darkMode are configurable parameters in the opensearch_dashboards.yml file, and whether we decide to change the defaults or not, don't impact the need to make the pages function correctly for those configurations.

from security-dashboards-plugin.

@wbeckler @mnkugler top discussion question for you - my recommendation would be to use the current default since we will not be defaulting to next dark mode in 2.10 any longer.

from security-dashboards-plugin.

Let's use light mode for login, but why not "Next"?

from security-dashboards-plugin.

Is login part of security dashboard plugin?

from security-dashboards-plugin.

@wbeckler "why not next" - until we cut over, it would be potentially very strange to see the new "primary" color and then land in an experience with a different "primary" color

re: security plugin - I am not sure @kgcreative do you know?

from security-dashboards-plugin.

Login is provided by the security dashboards plugin, yes. IIRC it's a standalone page since the application hasn't loaded at that point

from security-dashboards-plugin.

[Triage] Hi @KrooshalUX, can you please provide more information about what actionable items you would like addressed? This is especially important if we want this for 2.10, but it is not clear what is expected on the Security repository's behalf. Thank you.

from security-dashboards-plugin.

There are two main tasks:

1. make sure the login pages uses uiSettings.getOverrideOrDefault('theme:version')) and uiSettings.getOverrideOrDefault('theme:darkMode')) if it is dependent on the theme in any way.
2. make sure the imagery and any styling on the login page work in dark mode:
   • if using any SVGs, make sure they are color-scheme-aware like this.
   • if you have any styling, make sure they use $eui... colors or target dark-mode as well using @media (prefers-color-scheme: dark)

from security-dashboards-plugin.

@kamingleung can you confirm if this has been decided and we're good to go ahead?

from security-dashboards-plugin.

Hi @AMoo-Miki, I was looking at setting up the changes you mentioned.

I went over to the login-page.tsx and tried to add:

  const {
    services: { http, data, uiSettings, application },
  } = useOpenSearchDashboards<CoreStart & AppPluginStartDependencies>();

  const IS_DARK_THEME = uiSettings.get('theme:darkMode');

here: https://github.com/opensearch-project/security-dashboards-plugin/blob/91faa3ddd289bf60336e628eac4ae7c49cf39249/public/apps/login/login-page.tsx#L71C1-L71C1.

Based off of the pattern shown here: https://github.com/opensearch-project/OpenSearch-Dashboards/blob/a52e95cbcc5075a4716274749d71d7d635704c4f/src/plugins/opensearch_dashboards_overview/public/components/overview/overview.tsx#L76-L81.

I was then going to add this: className={login-wrapper ${IS_DARK_THEME ? 'dark-theme' : 'light-theme'}} to the EUIListGroup thinking it would then change the color as required.

It seems like this is not the right method of handling this however...

Do you have any suggestions for what I can try? I also added the opensearchDashboardsReact dependency, so I am not sure what I am missing here for the uiSettings to be accessable in the Security Dashboards. Sorry if this is obvious, but I am less familiar with the front end code.

from security-dashboards-plugin.

Hi @KrooshalUX, @AMoo-Miki, @kgcreative

For the login-page I have:

...

interface LoginPageDeps {
  http: CoreStart['http'];
  uiSettings: CoreStart['uiSettings'];
  config: ClientConfigType;
}

interface LoginButtonConfig {
  buttonname: string;
  showbrandimage: boolean;
  brandimage: string;
  buttonstyle: string;
}

function redirect(serverBasePath: string) {
  // navigate to nextUrl
  const urlParams = new URLSearchParams(window.location.search);
  let nextUrl = urlParams.get('nextUrl');
  if (!nextUrl || nextUrl.toLowerCase().includes('//')) {
    // Appending the next url with trailing slash. We do so because in case the serverBasePath is empty, we can simply
    // redirect to '/'.
    nextUrl = serverBasePath + '/';
  }
  window.location.href = nextUrl + window.location.hash;
}

export function LoginPage(props: LoginPageDeps) {
  const [username, setUsername] = React.useState('');
  const [password, setPassword] = React.useState('');
  const [loginFailed, setloginFailed] = useState(false);
  const [loginError, setloginError] = useState('');
  const [usernameValidationFailed, setUsernameValidationFailed] = useState(false);
  const [passwordValidationFailed, setPasswordValidationFailed] = useState(false);
  const IS_DARK_THEME = props.uiSettings.get('theme:darkMode');
  const defaultBrandImage = IS_DARK_THEME ? defaultDarkBrandImage : defaultLightBrandImage

...

This allows us to access the uiSettings from core start by modifying

export function renderApp(
  coreStart: CoreStart,
  params: AppMountParameters,
  config: ClientConfigType
) {
  ReactDOM.render(<LoginPage http={coreStart.http} uiSettings={coreStart.uiSettings} config={config} />, params.element);
  return () => ReactDOM.unmountComponentAtNode(params.element);
}

I am running into an issue with the use of this setting however. From what I have seen, when this configuration is used, we need elements to swap between:

From Overview.tsx

  const getSolutionGraphicURL = (solutionId: string) =>
    `/plugins/${PLUGIN_ID}/assets/solutions_${solutionId}_${
      IS_DARK_THEME ? 'dark' : 'light'
    }_2x.png`;

I am not sure where to get these elements from.

from security-dashboards-plugin.

Messaged Miki since it is not clear to me how to resolve the elements--I assume there are separate assets to be rendered but I do not know where to find these.

from security-dashboards-plugin.

Miki's change here: opensearch-project/oui#871 fixes the second problem

from security-dashboards-plugin.

For the last item, I have refactored OSD's serving of logos in opensearch-project/OpenSearch-Dashboards#4702 and have the changes ready to PR to this repo as soon as that is merged.

from security-dashboards-plugin.