go.chromium.org/luci@v0.0.0-20240309015107-7cdc2e660f33/milo/ui/src/build/pages/builder_page/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 { useLocalStorage } from 'react-use';
    16  
    17  import { SanitizedHtml } from '@/common/components/sanitized_html';
    18  import {
    19    ExpandableEntry,
    20    ExpandableEntryBody,
    21    ExpandableEntryHeader,
    22  } from '@/generic_libs/components/expandable_entry';
    23  
    24  const EXPANDED_CACHE_KEY = 'builder-description-section-expanded';
    25  
    26  export interface BuilderDescriptionSectionProps {
    27    readonly descriptionHtml: string;
    28  }
    29  
    30  export function BuilderDescriptionSection({
    31    descriptionHtml,
    32  }: BuilderDescriptionSectionProps) {
    33    const [expanded = true, setExpanded] =
    34      useLocalStorage<boolean>(EXPANDED_CACHE_KEY);
    35  
    36    return (
    37      <ExpandableEntry expanded={expanded}>
    38        <ExpandableEntryHeader
    39          sx={{
    40            lineHeight: '19px',
    41            gridTemplateColumns: 'auto 1fr',
    42            gridTemplateRows: 'auto',
    43            '& > svg': {
    44              marginTop: '50%',
    45            },
    46          }}
    47          onToggle={setExpanded}
    48        >
    49          <h3>Builder Description</h3>
    50        </ExpandableEntryHeader>
    51        <ExpandableEntryBody ruler="none">
    52          <SanitizedHtml
    53            html={descriptionHtml}
    54            sx={{
    55              padding: '10px',
    56              backgroundColor: 'var(--block-background-color)',
    57            }}
    58          />
    59        </ExpandableEntryBody>
    60      </ExpandableEntry>
    61    );
    62  }