Make create, edit community/collection/item dialogs theme-able.

[mwoodiupui]

Description

See the title. This is an elaboration of local work that was needed to create a custom new-item dialog in our local theme (instead of hacking the stock dialog).

Instructions for Reviewers

List of changes in this PR:

• Create themed wrappers for the dialog components.
• Use them in the menu resolver, in place of the un-themed components.

Checklist

• My PR is small in size (e.g. less than 1,000 lines of code, not including comments & specs/tests), or I have provided reasons as to why that's not possible.
• My PR passes TSLint validation using yarn run lint
• My PR doesn't introduce circular dependencies
• My PR includes TypeDoc comments for all new (or modified) public methods and classes. It also includes TypeDoc for large or complex private methods.
• My PR passes all specs/tests and includes new/updated specs or tests based on the Code Testing Guide.
• If my PR includes new, third-party dependencies (in package.json), I've made sure their licenses align with the DSpace BSD License based on the Licensing of Contributions documentation.

[mwoodiupui]

This is draft because I'm running Node v18 but the specified Webpack and eslint-plugin-jsdoc require an earlier version.

[artlowel]

Thanks @mwoodiupui

What you've written here looks correct at first sight, but a few things are missing:

• Those new ThemedComponents have to be declared in a module for them to work, the same module the components they're theming are declared in, I think that's SharedModule in this case
• When theming a component you should provide an example themed version in the custom theme. See HeaderComponent in the custom theme for example That way, people that want to use your themed component have something to start from. You can use that version in the custom component yourself as well to verify that everything is wired up correctly. If you modify it, and use the custom theme, those modifications should show up

[artlowel]

Thanks @mwoodiupui

I have a few more comments to bring these in line with the other components in the custom theme. You picked an unconventional set of components to get started with (ones that share a single html template) which complicates things a bit

[artlowel]

The convention for the custom theme is to already create html and css file for the component, but add them in comments and refer back to the version in the base theme.

That means that if you enable the theme, everything looks exactly like the base theme. Then if you want to start theming the component all you need to do is swap the comments around and you can start overwriting the css or the html right away.

Also, I've noticed that using absolute paths in imports tends to cause build problems in certain scenarios that are hard to diagnose, so I'd suggest always using relative paths, even though that can lead to a ridiculous number of ../-es, like in this case. However most IDEs can keep count for you.

Suggested change

	import {
	CreateCollectionParentSelectorComponent as BaseComponent
	} from 'src/app/shared/dso-selector/modal-wrappers/create-collection-parent-selector/create-collection-parent-selector.component';
	@Component({
	selector: 'ds-create-collection-parent-selector',
	templateUrl: '../dso-selector-modal-wrapper.component.html',
	})
	import {
	CreateCollectionParentSelectorComponent as BaseComponent
	} from '../../../../../../../app/shared/dso-selector/modal-wrappers/create-collection-parent-selector/create-collection-parent-selector.component';
	@Component({
	selector: 'ds-create-collection-parent-selector',
	// styleUrls: ['create-collection-parent-selector.component.scss'],
	// templateUrl: 'create-collection-parent-selector.component.html',
	templateUrl: '../../../../../../../app/shared/dso-selector/modal-wrappers/dso-selector-modal-wrapper.component.html',
	})

[mwoodiupui]

Done, I think.

[artlowel]

Rather than moving this file to the theme folder when it's not itself a themed component, I'd reference the version in the base theme as detailed in a comment above, and delete this file

[mwoodiupui]

Yes, this file becomes useless. Done.

[mwoodiupui]

I have a knack for starting out to learn with a problem that seems simple but turns out to be difficult or unusual. Thanks for a thorough critique.

[artlowel]

No problem, thanks for incorporating it in your PR!