(?) icon is used both for unknown and help

[jsoref]

If you are trying to resolve an environment-specific issue or have a one-off question about the edge case that does not require a feature then please consider asking a question in argocd slack channel.

Checklist:

• I've searched in the docs and FAQ for my answer: https://bit.ly/argocd-faq.
• I've included steps to reproduce the bug.
• I've pasted the output of argocd version.

Describe the bug

When an app is first found by argo, or if after being first found by argo, the helm template command fails, argo will show two (?) icons (fa-question-circle) next to each other, one is an "unknown state", and the other is "help" -- they are nearly identical and the juxtaposition is problematic.

To Reproduce

1. Create an app file pointing to a chart that requires a values file
2. Don't provide the values file
3. Ask argo to digest the set

Expected behavior

Don't use nearly identical icons (even if the sizes are slightly different) to refer to unrelated concepts

Screenshots

https://cd.apps.argoproj.io/applications/rollouts-demo

Version

{
    "Version": "v1.8.0+05c493b",
    "BuildDate": "2020-10-20T02:01:12Z",
    "GitCommit": "05c493b3a6de9f95f7e11eb35148e1639cf601b4",
    "GitTreeState": "clean",
    "GoVersion": "go1.14.1",
    "Compiler": "gc",
    "Platform": "linux/amd64",
    "KsonnetVersion": "v0.13.1",
    "KustomizeVersion": "v3.8.1 2020-07-16T00:58:46Z",
    "HelmVersion": "v3.3.1+g249e521",
    "KubectlVersion": "v1.17.8",
    "JsonnetVersion": "v0.16.0"
}

Logs

[jsoref]

For my reference, it's in fact the same icon: https://github.com/argoproj/argo-cd/search?q=fa-question-circle

argo-cd/ui/src/app/settings/components/project-sync-windows-edit/project-sync-windows-edit.tsx

Lines 12 to 17 in 4169697

	function helpTip(text: string) {
	return (
	<Tooltip content={text}>
	<span style={{fontSize: 'smaller'}}>
	{' '}
	<i className='fa fa-question-circle' />

argo-cd/ui/src/app/settings/components/project-details/project-details.tsx

Lines 32 to 37 in 3e19b2f

	function helpTip(text: string) {
	return (
	<Tooltip content={text}>
	<span style={{fontSize: 'smaller'}}>
	{' '}
	<i className='fa fa-question-circle' />

argo-cd/ui/src/app/applications/components/utils.tsx

Lines 91 to 92 in cdb3df1

	export const ComparisonStatusIcon = ({status, resource, label}: {status: appModels.SyncStatusCode; resource?: {requiresPruning?: boolean}; label?: boolean}) => {
	let className = 'fa fa-question-circle';

argo-cd/ui/src/app/applications/components/utils.tsx

Lines 156 to 158 in cdb3df1

	export const HealthStatusIcon = ({state}: {state: appModels.HealthStatus}) => {
	let color = COLORS.health.unknown;
	let icon = 'fa-question-circle';

argo-cd/ui/src/app/applications/components/utils.tsx

Lines 185 to 187 in cdb3df1

	export const ResourceResultIcon = ({resource}: {resource: appModels.ResourceResult}) => {
	let color = COLORS.sync_result.unknown;
	let icon = 'fa-question-circle';

argo-cd/ui/src/app/applications/components/utils.tsx

Lines 430 to 464 in cdb3df1

	export const SyncWindowStatusIcon = ({state, window}: {state: appModels.SyncWindowsState; window: appModels.SyncWindow}) => {
	let className = '';
	let color = '';
	let current = '';
	if (state.windows === undefined) {
	current = 'Inactive';
	} else {
	for (const w of state.windows) {
	if (w.kind === window.kind && w.schedule === window.schedule && w.duration === window.duration) {
	current = 'Active';
	break;
	} else {
	current = 'Inactive';
	}
	}
	}
	switch (current + ':' + window.kind) {
	case 'Active:deny':
	case 'Inactive:allow':
	className = 'fa fa-stop-circle';
	if (window.manualSync) {
	color = COLORS.sync_window.manual;
	} else {
	color = COLORS.sync_window.deny;
	}
	break;
	case 'Active:allow':
	case 'Inactive:deny':
	className = 'fa fa-check-circle';
	color = COLORS.sync_window.allow;
	break;
	default:
	className = 'fa fa-question-circle';

[jsoref]

Possible icons for unknown:

• https://fontawesome.com/icons/cloudversify
  
• https://fontawesome.com/icons/cloud?style=solid
  
• https://fontawesome.com/icons/meh-blank?style=regular
  
• https://fontawesome.com/icons/ghost?style=solid
  

If any of these appeal, I can write a PR for it.

[jsoref]

Alternatively, the help icon could be replaced by an info icon, as it isn't really help.

• https://fontawesome.com/icons/info-circle?style=regular
  

[alexmt]

I think ghost is the best option

• https://fontawesome.com/icons/ghost?style=solid
  

Argo CD has to show unknown when it does not know status or cannot show it because user don't have permissions. I think ghost works well for both cases.