Update user settings hook to use bridge call to create ConfigMap

[jerolimov]

Fixes:
https://issues.redhat.com/browse/ODC-4755 https://issues.redhat.com/browse/ODC-5189

This PR is based on #7095 which must be merged first (the go part).

It keep this to make it also easier to test the frontend change. A review here should focus on the TS change.

Analysis / Root cause:
Based on the User Settings for OpenShift Console enhancement proposal we want to create a ConfigMap for each individual user in the namespace openshift-console-user-settings

Currently you need create this namespace yourself, see Test Setup below. This namespace will be automatically created by the console-operator, see PR openshift/console-operator#479

Solution Description:
Because the user could not create a ConfigMap here, we create a new ConfigMap, Role and RoleBinding with the service account role over the bridge. This code provides 3 new endpoints to create, get and delete the user settings. (The second and third API calls primary for debugging / development.) The console will fetch the ConfigMap over the known k8sWatch API.

Screen shots / Gifs for design review:
Irrelevant

Unit test coverage report:
Updated user-settings.spec.ts and useUserSettings.spec.ts:

 PASS  packages/console-shared/src/utils/__tests__/user-settings.spec.ts
  createConfigMap
    ✓ calls user settings api  (4ms)
  updateConfigMap
    ✓ calls user settings api  (1ms)
  deseralizeData
    ✓ does not convert null or undefined
    ✓ converts valid json to an object (1ms)
    ✓ return invalid json strings as string
  seralizeData
    ✓ does not convert strings
    ✓ converts objects

 PASS  packages/console-shared/src/hooks/__tests__/useUserSettings.spec.ts
  useUserSettings
    ✓ should create and update user settings if watcher could not find a ConfigMap (297ms)
    ✓ should return default value for an empty configmap after switching from loading to loaded (4ms)
    ✓ should return saved value for an known key after switching from loading to loaded (3ms)
    ✓ should return default value for an unknown key if data is already loaded (hook is used twice) (3ms)
    ✓ should return saved value for an known key if data is already loaded (hook is used twice) (2ms)
    ✓ should return latest user settings value after switching from loading to loaded (3ms)
    ✓ should return latest user settings value in loaded state (hook is used twice) (2ms)
    ✓ should trigger update user settings when setter was called (3ms)
    ✓ should fallback to localStorage if creation fails with 403 (must not call updateConfigMap) (4ms)

Test Suites: 2 passed, 2 total
Tests:       16 passed, 16 total

Test setup:
This PR require some additional RBAC rules.

1. If PR Add namespace and role resources for user settings console-operator#479 is not part of your cluster you need to create a namespace:

1a Create namespace:

apiVersion: v1
kind: Namespace
metadata:
  name: openshift-console-user-settings
  annotations:
    include.release.openshift.io/self-managed-high-availability: "true"
    openshift.io/node-selector: ""

Until https://github.com/openshift/console-operator/pull/486/files is merged and available on your cluster you need to add this as well:

1b Create Role:

kind: Role
apiVersion: rbac.authorization.k8s.io/v1
metadata:
  name: console-user-settings-admin-fixed
  namespace: openshift-console-user-settings
  annotations:
    include.release.openshift.io/self-managed-high-availability: "true"
rules:
- apiGroups:
  - rbac.authorization.k8s.io
  resources:
  - roles
  - rolebindings
  verbs:
  - get
  - list
  - watch
  - create
  - update
  - delete
  - patch
- apiGroups:
  - ""
  resources:
  - configmaps
  verbs:
  - get
  - list
  - watch
  - create
  - update
  - delete
  - patch

1c Create RoleBinding:

kind: RoleBinding
apiVersion: rbac.authorization.k8s.io/v1
metadata:
  name: console-user-settings-admin-fixed
  namespace: openshift-console-user-settings
  annotations:
    include.release.openshift.io/self-managed-high-availability: "true"
roleRef:
  kind: Role
  name: console-user-settings-admin-fixed
  apiGroup: rbac.authorization.k8s.io
subjects:
  - kind: ServiceAccount
    name: console
    namespace: openshift-console

2. You need the backend functions from Add API to create user settings #7095.

You can checkout 7095, build the backend with ./build-backend.sh and switch back to this PR.

3. You need a hook to test PR. I used this AddPage.tsx:

import * as React from 'react';
import { Helmet } from 'react-helmet';
import { useTranslation } from 'react-i18next';
import { match as RMatch } from 'react-router';
import { useUserSettings, useUserSettingsCompatibility } from '@console/shared';

import { Firehose } from '@console/internal/components/utils';
import ODCEmptyState from './EmptyState';
import NamespacedPage from './NamespacedPage';
import ProjectsExistWrapper from './ProjectsExistWrapper';
import CreateProjectListPage from './projects/CreateProjectListPage';

