trustchain-oc1-orchestral/authentik
Archived
10
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity
This repository has been archived on 2024-05-31. You can view files and clone it, but cannot push or open issues or pull requests.
authentik/Makefile
Ken Sternberg 12c4ac704f
web: basic cleanup of buttons (#6107) 
* web: basic cleanup of buttons

This commit adds Storybook features to the Authentik four-stage button.
The four-stage button is used to:

- trigger an action
- show that the action is running
- show when the action has succeeded, then reset
- show when the action has failed, then reset

It is used mostly for fetching data from the server.  The variants are:

- ak-spinner-button: The basic form takes a single property argument, `callAction` a function that
  returns a Promise (an asynchronous function).
- ak-action-button: Takes an API request function (which are all asynchronous) and adapts it to the
  `callAction`. The only difference in behavior with the Spinner button is that on failure the error
  message will be displayed by a notification.
- ak-token-copy-button: A specialized button that, on success, pushes the content of the retrieved
  object into the clipboard.

Cleanup consisted of:

- removing a lot of the in-line code from the HTML, decluttering it and making more explicit what
  the behaviors of each button type are on success and on failure.
- Replacing the ad-hoc Promise management with Lit's own `Task` handler. The `Task` handler knows
  how to notify a Lit-Element of its own internal state change, making it ideal for objects like
  this button that need to change their appearance as a Promise'd task progresses from idle →
  running → (success or failure).
- Providing JSDoc strings for all of the properties, slots, attributes, elements, and events.
- Adding 'pointer-events: none' during the running phases of the action, to prevent the user from
  clicking the button multiple times and launching multiple queries.
- Emitting an event for every stage of the operation:
  - `ak-button-click` when the button is clicked.
  - `ak-button-success` when the action completes. The payload is included in `Event.detail.result`
  - `ak-button-failure` when the action fails. The error message is included in `Event.detail.error`
  - `ak-button-reset` when the button completes a notification and goes back to idle

**Storybook**

Since the API requests for both `ak-spinner-button` and `ak-action-button` require only that a
promise be returned, Storybooking them was straightforward. `ak-token-copy-button` is a
special-purpose derivative with an internal functionality that can't be easily mocked (yet), so
there's no Storybook for it.

All of the stories provide the required asynchronous function, in this cose one that waits three
seconds before emitting either a `response` or `reject` Promise.

`ak-action-button`'s Story has event handler code so that pressing on the button will result in a
message being written to a display block under the button.

I've added a new pair of class mixins, `CustomEmitterElement` and `CustomListenerElement`. These
each add an additional method to the classes they're mixed into; one provides a very easy way to
emit a custom event and one provides a way to receive the custom event while sweeping all of the
custom event type handling under the rug.

`emitCustomEvent` replaces this:

``` JavaScript
this.dispatchEvent(
  new CustomEvent('ak-button-click', {
    composed: true,
    bubbles: true,
    detail: {
      target: this,
      result: "Some result, huh?"
    },
  })
);
```

... with this:

``` JavaScript
this.dispatchCustomEvent('ak-button-click', { result: "Some result, huh?" });
```

The `CustomListenerElement` handler just ensures that the handler being passed to it takes a
CustomEvent, and then makes sure that any actual event passed to the handler has been type-guarded
to ensure it is a custom event.

**Observations**

*Composition vs Inheritance, Part 1*

The four-state button has three implementations.  All three inherit from `BaseTaskButton`:

- `spinner`
  - provides a default `callAction()`
- `action`
  - provides a different name for `callAction`
  - overrides `onError` to display a Notification.
- `token-copy`
  - provides a custom `callAction`
  - overrides `onSuccess` to copy the results to the keyboard
  - overrides `onError` to display a Notification, with special handling for asynchronous
    processing.

The *results* of all of these could be handled higher up as event handlers, and the button could be
just a thing that displays the states.  As it is, the BaseStateToken has only one reason to change
(the Promise changes its state), so I'm satisfied that this is a suitable evolution of the product,
and that it does what it says it does.

*Developer Ergonomics*

The one thing that stands out to me time and again is just how *confusing* all of the Patternfly
stuff tends to be; not because it's not logical, but because it overwhelms the human 7±2 ability to
remember details like this without any imperative to memorize all of them. I would like to get them
under control by marshalling them under a semantic CSS regime, but I'm blocked by some basic
disconnects in the current development environment.  We can't shake out the CSS as much as we'd like
because there's no ESPrima equivalent for Typescript, and the smallest bundle purgeCSS is capable of
making for just *one* button is about 55KB.  That's a bit too much.  It's a great system for getting
off the ground, but long-term it needs more love than we (can) give it.

* Prettier has opinions.

* Removed extraneous debugging code.

* Added comments to the BaseTaskButton parent class.

* web: fixed two build errors (typing) in the stories.

* web: prettier's got opinions

* web: refactor the buttons

This commit adds URL mocking to Storybook, which in turn allows us to
commit a Story for ak-token-copy-button.

I have confirmed that the button's algorithm for writing to the
clipboard works on Safari, Chrome, and Firefox.  I don't know
what's up with IE.

* ONE BYTE in .storybook/main blocked integration.

With the repair of lit-analyze, it's time to fix the rule set
to at least let us pass for the moment.

* Still looking for the list of exceptions in lit-analyze that will let us pass once more.

* web: repair error in EnterpriseLicenseForm

This commit continues to find the right configuration for
lit-analyze.  During the course of this repair, I discovered
a bug in the EnterpriseLicenseForm; the original usage could
result in the _string_ `undefined` being passed back as a
value.  To handle the case where the value truly is undefined,
the `ifDefined()` directive must be used in the HTML template.

I have also instituted a case-by-case stylistic decision to allow
the HTML, and only the HTML, to be longer that 100 characters
when doing so reduces the visual "noise" of a function.
2023-07-18 08:29:42 -07:00

215 lines
5.2 KiB
Makefile
Raw Blame History

.SHELLFLAGS += -x -e
PWD = $(shell pwd)
UID = $(shell id -u)
GID = $(shell id -g)
NPM_VERSION = $(shell python -m scripts.npm_version)
PY_SOURCES = authentik tests scripts lifecycle
CODESPELL_ARGS = -D - -D .github/codespell-dictionary.txt \
-I .github/codespell-words.txt \
-S 'web/src/locales/**' \
authentik \
internal \
cmd \
web/src \
website/src \
website/blog \
website/developer-docs \
website/docs \
website/integrations \
website/src
all: lint-fix lint test gen web
test-go:
go test -timeout 0 -v -race -cover ./...
test-docker:
echo "PG_PASS=$(openssl rand -base64 32)" >> .env
echo "AUTHENTIK_SECRET_KEY=$(openssl rand -base64 32)" >> .env
docker-compose pull -q
docker-compose up --no-start
docker-compose start postgresql redis
docker-compose run -u root server test
rm -f .env
test:
coverage run manage.py test --keepdb authentik
coverage html
coverage report
lint-fix:
isort authentik $(PY_SOURCES)
black authentik $(PY_SOURCES)
ruff authentik $(PY_SOURCES)
codespell -w $(CODESPELL_ARGS)
lint:
pylint $(PY_SOURCES)
bandit -r $(PY_SOURCES) -x node_modules
golangci-lint run -v
migrate:
python -m lifecycle.migrate
i18n-extract: i18n-extract-core web-i18n-extract
i18n-extract-core:
ak makemessages --ignore web --ignore internal --ignore web --ignore web-api --ignore website -l en
#########################
## API Schema
#########################
gen-build:
AUTHENTIK_DEBUG=true ak make_blueprint_schema > blueprints/schema.json
AUTHENTIK_DEBUG=true ak spectacular --file schema.yml
gen-changelog:
git log --pretty=format:" - %s" $(shell git describe --tags $(shell git rev-list --tags --max-count=1))...$(shell git branch --show-current) | sort > changelog.md
npx prettier --write changelog.md
gen-diff:
git show $(shell git describe --tags $(shell git rev-list --tags --max-count=1)):schema.yml > old_schema.yml
docker run \
--rm -v ${PWD}:/local \
--user ${UID}:${GID} \
docker.io/openapitools/openapi-diff:2.1.0-beta.6 \
--markdown /local/diff.md \
/local/old_schema.yml /local/schema.yml
rm old_schema.yml
npx prettier --write diff.md
gen-clean:
rm -rf web/api/src/
rm -rf api/
gen-client-ts:
docker run \
--rm -v ${PWD}:/local \
--user ${UID}:${GID} \
docker.io/openapitools/openapi-generator-cli:v6.5.0 generate \
-i /local/schema.yml \
-g typescript-fetch \
-o /local/gen-ts-api \
-c /local/scripts/api-ts-config.yaml \
--additional-properties=npmVersion=${NPM_VERSION} \
--git-repo-id authentik \
--git-user-id goauthentik
mkdir -p web/node_modules/@goauthentik/api
cd gen-ts-api && npm i
\cp -rfv gen-ts-api/* web/node_modules/@goauthentik/api
gen-client-go:
mkdir -p ./gen-go-api ./gen-go-api/templates
wget https://raw.githubusercontent.com/goauthentik/client-go/main/config.yaml -O ./gen-go-api/config.yaml
wget https://raw.githubusercontent.com/goauthentik/client-go/main/templates/README.mustache -O ./gen-go-api/templates/README.mustache
wget https://raw.githubusercontent.com/goauthentik/client-go/main/templates/go.mod.mustache -O ./gen-go-api/templates/go.mod.mustache
cp schema.yml ./gen-go-api/
docker run \
--rm -v ${PWD}/gen-go-api:/local \
--user ${UID}:${GID} \
docker.io/openapitools/openapi-generator-cli:v6.5.0 generate \
-i /local/schema.yml \
-g go \
-o /local/ \
-c /local/config.yaml
go mod edit -replace goauthentik.io/api/v3=./gen-go-api
rm -rf ./gen-go-api/config.yaml ./gen-go-api/templates/
gen-dev-config:
python -m scripts.generate_config
gen: gen-build gen-clean gen-client-ts
#########################
## Web
#########################
web-build: web-install
cd web && npm run build
web: web-lint-fix web-lint web-check-compile
web-install:
cd web && npm ci
web-watch:
rm -rf web/dist/
mkdir web/dist/
touch web/dist/.gitkeep
cd web && npm run watch
web-lint-fix:
cd web && npm run prettier
web-lint:
cd web && npm run lint
# TODO: The analyzer hasn't run correctly in awhile.
# cd web && npm run lit-analyse
web-check-compile:
cd web && npm run tsc
web-i18n-extract:
cd web && npm run extract-locales
#########################
## Website
#########################
website: website-lint-fix website-build
website-install:
cd website && npm ci
website-lint-fix:
cd website && npm run prettier
website-build:
cd website && npm run build
website-watch:
cd website && npm run watch
# These targets are use by GitHub actions to allow usage of matrix
# which makes the YAML File a lot smaller
ci--meta-debug:
python -V
node --version
ci-pylint: ci--meta-debug
pylint $(PY_SOURCES)
ci-black: ci--meta-debug
black --check $(PY_SOURCES)
ci-ruff: ci--meta-debug
ruff check $(PY_SOURCES)
ci-codespell: ci--meta-debug
codespell $(CODESPELL_ARGS) -s
ci-isort: ci--meta-debug
isort --check $(PY_SOURCES)
ci-bandit: ci--meta-debug
bandit -r $(PY_SOURCES)
ci-pyright: ci--meta-debug
./web/node_modules/.bin/pyright $(PY_SOURCES)
ci-pending-migrations: ci--meta-debug
ak makemigrations --check
install: web-install website-install
poetry install
dev-reset:
dropdb -U postgres -h localhost authentik
# Also remove the test-db if it exists
dropdb -U postgres -h localhost test_authentik || true
createdb -U postgres -h localhost authentik
redis-cli -n 0 flushall
make migrate
Reference in a new issue View git blame Copy permalink