chrisblakely01/JIRA

## JIRA

    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset='utf-8' />
        <meta http-equiv='X-UA-Compatible' content='IE=edge' />


        <link
                rel='stylesheet'
                href='//aui-cdn.atlassian.com/aui-adg/5.8.12/css/aui.css'
                media='all'
        />
        <link
                rel='stylesheet'
                href='//aui-cdn.atlassian.com/aui-adg/5.8.12/css/aui-experimental.css'
                media='all'
        />

        <script
                src='//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'
        ></script>
        <script
                src='//aui-cdn.atlassian.com/aui-adg/5.8.12/js/aui-soy.js'
                type='text/javascript'
        ></script>
        <script
                src='//aui-cdn.atlassian.com/aui-adg/5.8.12/js/aui.js'
                type='text/javascript'
        ></script>
        <script
                src='//aui-cdn.atlassian.com/aui-adg/5.8.12/js/aui-datepicker.js'
        ></script>
        <script
                src='//aui-cdn.atlassian.com/aui-adg/5.8.12/js/aui-experimental.js'
        ></script>
        <script
                src='https://connect-cdn.atl-paas.net/all.js'
                type='text/javascript'
        ></script>
    </head>
    <body class='aui-page-hybrid'>
    <section id='content' role='main'>


    <script>
        $( document ).ready(function() {
            const atlassianJwt = "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiI2MDRiOTIwMzFmOTQ2ZjAwNjlhN2Q5ZjMiLCJxc2giOiJhNGFlYzA1ZDU2NGFlZDU2NGFmNDk5ZDQ1MWQwZjE4NjE1MDllMTgxZjRhZGI3MWIxMWU0NWQ3YTk5OWZhZTM2IiwiaXNzIjoiNjlhNTQwZTgtN2QwMi0zM2JjLTg5ODMtN2Q1ZjdjNzRkMjNlIiwiY29udGV4dCI6e30sImV4cCI6MTY4MzIxMDc1NCwiaWF0IjoxNjgzMjA5ODU0fQ.o4TeYxKCNDCQtBYOpZM5_ObBj3GbZSYa6BAn9l0mYF8"
            const apiKey = ""
            const selectedOrganizationId = ""
            const selectedProjectId = ""
            const selectedEnvironmentId = ""

            let accountId = ""
            const apiKeyField = $("#apiKey")
            const orgIdField = $("#orgId")
            const projectIdField = $('#projectId')
            const envIdField = $('#envId')

            const inputs = [orgIdField, envIdField,  projectIdField]


            const parseHarnessToken = (harnessKey) => {
                const parts = harnessKey.split(".");
                if(parts.length) {
                    accountId = parts[1]
                    return parts[1]
                }

                return "";
            }


            const debounce = (func, wait) => {
                let timeout;

                return function executedFunction(...args) {
                    const later = () => {
                        clearTimeout(timeout);
                        func(...args);
                    };

                    clearTimeout(timeout);
                    timeout = setTimeout(later, wait);
                };
            };


            const validateHarnessKey = (apiKey, accountId) => {
                $.ajax({
                    type: "GET",
                    url: `/api/1.0/jira/configure/validate-harness-key?accountIdentifier=${accountId}&key=${apiKey}&jwt=${atlassianJwt}`,
                    success: function() {
                        $("#accountId").val(accountId);
                        getOrganizations(apiKey)
                    },
                    error: function(xhr, textStatus, errorThrown) {
                        $("#message").text(xhr.responseText)
                        $.each(inputs, function(index, item) {
                            item.prop('disabled', true)
                            item.empty().append($('<option/>', {
                                value: "",
                                text: "- Select -"
                            }));
                        });
                    }
                })
            }

            const validateHarnessKeyDebounced = debounce(function(apiKey, accountId) {
                validateHarnessKey(apiKey, accountId)
            }, 250);


            const getOrganizations = (apiKey, orgId) => {
                orgIdField.empty().append('<option value="">Loading...</option>');
                $.ajax({
                    type: "GET",
                    url: `/api/1.0/jira/configure/organizations?accountIdentifier=${accountId}&jwt=${atlassianJwt}&key=${apiKey}`,
                    success: function(data) {
                        orgIdField.empty()
                        orgIdField.append($('<option/>', {
                            value: "",
                            text: "- Select -"
                        }));

                        $.each(data, function(index, item) {
                            orgIdField.append($('<option/>', {
                                value: item.identifier,
                                text: item.name
                            }));
                        });
                        if(orgId){
                            orgIdField.val(orgId)
                        }
                        orgIdField.prop('disabled', false);
                    },
                    error: function(xhr, textStatus, errorThrown) {
                        $("#message").text(xhr.responseText)
                    }
                })
            }


            const getProjects = (apiKey, orgId, projectId) => {
                projectIdField.empty().append('<option value="">Loading...</option>');
                $.ajax({
                    type: "GET",
                    url: `/api/1.0/jira/configure/projects?organizationIdentifier=${orgId}&accountIdentifier=${accountId}&jwt=${atlassianJwt}&key=${apiKey}`,
                    success: function(data) {
                        projectIdField.empty()
                        projectIdField.append($('<option/>', {
                            value: "",
                            text: "- Select -"
                        }));
                        $.each(data, function(index, item) {
                            projectIdField.append($('<option/>', {
                                value: item.identifier,
                                text: item.name
                            }));
                        });
                        if(projectId) {
                            projectIdField.val(projectId)
                        }
                        projectIdField.prop('disabled', false);
                    },
                    error: function(xhr, textStatus, errorThrown) {
                        $("#message").text(xhr.responseText)
                    }
                })
            }


            const getEnvironments = (apiKey, orgId, projectId, environmentId) => {
                envIdField.empty().append('<option value="">Loading...</option>');
                $.ajax({
                    type: "GET",
                    url: `/api/1.0/jira/configure/environments?accountIdentifier=${accountId}&organizationIdentifier=${orgId}&projectIdentifier=${projectId}&jwt=${atlassianJwt}&key=${apiKey}`,
                    success: function(data) {
                        envIdField.empty()
                        envIdField.append($('<option/>', {
                            value: "",
                            text: "- Select -"
                        }));
                        $.each(data, function(index, item) {
                            envIdField.append($('<option/>', {
                                value: item.identifier,
                                text: item.name
                            }));
                        });
                        if(environmentId){
                            envIdField.val(environmentId)
                        }
                        envIdField.prop('disabled', false);
                    },
                    error: function(xhr, textStatus, errorThrown) {
                        $("#message").text(xhr.responseText)
                    }
                })
            }


            $("#atlassianJwt").val(atlassianJwt);

            if(apiKey) {
                if(accountId) {
                    $("#accountId").val(accountId);
                }

                if(selectedOrganizationId) {
                    getOrganizations(apiKey, selectedOrganizationId)
                }

                if(selectedProjectId) {
                    getProjects(apiKey, selectedOrganizationId, selectedProjectId)
                }

                if(selectedEnvironmentId) {
                    getEnvironments(apiKey, selectedOrganizationId, selectedProjectId, selectedEnvironmentId)
                }
            }


            if(!apiKeyField.val()){
                orgIdField.prop('disabled', true)
            }

            if(!orgIdField.val()){
                projectIdField.prop('disabled', true)
            }

            if(!projectIdField.val()){
                envIdField.prop('disabled', true)
            }


            apiKeyField.on('input', function (e) {
                $("#message").empty()
                if( apiKeyField.val() ) {
                    const accountId = parseHarnessToken(apiKeyField.val())
                    validateHarnessKeyDebounced(e.target.value, accountId)
                } else {
                    $.each(inputs, function(index, item) {
                        item.prop('disabled', true)
                        item.empty().append($('<option/>', {
                            value: "",
                            text: "- Select -"
                        }));
                    });
                }
            });


            $('select').on('change', function (){
                if(orgIdField.is(":disabled") || !orgIdField.val()){
                    projectIdField.prop('disabled', true)
                    projectIdField.empty().append($('<option/>', {
                        value: "",
                        text: "- Select -"
                    }));

                    envIdField.prop('disabled', true)
                    envIdField.empty().append($('<option/>', {
                        value: "",
                        text: "- Select -"
                    }));
                }

                if(projectIdField.is(":disabled")  ||!projectIdField.val()){
                    envIdField.prop('disabled', true)
                    envIdField.empty().append($('<option/>', {
                        value: "",
                        text: "- Select -"
                    }));
                }
            })

            orgIdField.on('change', function () {
                if( $(this).val() ) {
                    getProjects(apiKeyField.val(), orgIdField.val(),)
                }
            });

            projectIdField.on('change', function () {
                if( projectIdField.val() ) {
                    getEnvironments(apiKeyField.val(), orgIdField.val(), projectIdField.val())
                }
            });

        });
    </script>

    <header class='aui-page-header'>
        <div class='aui-page-header-inner'>
            <div class='aui-page-header-main'>
                <h1>Configure Harness Feature Flag Addon</h1>
            </div>
        </div>
    </header>

    <div class='aui-page-panel main-panel'>
        <div class='aui-page-panel-inner'>
            <section class='aui-page-panel-content'>
                <div class='aui-group'>
                    <div class='aui-item'>
                        <form class='aui' id='api-key-form' method='post'>
                            <input type="hidden" id="accountId" name="accountId" value="">
                            <input type="hidden" id="atlassianJwt" name="atlassianJwt" value="">
                            <div class='field-group'>
                                <label for='apiKey'>Harness Token
                                    <span class='aui-icon icon-required'>(required)</span></label>
                                <input
                                        class='text long-field'
                                        type='password'
                                        id='apiKey'
                                        name='apiKey'
                                        required='required'
                                        value=''
                                />
                            </div>
                            <div class='field-group'>
                                <label for='orgId'>Organization
                                    <span class='aui-icon icon-required'>(required)</span>
                                </label>
                                <select
                                        class='text long-field'
                                        id='orgId'
                                        name='orgId'
                                        required='required'>
                                    <option value=''>- Select -</option>
                                </select>
                            </div>
                            <div class='field-group'>
                                <label for='projectId'>Project
                                    <span class='aui-icon icon-required'>(required)</span>
                                </label>
                                <select
                                        class='text long-field'
                                        id='projectId'
                                        name='projectId'
                                        required='required'>
                                    <option value=""> - Select -</option>
                                </select>
                            </div>
                            <div class='field-group'>
                                <label for='envId'>Environment
                                    <span class='aui-icon icon-required'>(required)</span>
                                </label>
                                <select
                                        class='text long-field'
                                        id='envId'
                                        name='envId'
                                        required='required'>
                                    <option value=""> - Select -</option>
                                </select>
                            </div>
                            <div class='buttons-container'>
                                <div class='buttons'>
                                    <input
                                            class='button submit'
                                            type='submit'
                                            value='Save'
                                            id='save-button'
                                    />
                                </div>
                            </div>
                            <div class='field-group'>
                                <div id="message" class='description'>

                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </section>
        </div>
    </div>

    </section>
    </body>
    </html>

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset='utf-8' />
	<meta http-equiv='X-UA-Compatible' content='IE=edge' />


	<link
	rel='stylesheet'
	href='//aui-cdn.atlassian.com/aui-adg/5.8.12/css/aui.css'
	media='all'
	/>
	<link
	rel='stylesheet'
	href='//aui-cdn.atlassian.com/aui-adg/5.8.12/css/aui-experimental.css'
	media='all'
	/>

	<script
	src='//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'
	></script>
	<script
	src='//aui-cdn.atlassian.com/aui-adg/5.8.12/js/aui-soy.js'
	type='text/javascript'
	></script>
	<script
	src='//aui-cdn.atlassian.com/aui-adg/5.8.12/js/aui.js'
	type='text/javascript'
	></script>
	<script
	src='//aui-cdn.atlassian.com/aui-adg/5.8.12/js/aui-datepicker.js'
	></script>
	<script
	src='//aui-cdn.atlassian.com/aui-adg/5.8.12/js/aui-experimental.js'
	></script>
	<script
	src='https://connect-cdn.atl-paas.net/all.js'
	type='text/javascript'
	></script>
	</head>
	<body class='aui-page-hybrid'>
	<section id='content' role='main'>


	<script>
	$( document ).ready(function() {
	const atlassianJwt = "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiI2MDRiOTIwMzFmOTQ2ZjAwNjlhN2Q5ZjMiLCJxc2giOiJhNGFlYzA1ZDU2NGFlZDU2NGFmNDk5ZDQ1MWQwZjE4NjE1MDllMTgxZjRhZGI3MWIxMWU0NWQ3YTk5OWZhZTM2IiwiaXNzIjoiNjlhNTQwZTgtN2QwMi0zM2JjLTg5ODMtN2Q1ZjdjNzRkMjNlIiwiY29udGV4dCI6e30sImV4cCI6MTY4MzIxMDc1NCwiaWF0IjoxNjgzMjA5ODU0fQ.o4TeYxKCNDCQtBYOpZM5_ObBj3GbZSYa6BAn9l0mYF8"
	const apiKey = ""
	const selectedOrganizationId = ""
	const selectedProjectId = ""
	const selectedEnvironmentId = ""

	let accountId = ""
	const apiKeyField = $("#apiKey")
	const orgIdField = $("#orgId")
	const projectIdField = $('#projectId')
	const envIdField = $('#envId')

	const inputs = [orgIdField, envIdField, projectIdField]


	const parseHarnessToken = (harnessKey) => {
	const parts = harnessKey.split(".");
	if(parts.length) {
	accountId = parts[1]
	return parts[1]
	}

	return "";
	}



	const debounce = (func, wait) => {
	let timeout;

	return function executedFunction(...args) {
	const later = () => {
	clearTimeout(timeout);
	func(...args);
	};

	clearTimeout(timeout);
	timeout = setTimeout(later, wait);
	};
	};


	const validateHarnessKey = (apiKey, accountId) => {
	$.ajax({
	type: "GET",
	url: `/api/1.0/jira/configure/validate-harness-key?accountIdentifier=${accountId}&key=${apiKey}&jwt=${atlassianJwt}`,
	success: function() {
	$("#accountId").val(accountId);
	getOrganizations(apiKey)
	},
	error: function(xhr, textStatus, errorThrown) {
	$("#message").text(xhr.responseText)
	$.each(inputs, function(index, item) {
	item.prop('disabled', true)
	item.empty().append($('<option/>', {
	value: "",
	text: "- Select -"
	}));
	});
	}
	})
	}

	const validateHarnessKeyDebounced = debounce(function(apiKey, accountId) {
	validateHarnessKey(apiKey, accountId)
	}, 250);



	const getOrganizations = (apiKey, orgId) => {
	orgIdField.empty().append('<option value="">Loading...</option>');
	$.ajax({
	type: "GET",
	url: `/api/1.0/jira/configure/organizations?accountIdentifier=${accountId}&jwt=${atlassianJwt}&key=${apiKey}`,
	success: function(data) {
	orgIdField.empty()
	orgIdField.append($('<option/>', {
	value: "",
	text: "- Select -"
	}));

	$.each(data, function(index, item) {
	orgIdField.append($('<option/>', {
	value: item.identifier,
	text: item.name
	}));
	});
	if(orgId){
	orgIdField.val(orgId)
	}
	orgIdField.prop('disabled', false);
	},
	error: function(xhr, textStatus, errorThrown) {
	$("#message").text(xhr.responseText)
	}
	})
	}


	const getProjects = (apiKey, orgId, projectId) => {
	projectIdField.empty().append('<option value="">Loading...</option>');
	$.ajax({
	type: "GET",
	url: `/api/1.0/jira/configure/projects?organizationIdentifier=${orgId}&accountIdentifier=${accountId}&jwt=${atlassianJwt}&key=${apiKey}`,
	success: function(data) {
	projectIdField.empty()
	projectIdField.append($('<option/>', {
	value: "",
	text: "- Select -"
	}));
	$.each(data, function(index, item) {
	projectIdField.append($('<option/>', {
	value: item.identifier,
	text: item.name
	}));
	});
	if(projectId) {
	projectIdField.val(projectId)
	}
	projectIdField.prop('disabled', false);
	},
	error: function(xhr, textStatus, errorThrown) {
	$("#message").text(xhr.responseText)
	}
	})
	}


	const getEnvironments = (apiKey, orgId, projectId, environmentId) => {
	envIdField.empty().append('<option value="">Loading...</option>');
	$.ajax({
	type: "GET",
	url: `/api/1.0/jira/configure/environments?accountIdentifier=${accountId}&organizationIdentifier=${orgId}&projectIdentifier=${projectId}&jwt=${atlassianJwt}&key=${apiKey}`,
	success: function(data) {
	envIdField.empty()
	envIdField.append($('<option/>', {
	value: "",
	text: "- Select -"
	}));
	$.each(data, function(index, item) {
	envIdField.append($('<option/>', {
	value: item.identifier,
	text: item.name
	}));
	});
	if(environmentId){
	envIdField.val(environmentId)
	}
	envIdField.prop('disabled', false);
	},
	error: function(xhr, textStatus, errorThrown) {
	$("#message").text(xhr.responseText)
	}
	})
	}


	$("#atlassianJwt").val(atlassianJwt);

	if(apiKey) {
	if(accountId) {
	$("#accountId").val(accountId);
	}

	if(selectedOrganizationId) {
	getOrganizations(apiKey, selectedOrganizationId)
	}

	if(selectedProjectId) {
	getProjects(apiKey, selectedOrganizationId, selectedProjectId)
	}

	if(selectedEnvironmentId) {
	getEnvironments(apiKey, selectedOrganizationId, selectedProjectId, selectedEnvironmentId)
	}
	}



	if(!apiKeyField.val()){
	orgIdField.prop('disabled', true)
	}

	if(!orgIdField.val()){
	projectIdField.prop('disabled', true)
	}

	if(!projectIdField.val()){
	envIdField.prop('disabled', true)
	}


	apiKeyField.on('input', function (e) {
	$("#message").empty()
	if( apiKeyField.val() ) {
	const accountId = parseHarnessToken(apiKeyField.val())
	validateHarnessKeyDebounced(e.target.value, accountId)
	} else {
	$.each(inputs, function(index, item) {
	item.prop('disabled', true)
	item.empty().append($('<option/>', {
	value: "",
	text: "- Select -"
	}));
	});
	}
	});


	$('select').on('change', function (){
	if(orgIdField.is(":disabled") \|\| !orgIdField.val()){
	projectIdField.prop('disabled', true)
	projectIdField.empty().append($('<option/>', {
	value: "",
	text: "- Select -"
	}));

	envIdField.prop('disabled', true)
	envIdField.empty().append($('<option/>', {
	value: "",
	text: "- Select -"
	}));
	}

	if(projectIdField.is(":disabled") \|\|!projectIdField.val()){
	envIdField.prop('disabled', true)
	envIdField.empty().append($('<option/>', {
	value: "",
	text: "- Select -"
	}));
	}
	})

	orgIdField.on('change', function () {
	if( $(this).val() ) {
	getProjects(apiKeyField.val(), orgIdField.val(),)
	}
	});

	projectIdField.on('change', function () {
	if( projectIdField.val() ) {
	getEnvironments(apiKeyField.val(), orgIdField.val(), projectIdField.val())
	}
	});

	});
	</script>

	<header class='aui-page-header'>
	<div class='aui-page-header-inner'>
	<div class='aui-page-header-main'>
	<h1>Configure Harness Feature Flag Addon</h1>
	</div>
	</div>
	</header>

	<div class='aui-page-panel main-panel'>
	<div class='aui-page-panel-inner'>
	<section class='aui-page-panel-content'>
	<div class='aui-group'>
	<div class='aui-item'>
	<form class='aui' id='api-key-form' method='post'>
	<input type="hidden" id="accountId" name="accountId" value="">
	<input type="hidden" id="atlassianJwt" name="atlassianJwt" value="">
	<div class='field-group'>
	<label for='apiKey'>Harness Token
	<span class='aui-icon icon-required'>(required)</span></label>
	<input
	class='text long-field'
	type='password'
	id='apiKey'
	name='apiKey'
	required='required'
	value=''
	/>
	</div>
	<div class='field-group'>
	<label for='orgId'>Organization
	<span class='aui-icon icon-required'>(required)</span>
	</label>
	<select
	class='text long-field'
	id='orgId'
	name='orgId'
	required='required'>
	<option value=''>- Select -</option>
	</select>
	</div>
	<div class='field-group'>
	<label for='projectId'>Project
	<span class='aui-icon icon-required'>(required)</span>
	</label>
	<select
	class='text long-field'
	id='projectId'
	name='projectId'
	required='required'>
	<option value=""> - Select -</option>
	</select>
	</div>
	<div class='field-group'>
	<label for='envId'>Environment
	<span class='aui-icon icon-required'>(required)</span>
	</label>
	<select
	class='text long-field'
	id='envId'
	name='envId'
	required='required'>
	<option value=""> - Select -</option>
	</select>
	</div>
	<div class='buttons-container'>
	<div class='buttons'>
	<input
	class='button submit'
	type='submit'
	value='Save'
	id='save-button'
	/>
	</div>
	</div>
	<div class='field-group'>
	<div id="message" class='description'>

	</div>
	</div>
	</form>
	</div>
	</div>
	</section>
	</div>
	</div>

	</section>
	</body>
	</html>