go.chromium.org/luci@v0.0.0-20240309015107-7cdc2e660f33/milo/ui/src/build/legacy/build_page/overview_tab/summary_section.tsx (about)

     1  // Copyright 2023 The LUCI Authors.
     2  //
     3  // Licensed under the Apache License, Version 2.0 (the "License");
     4  // you may not use this file except in compliance with the License.
     5  // You may obtain a copy of the License at
     6  //
     7  //      http://www.apache.org/licenses/LICENSE-2.0
     8  //
     9  // Unless required by applicable law or agreed to in writing, software
    10  // distributed under the License is distributed on an "AS IS" BASIS,
    11  // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    12  // See the License for the specific language governing permissions and
    13  // limitations under the License.
    14  
    15  import { observer } from 'mobx-react-lite';
    16  import { useMemo } from 'react';
    17  
    18  import { SanitizedHtml } from '@/common/components/sanitized_html';
    19  import {
    20    BUILD_STATUS_CLASS_MAP,
    21    BUILD_STATUS_DISPLAY_MAP,
    22  } from '@/common/constants/legacy';
    23  import { useStore } from '@/common/store';
    24  import { renderMarkdown } from '@/common/tools/markdown/utils';
    25  
    26  export const SummarySection = observer(() => {
    27    const store = useStore();
    28    const build = store.buildPage.build;
    29  
    30    const summaryHtml = useMemo(
    31      () =>
    32        build?.data.summaryMarkdown
    33          ? renderMarkdown(build?.data.summaryMarkdown)
    34          : null,
    35      [build?.data.summaryMarkdown],
    36    );
    37  
    38    if (!build) {
    39      return <></>;
    40    }
    41  
    42    return (
    43      <div
    44        css={{
    45          padding: '0 10px',
    46          clear: 'both',
    47          overflowWrap: 'break-word',
    48          '& pre': {
    49            whiteSpace: 'pre-wrap',
    50            overflowWrap: 'break-word',
    51            fontSize: '12px',
    52          },
    53          '& *': {
    54            marginBlock: '10px',
    55          },
    56        }}
    57        className={`${BUILD_STATUS_CLASS_MAP[build.data.status]}-bg`}
    58      >
    59        {summaryHtml ? (
    60          <SanitizedHtml html={summaryHtml} />
    61        ) : (
    62          <div css={{ fontWeight: 500 }}>
    63            Build{' '}
    64            {BUILD_STATUS_DISPLAY_MAP[build.data.status] || 'status unknown'}
    65          </div>
    66        )}
    67      </div>
    68    );
    69  });