export interface AddPageProps {
  match: RMatch<{
    ns?: string;
  }>;
}

interface AddUserSettings {
  value: string;
}

const AddPage: React.FC<AddPageProps> = ({ match }) => {
  const { t } = useTranslation();
  const namespace = match.params.ns;

  const [userSettings, setUserSettings] = useUserSettings<AddUserSettings>('a_user_settings');
  const [userSettingsComp, setUserSettingsComp] = useUserSettingsCompatibility<string>(
    'a_user_settings_comp',
    'lskey',
  );

  return (
    <>
      <Helmet>
        <title>{`+${t('devconsole~Add')}`}</title>
      </Helmet>
      <NamespacedPage>
        <h1>
          user settings:
          <pre>{JSON.stringify(userSettings)}</pre>
          <button type="button" onClick={() => setUserSettings({ value: 'AAAAA' })}>
            AAAAA
          </button>
          <button type="button" onClick={() => setUserSettings({ value: 'BBBBB' })}>
            BBBBB
          </button>
        </h1>
        <h1>
          user settings compatibility:
          <pre>{JSON.stringify(userSettingsComp)}</pre>
          <button type="button" onClick={() => setUserSettingsComp('AAAAA')}>
            AAAAA
          </button>
          <button type="button" onClick={() => setUserSettingsComp('BBBBB')}>
            BBBBB
          </button>
        </h1>
        <Firehose resources={[{ kind: 'Project', prop: 'projects', isList: true }]}>
          <ProjectsExistWrapper title={t('devconsole~Add')}>
            {namespace ? (
              <ODCEmptyState title={t('devconsole~Add')} />
            ) : (
              <CreateProjectListPage title={t('devconsole~Add')}>
                {t('devconsole~Select a project to start adding to it')}
              </CreateProjectListPage>
            )}
          </ProjectsExistWrapper>
        </Firehose>
      </NamespacedPage>
    </>
  );
};

export default AddPage;

Browser conformance:

• Chrome
• Firefox
• Safari
• Edge

[jerolimov]

/unassign @rhamilto @jhadvig
/assign @christianvogt @invincibleJai
/hold
Because it depends on #7095

[jerolimov]

/retest

[jerolimov]

/retest

[invincibleJai]

will it make sense to put this in try catch and return response or throw err there

[jerolimov]

Unfortunately coFetchJSON doesn't return a response, it returns already the parsed content. I can switch to coFetch and handle status code checking and response.json() myself. I will try that.

[jerolimov]

Changed to coFetch, please take a look

[jerolimov]

I'm not happy with the unit tests yet. I currently rework them, I don't expect a change in the hook.

[christianvogt]

▶ oc whoami
kube:admin

▶ ./contrib/oc-get-user-settings.sh
Get ConfigMap "user-settings-<no value>" from namespace "openshift-console-user-settings" and save it to "user-settings.yaml"

Error from server (NotFound): configmaps "user-settings-<no value>" not found

[christianvogt]

Settings saved and loaded as expected for kubeadmin user in local dev.

[jerolimov]

@invincibleJai Can you please double check the unit tests, hope you are fine with them.

@christianvogt Fixed the get/set user settings script as well. Works now fine with other users. Also added the option to fetch other user settings from other usernames.

➜  contrib/oc-get-user-settings.sh 
Get ConfigMap "user-settings-kubeadmin" from namespace "openshift-console-user-settings" and save it to "user-settings.yaml"
  ...

➜  contrib/oc-get-user-settings.sh developer
Get ConfigMap "user-settings-12341234-1234-1234-1234-123412341234" from namespace "openshift-console-user-settings" and save it to "user-settings.yaml"
  ...

edit: Added also an example to git and a second option to define the filename. What do you think?

[jerolimov]

/retest

[jerolimov]

@invincibleJai Updated all tests, I'm happy now, wdyt? Did you see a missing case? Tests also require some minimal tweaks in the hook.

[jerolimov]

/hold cancel

[invincibleJai]

@invincibleJai Updated all tests, I'm happy now, wdyt? Did you see a missing case? Tests also require some minimal tweaks in the hook.

Thanks @jerolimov this looks good to me , looks like we covered all.

[invincibleJai]

/lgtm

Verified the changes, works as expected

[invincibleJai]

/test e2e-gcp-console

[christianvogt]

Do we need this sample?
What's the intended use?
Might be better to simply have a comment in the useUserSettings hook.

[jerolimov]

Removed the example

[jerolimov]

Just removed the example

[christianvogt]

/lgtm
/approve

[jerolimov]

/retest

[christianvogt]

/lgtm

[openshift-ci-robot]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: christianvogt, invincibleJai, jerolimov

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Needs approval from an approver in each of these files:

• frontend/OWNERS [christianvogt]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[jerolimov]

And another rebase was required after #7051 was merged. Will create a new PR for the scripts.